Tag: javascript

Obecne aplikacje mobilne są coraz bardziej zaawansowane pod względem funkcjonalności jak i prezentują większy poziom skomplikowania. Z powodu dużej konkurencji użytkownicy aplikacji nie powinni odczuwać jakichkolwiek niedogodności podczas użytkowania aplikacji. Ważnym celem dla programisty jest więc zapewnienie, by aplikacja działała w sposób płynny oraz by jej uruchomienie następowało w bardzo krótkim czasie oraz by funkcjonowała w satysfakcjonujący użytkownika sposób – niezależnie od urządzenia, na którym jest uruchamiana.

Rozmiar aplikacji w obliczu obecnych urządzeń o dużym rozmiarze pamięci nie wydaje się być tak istotny, ale jeśli aplikacja zajmuje dużo miejsca, może być świadomie ignorowana przez użytkowników.

Aplikacje mobilne oparte o Javascript (w technologiach takich jak React Native, Ionic czy NativeScript) wykorzystują silnik, który użytkują również przeglądarki internetowe. Nie zawsze jednak cele, na które powinny stawiać przeglądarki, są takie same jak w przypadku aplikacji mobilnych.

By zapewnić developerom tworzenie wydajnych aplikacji, programiści Facebooka stworzyli całkiem nowy silnik Javascriptu – Hermes. Aby go użyć, musimy korzystać z frameworka React Native umożliwiającego tworzenie wieloplatformowych aplikacji mobilnych i nie tylko – również webowych, desktopowych czy na konsole.

Statystyki

Podczas prac nad Hermesem, przeprowadzono liczne testy, których wyniki przedstawiono w poniższych metrykach.

Czas reakcji (TTI) – czas od włączenia, po którym aplikacja jest gotowa do użytku.

[easy_chart chart_id=’25674′]

Rozmiar aplikacji – rozmiar pliku instalacyjnego APK

Mowa tu o tzw. uniwersalnym pakiecie, czyli takim, który jest przeznaczony na wszystkie dostępne architektury.

[easy_chart chart_id=’25692′]

Użycie aplikacji

Pamięć, którą aplikacja wykorzystuje podczas działania.

[easy_chart chart_id=’25696′]

Warto dodać, że statystyki były przeprowadzone na modelu Google Pixel oraz na domyślnej, startowej wersji aplikacji. Po wykorzystaniu silnika w już istniejącej aplikacji z pewnymi funkcjonalnościami, wyniki mają jeszcze większą amplitudę oraz są jeszcze bardziej imponujące.

Sposób działania

Zazwyczaj silnik Javascriptu generuje tzw. bytecode dopiero po załadowaniu kodu. Tutaj strategia jest zupełnie inna. Hermes przenosi tą część uruchamiania aplikacji do czynności wykonywanych przed instalacją i przed uruchomieniem, co powoduje znacznie krótszy czas uruchamiania aplikacji.

Inną nowością w silniku jest to, że w przeciwieństwie do większości obecnych silników Hermes nie używa JIT (just-in-time Compiler). Jest to kompilator, który przyśpiesza pracę aplikacji. Jego brak programiści tłumaczą znacznym przyśpieszeniem czasu potrzebnego na uruchomienie aplikacji (TTI) i poprawą innych metryk, na których im zależało bardziej i które są najistotniejsze z punktu użytkowania aplikacji mobilnych.

Sposób uruchomienia silnika

Aby wykorzystać silnik Hermes w naszej aplikacji, musimy posiadać projekt w React Native w wersji 0.60 lub wyższej.

Następnie w pliku android/app/build.gradle zmieniamy wartość enableHermes na true:

project.ext.react = [
entryFile: "index.js",
enableHermes: true
]

Jeśli w aplikacji używamy ProGuarda, konieczne będzie dodanie poniższej linii w pliku jego reguł (proguard-rules.pro):

-keep class com.facebook.hermes.unicode.** { *; }

Jeśli już kiedyś uruchamialiśmy aplikację, musimy użyć komendy:

cd android && ./gradlew clean

I dopiero później, aby uruchomić aplikację wpisujemy:

react-native run-android

Warto dodać, że prawdziwy progres w działaniu aplikacji zauważymy dopiero po jej zbuildowaniu do wersji release. Czynność ta spowoduje skompilowanie kodu Javascriptu do bytecode i pozwoli na realne przyśpieszenie startu aplikacji.

Źródła:

https://facebook.github.io/react-native/docs/hermes/

https://hermesengine.dev/

https://github.com/facebook/hermes

React Native EU 2019: Tzvetan Mikov – Improving React Native Performance

Trendy w tworzeniu stron internetowych czasami zmieniają się szybciej, niż można je wdrożyć. Dlatego ważne jest, aby mieć świadomość tego co będzie a nie tylko skupiać się na tym co jest teraz. Spróbujemy przedstawić najbardziej wiarygodne prognozy jakie będą trendy w rozwoju technologii webowych w 2018 roku. Jeśli masz zamiar zbudować, przeprojektować swoją stronę internetową lub stworzyć nowy sklep internetowy upewnij się, że jesteś świadomy zmian w otaczającym nas świecie.

Progresywne aplikacje internetowe / Progressive Web Applications

Świat pierwszy raz usłyszał o progresywnych aplikacjach internetowych w 2015 roku. W następnym roku spotkaliśmy się z pierwszymi wdrożeniami tej technologii, a w 2018 roku progresywne aplikacje internetowe stały się głównym konkurentem natywnych aplikacji mobilnych. Progresywne aplikacje internetowe (Progressive Web Apps) to strony internetowe, które przypominają natywne aplikacje mobilne. Mogą pracować w trybie offline, zapewniając wyjątkowe wrażenia użytkownikowi (User Experience – UX). Użytkownicy, którzy często korzystają z konkretnej strony internetowej mogą zapisać skrót do tej witryny na ekranie głównym urządzenia mobilnego. Ponieważ większość informacji jest przechowywana w pamięci podręcznej, aplikacja ładuje się natychmiast. Dzięki działaniu aplikacji w tle najnowsze informacje są buforowane za każdym razem, gdy urządzenie jest podłączone do Internetu. Możliwość pracy offline (bez połączenia z Internetem) jest jedną z głównych zalet progresywnych aplikacji internetowych. PWAs (Progressive Web Apps) zyskują popularność i stają się prawdziwym trendem rozwoju sieci. Niektóre wiodące firmy na świecie dowodzą skuteczności tej technologii. Sklep internetowy Flipkart odnotował 70% wzrost liczby konwersji i potroił czas spędzony na ich stronie po uruchomieniu wersji PWA witryny. A informacyjna strona The Washington Post odnotowała prawie pięciokrotny wzrost zaangażowania użytkowników. Po tak inspirujących przykładach, świat czeka na większe zainteresowanie wokół progresywnych aplikacji internetowych w 2018 roku. Chociaż technologia jest całkiem nowa, jej perspektywy wyglądają bardzo obiecująco.

Internetowa obsługa klienta / Online customer support

Rok 2017 był rokiem pomocnych chatbotów. Ponieważ są już tysiące botów, jakość ich usług będzie kolejnym trendem rozwoju sieci.Przewiduje się, że 85% wszystkich interakcji z klientami będzie przebiegać bez pomocy człowieka do 2020 roku.Obsługa klienta za pomocą chatbota staje się koniecznością na prawie każdej stronie internetowej. Niezależnie od tego, czy sprzedajesz elektronikę, zabawki dla dzieci czy usługi programistyczne, powinieneś przyjrzeć się tej technologii. Interfejs konwersacyjny zmienił sposób interakcji firm z klientami. Posiadanie bota na stronie firmy zapewnia kontakt z klientem w dowolnym czasie i w każdej sytuacji. Chatbot daje klientowi poczucie interakcji z człowiekiem. Przecież nie wiemy do końca kto tak naprawdę jest po drugiej stronie. Bot jest wystarczająco inteligentny, aby odpowiedzieć na najczęściej zadawane pytania, przekierować klientów na potrzebną stronę, aby pomóc im wybrać odpowiedni produkt, a nawet pomóc dokonać płatności. A wszystko to bez kosztownego, całodobowego działu obsługi klienta.W 2018 roku klienci będą preferować strony internetowe z odpowiednią pomocą online. Możesz utworzyć dział obsługi klienta lub pozyskać chatbota, który poprowadzi potencjalnego klienta przez twoją witrynę. Druga opcja pozwoli Ci zaoszczędzić czas i zasoby oraz zoptymalizować proces pracy.

Powiadomienia na stronach internetowych /  Push notifications for websites

Powiadomienia w aplikacjach mobilnych okazały się bardzo skutecznym sposobem ponownego zaangażowania użytkowników. Niedawno pomysł ten został zaimplementowany na stronach internetowych i staje się nowym trendem w ich tworzeniu.Proces wygląda dość prosto: użytkownik odwiedza stronę internetową i jest proszony o włączanie powiadomień. Następnie zostanie powiadomiony o wszelkich zmianach na stronie internetowej, takich jak nowy wpis na blogu lub prywatna wiadomość nawet po zamknięciu karty w tej witrynie. Główna zaleta takiej technologii jest oczywista – pozwala utrzymywać zaangażowanie użytkowników bez kosztów mailingu czy reklamy. W niektórych przypadkach powiadomienia push mogą być tańszą alternatywą dla aplikacji mobilnej. Natychmiast dostarczają nowe informacje i przekierowują użytkownika do witryny, aby dowiedzieć się więcej. Powiadomienia push mają lepszą skuteczność niż wiadomości e-mail, SMS czy media społecznościowe w dostarczaniu aktualnych informacji. Są szybkie, przychodzą na czas i nie wymagają żadnych skomplikowanych działań. Przechodzenie z technologii Flash na HTML 5/Flash to HTML 5. W 2010 roku Steve Jobs opublikował swoje przemyślenia na temat technologii Flash i jej przyszłości. Stało się jasne, że jej rozwój nie potrwa długo. Główną słabością tej technologii jest niekompatybilność z urządzeniami mobilnymi. Ogromna ilość ruchu jest tracona właśnie z powodu przestarzałej technologii. Jeśli nadal używasz Flasha na swojej stronie internetowej nadszedł już czas na zmianę. Najlepszą alternatywą jest dobrze znany HTML5, technologia która staje się uniwersalnym formatem dla wszystkich rodzajów treści cyfrowych. Najwięksi gracze na rynku video, tacy jak YouTube już dwa lata temu przeszli na HTML5.

Dynamiczny interfejs / Motion Interface UI

Prostota to dominujący trend w ostatnich latach. Dotyczy to również projektowania stron internetowych. Internauci są już zmęczeni zwariowanymi GIF-ami i migającymi reklamami, dlatego witryny z umiarkowanym wzornictwem zyskują więcej uznania. W tym samym czasie dynamiczny interfejs staje się coraz bardziej popularny. Animacje pozwalają dodać więcej stylu i umożliwiają odróżnienie twojej strony internetowej od tysięcy innych. Istnieje kilka sposobów na dodanie życia minimalistycznej stronie internetowej. Zastanów się nad zmianami nagłówków stron, ładnymi efektami najazdu na elementy strony (hover), animowanymi wykresami, animacjami tła i przewijaniem modułowym. Te i wiele innych elementów mogą sprawić, że twoja obecność w internecie stanie się o wiele przyjemniejsza dla użytkowników.

JavaScript / Angular2 / Angular4

JavaScript jest obecnie najpopularniejszym językiem programowania aplikacji internetowych. Dzięki kilkudziesięciu technologiom związanym z JS, które już istnieją i są jeszcze w fazie rozwoju, język ten tylko wzmocni swoją pozycję. Po pojawieniu się w 2016 roku Angular 2 zyskał on duże uznanie w tworzeniu stron internetowych. Jest to kompletnie nowe podejście do frameworka (środowiska programowania) AngularJS. Głównymi zaletami są ulepszona modułowość, lepsza skalowalność architektury aplikacji oraz udoskonalony Dependency Injection (DI) – to metoda tworzenia obiektów zależnych od innych obiektów. Czego można oczekiwać od Angular 2? W porównaniu ze swoim poprzednikiem jest szybszy i prostszy w konstrukcji. Ponadto jest to podejście stawiające na mobilność (mobile-first approach), które jest bardzo ważne w 2018 roku. Wiele rozwiązań jest gotowych do natychmiastowego użycia, co skraca czas programowania. Angular 2 zaleca użycie TypeScript. Ta kombinacja jest obecnie najbardziej wydajnym sposobem na tworzenie średnich i dużych aplikacji internetowych kompatybilnych z każdą nowoczesną przeglądarką czy platformą mobilną. Angular 4 pojawił się w marcu 2017 roku. Nie jest to już kompletna zmiana podejścia w stosunku do drugiej wersji, więc oba frameworki są dość podobne. Angular 4 jest szybszy i zajmuje mniej miejsca, zmniejszając rozmiar generowanego kodu do około 60%. Pakiet animacji został usunięty z jądra i umieszczony w oddzielnym pakiecie, co jest zaletą dla tych, którzy nie używają animacji w swoich projektach. Zgodnie z planowanym rozwojem możemy przewidzieć, że kolejne zmiany wpłyną również na trendy rozwoju technologii webowych w najbliższej przyszłości.

Wnioski / Conclusion

W dzisiejszych czasach posiadanie strony internetowej jest ważniejsze dla firmy niż posiadanie biura.
Przewidywanie trendów rozwoju sieci oznacza przyciąganie nowych klientów, zadowolenie obecnych i zachęcenie starszych klientów, na przykład do powrotu.
Czy właśnie tworzysz lub zmieniasz swoją witrynę? Skontaktuj się z nami, aby zrobić to profesjonalnie i zgodnie z ostatnimi trendami w tworzeniu stron internetowych.

Jak automatycznie obracać panoramę z Google Street View?

Zastanawiasz się jak automatycznie przewijąc panoramę w Google Maps? Poniższy efekt możemy uzyskać w kilka minut.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
body, html {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin:0px;
}
#panorama{
  width: 100%; 
  height: 500px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
var   pano;
var   speed = 30; 
var   latlng = new google.maps.LatLng(40.774971,-73.9666061); 
var panoOptions = {
  position: latlng,
  pov: {
    heading: 0,
    pitch: 0
  }
};
pano = new google.maps.StreetViewPanorama(document.getElementById('panorama'), panoOptions);
window.setInterval(function() {
  var pov = pano.getPov();
  pov.heading += 0.2;
  pano.setPov(pov);
}, speed);
</script>

Pełny kod: (wersja full screen)

<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Automatyczna panorma</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
body, html {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin:0px;
}
#panorama{
  width: 100%; 
  height: 100%;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
var   pano;
var   speed = 30; 
var   latlng = new google.maps.LatLng(40.774971,-73.9666061); 
var panoOptions = {
  position: latlng,
  pov: {
    heading: 0,
    pitch: 0
  }
};
pano = new google.maps.StreetViewPanorama(document.getElementById('panorama'), panoOptions);
window.setInterval(function() {
  var pov = pano.getPov();
  pov.heading += 0.2;
  pano.setPov(pov);
}, speed);
</script>
</body>
</html>

Wyjaśnienia:

latlng – dane GEO naszego punktu

speed – szybkość obracania

headin – określa kąt obrotu wokół położenia kamery (stopnie)

pitch – określa odchylenie kąta „w górę” lub „w dół” (stopnie)

Skrypt można dowolnie modyfikować i umieszczać na swojej stronie.