modern mobile web development - agh, march 2015
TRANSCRIPT
MODERN MOBILE WEB DEVELOPMENTMichał Płachta
MICHAŁ PŁACHTA
Team LeaderSchibsted Tech Polska
DLACZEGO?
DLACZEGO?
DLACZEGO?
BO NAM KAZALI
DLACZEGO?
Z PASJI
DLA PIENIĘDZY
Luca Bruno / APThe faithful gather in 2005 near St. Peter's to witness Pope John Paul II's body being carried into the Basilica for public viewing.
Sources: photoblog.nbcnews.com
Michael Sohn / APSt. Peter's Basilica at the Vatican, on March 13, 2013.
Sources: photoblog.nbcnews.com
Internet connected devices
PC/Laptop
Smartphone
Tablet
Games Console
Smart TV
Smart Watch
Smart Wristband 7%
9%
34%
37%
47%
80%
91%
Sources: globalwebindex.net, smartinsights.com
91%
5%4%
MobileMobile + TabletMobile + Tablet + PC
0
500
1000
1500
2000
2007 2008 2009 2010 2011 2012 2013 2014 2015
PCMobile
RWD VS APP
PLATFORMY
PLATFORMY
PLATFORMY
PLATFORMY
HTML5 W URZĄDZENIACH MOBILNYCH
109 milionów
2,1 miliarda
2010
2016Sources: downgraf.com
HTML5 - SEMANTYKA• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>
<header>
<aside> <nav>
<main> <article> <section> <h1> <figure> <figcaption> <img>
<footer>
<ARTICLE> & <SECTION>
<ASIDE> & <NAV><header>
<aside> <nav>
<main> <article> <section> <h1> <figure> <figcaption> <img>
<footer>
<DETAILS> & <SUMMARY>
<HEADER> & <FOOTER><header>
<aside> <nav>
<main> <article> <section> <h1> <figure> <figcaption> <img>
<footer>
<MAIN>
<main> <article> <section> <h1> <figure> <figcaption> <img>
<header>
<aside> <nav>
<footer>
<MARK>
I want to draw more here.attention
<TIME>
MEDIA QUERIES
MEDIA QUERIES - PODSTAWY
MEDIA QUERIES - WARTOŚCI
DEMOhttp://www.webdesignerwall.com/demo/media-queries/
http://mediaqueri.es
1 SEKUNDA OPÓŹNIENIA W ŁADOWANIU STRONY TO
NAWET 7% MNIEJ ZAMÓWIEŃ!
Sources: html5rocks.com
WYDAJNOŚĆ
• CSS najpierw, JS na koniec
• Kompresuj obrazki, minifikuj CSS, JS, HTML
• Ładuj tylko niezbędne dane, resztę doładuj później
• Używaj PageSpeed Insights
XMLHTTPREQUEST2
• Ustalanie formatu odpowiedzi
XMLHTTPREQUEST2
• Wysyłanie formularzy
XMLHTTPREQUEST2
• Zapytania pomiędzy domenami
lub
WEB WORKERS
• Kod JS, który wykonuje się w tle i nie obciąża okna przeglądarki
HTML5 APP CACHE
• Pozwala cachować aplikację tak, że nie potrzebuje ona dostępu do internetu żeby funkcjonować
• Generalnie nie działa, nie warto
LOCAL STORAGE
• Przechowywanie danych “klucz”: “wartość”
• Wartość może być tylko ciągiem znaków.
WEBSQL
• Lokalna baza danych SQLite
FILE API
• Odczytywanie plików z dysku użytkownika
• http://www.dropzonejs.com
DEMOhttp://www.w3.org/2010/05/video/mediaevents.html
INNE• Flashlight/Ambient light
• Proximity
• Battery status
• Contacts (development)
• Messages (development)
• Telephony (development)
• WebNFC (development)
WEB SOCKETS
• Komunikacja z serwerem w czasie rzeczywistym.
• Chaty, xmpp, soap it'd
SERVER SIDE EVENTS
• Starsze i prostsze niż web sockets.
• Komunikacja tylko w jedną stronę: serwer - klient
• Nie wymaga specjalnego protokołu, działa z użyciem HTTP
PYTANIA?
INFORMACJE DODATKOWE
• Google Page Insights
• https://developers.google.com/speed/pagespeed/insights/
• https://www.google.com/webmasters/tools/mobile-friendly/
GOOGLE PAGE INSIGHTS
