Napredne web tehnologije u mobilnom razvoju

Korisnici mobilnih uređaja preuzeli su primat nad desktop korisnicima pa je za većinu web stranica važna 'mobile first' strategija. Kada odabrati responzivni dizajn, a kada poseban mobilni site? Čemu služi i kako se koristi Google AMP i Facebook Instant articles? Kako pripremiti API za mobilnu aplikaciju? Koje su prednosti native mobilnih aplikacija i da li možemo iskoristiti znanje web tehnologija da si skratimo muke s hibridnim aplikacijama? Kako uopće pripremiti sadržaj koji će se prikazivati na različitim platformama u različitim formatima?

Ne teoretiziramo. Na sva ova pitanja imamo konkretne odgovore i primjere sa 24sata.hr, vecernji.hr i specijaliziranih portala.

Transcript

1. NAPREDNE WEB TEHNOLOGIJE NAPREDNE WEB TEHNOLOGIJE U MOBILNOM RAZVOJU U MOBILNOM RAZVOJU Styria Digital Services Styria Digital Services stjepan.zlodi@styria.hr stjepan.zlodi@styria.hr
2. STYRIA? STYRIA?
3. STYRIA MEDIA GROUP STYRIA MEDIA GROUP 1869. ONE SPIRIT, UNLIMITED IDEAS 24sata, Večernji list, Poslovni dnevnik, Njuškalo Specijalizirani portali https://www.styria.com/
4. Styrijini portali mjesečno dosegnu i do 2,15 milijuna Styrijini portali mjesečno dosegnu i do 2,15 milijuna čitatelja odnosno 81,2 posto korisnika interneta u čitatelja odnosno 81,2 posto korisnika interneta u Hrvatskoj (gemiusaudience). Hrvatskoj (gemiusaudience). Naš pogon! Naš pogon!
5. ~40 zaposlenih, razvoj web portala i aplikacija ~40 zaposlenih, razvoj web portala i aplikacija
6. ŠTO MI RADIMO? ŠTO MI RADIMO? Cora CMS - glavni proizvod Portali - fokus na medije News mobilne aplikacije Mobilne aplikacije 'po mjeri' - gamifikacija
7. U ČEMU RADIMO? U ČEMU RADIMO? Python, Django JavaScript (React Native, Vue.js, Angular, Backbone) Java, Objective-C, Swift PostgreSQL, Redis, MongoDB
8. U POČETKU BIJAŠE SAMO WEB U POČETKU BIJAŠE SAMO WEB Direktna isporuka sadržaja iz WYSIWYG html Direktna isporuka sadržaja iz WYSIWYG html editora editora
9. ČLANAK ČLANAK
10. DOŠLE SU APLIKACIJE DOŠLE SU APLIKACIJE Sadržaj direktno u web view Naknadna obrada sadržaja
11. EGZOTIKA EGZOTIKA TV preglednici Konzole Naknadna obrada sadržaja Poseban template
12. HTML PROBLEMI HTML PROBLEMI Zapečeni URL-ovi slika i ostalog sadržaja Umetnuti kod (embed code) - u tijelo članka Umetnuti kod servisa treće strane Dodatna oprema Redizajn - problem sa slikama
13. TIJEK SADRŽAJA TIJEK SADRŽAJA Direktno na stranicu Posebni obradnici za svaku platformu Svaki novi, nepoznati element je plutajuća mina
14. X-INLINE X-INLINE HTML je html Sve ostalo je x-inline tag <p>Lorem ipsum dolor sit amet consectetur...</p> <x-inline entity="gallery" id="1234"></x-inline> <x-inline entity="video" id="234"></x-inline> <p>Habitasse velit taciti vestibulum ridiculus...</p> <x-inline entity="embed" id="34"></x-inline>
15. RENDERERI RENDERERI Poseban renderer za svaku platformu Kontrola sadržaja - što ide, a što ne Nepoznati elementi se ignoriraju
16. WAGTAIL STREAMFIELD WAGTAIL STREAMFIELD https://wagtail.io https://wagtail.io
17. NOVI IZAZOVI NOVI IZAZOVI Bili smo spremni - fale samo novi rendereri Google AMP Facebook Instant Articles
18. GOOGLE AMP GOOGLE AMP JavaScript biblioteka Zaboravi html AMP tagovi - amp-img, amp-list, amp-audio, amp- twitter, amp-instagram... Btw, Google želi da se web stranice od sada rade uz pomoć AMP-a Kakve zamke skriva Google AMP?
19. FACEBOOK INSTANT ARTICLES FACEBOOK INSTANT ARTICLES Facebook mobilna aplikacija Poseban format, ali ipak ostaje html RSS feed za Facebook Problemi s validacijom i duhovima
20. NAŠA NOVA PLATFORMA NAŠA NOVA PLATFORMA Web kao JavaScript aplikacija Novi api za sve platforme Sadržaj kao JSON Rendering prepuštamo klijentu
21. PROBLEM NATIVE RAZVOJA PROBLEM NATIVE RAZVOJA Različite platforme (Android, iOS, WindowsPhone) Poseban kod za svaku platformu Nema zajedničkog koda Skuplji razvoj Prazni hod developera Store, update
22. HIBRIDNI RAZVOJ HIBRIDNI RAZVOJ Jedan kod za sve platforme (skoro) Brži razvoj Web developeri mogu iskoristiti svoje znanje (JavaScript, CSS) Ograničenja su prihvatljiva
23. JAVASCRIPT ZA HIBRIDE JAVASCRIPT ZA HIBRIDE Najčešće korišteni programski jezik ES6 - - JavaScript prevoditelj - ispravan JavaScript kod CoffeScript, Dart features Babel TypeScript
24. NODE.JS NODE.JS višeplatformsko JavaScript okruženje server-side scripting npm - upravitelj paketima Yarn i alternative
25. PWA PWA Progressive Web Apps Obična JavaScript web aplikacija Manifest Offline Notifikacije LocalStorage
26. PWA U PRAKSI PWA U PRAKSI Instalacija? Update kad poželiš Problem s notifikacijama (iOS) PWA Directory
27. IONIC IONIC 2013 - AngularJS i Apache Cordova HTML, CSS, Sass Sporija aplikacija, kompleksna navigacija ionicframework.com/
28. IONIC U PRAKSI IONIC U PRAKSI Razvoj u pregledniku (osim za native funkcionalnosti) Bolja Android, slabija iOS podrška Posebni stilovi za svaku platformu Prilagođavanje pluginova Bugovi se teže hvataju Duhovi - build
29. REACTNATIVE REACTNATIVE by Facebook JavaScript i JSX (JavaScript-XML) Prava native aplikacija - prevođenje Native komponente svake platforme Moguće korištenje native koda UI fokus Facebook licenca? React Native
30. REACTNATIVE U PRAKSI REACTNATIVE U PRAKSI Hot reloading - ubrzava razvoj Brže izvođenje nego ionic Gotove komponente ubrzavaju razvoj Navigacija nije kao native Nedostaju neki moduli - potreban razvoj vlastitih Strma krivulja učenja
31. NATIVESCRIPT NATIVESCRIPT Angular, Vue.js, TypeScript, JavaScript Prava native aplikacija Izvorni kod se izvršava na uređaju bez prevođenja Direktni pristup na native API nativescript.org
32. NATIVESCRIPT U PRAKSI NATIVESCRIPT U PRAKSI Stiliziranje komponenti nije baš jednotavno Posebne UI dorade za svaku platformu Mali broj komponenti, ali njihov broj raste NativeScript CLI Hot reload
33. FLUTTER FLUTTER Google mobile app SDK Dart programski jezik Vlastiti widgeti Hot reload Isti kod za sve platforme Mali broj komponenti, nova platforma
34. KOTLIN I SWIFT KOTLIN I SWIFT Jednostavniji programski jezici Python like Manje koda Jednostavniji UI
35. Q&A Q&A styria.digital@styria.hr styria.com https://www.linkedin.com/company/styria- digital-hrvatska/