$30 off During Our Annual Pro Sale. View Details »

Progressive Web Applications

Progressive Web Applications

Aleš Roubíček
PRO

April 27, 2019
Tweet

More Decks by Aleš Roubíček

Other Decks in Technology

Transcript

  1. PROGRESSIVE
    WEB
    APPLICATIONS
    @alesroubicek
    #devfestpce

    View Slide

  2. View Slide

  3. View Slide

  4. Progressive Web Applications
    • Framework s best practices pro webové aplikace
    • Aplikace pro web, mobily i desktop
    • Rapidní vývoj a deployment
    • Ideální na prototypy a interní aplikace
    • Možnost nasazení do Play Store a Microsoft Store

    View Slide

  5. Progressive Web Applications
    • Spolehlivé - Načítají se okamžitě a nikdy
    nezobrazují downasaura, ani v polních podmínkách
    nekvalitních sítí.
    • Rychlé - Odpovídají rychle na uživatelské interakce
    s plynulými animacemi a bez sekajícího se scrollu.
    • Zábavné - Chovají se jako nativní aplikace na
    daném zařízení, s plnohodnotným uživatelským
    prožitkem.

    View Slide

  6. Workbox
    • Nástroj, který zjednodušuje práci se ServiceWorkers
    • Zajišťuje Pre-caching a Runtime caching → Offline
    • Různé strategie jak k datům přistupovat
    • Request routing
    • Background sync
    • Usnadňuje debuggování
    • Flexibilní konfigurace a modularita

    View Slide

  7. Material Design Components
    • Solidní implementace komponent podle Material Design
    Guidelines
    • Nezávislé na frameworcích a adpatéry pro nejpopulárnější
    • Podpora témat a obecně velká přizpůsobitelnost
    • Vyřešená přístupnost
    • Nativní look&feel na Androidu a Chrome OS
    • Jenda z nejlepších implemantací Gridu ve frameworcích

    View Slide

  8. Lighthouse
    • Nástroj pro auditování webů
    • Performance
    • Accessibility
    • PWA
    • Best practices
    • Používejte v Chrome DevTools a ve vašich CI pipeline

    View Slide

  9. Links
    • https://developers.google.com/web/progressive-web-apps/
    • https://developers.google.com/web/tools/workbox/
    • https://developers.google.com/web/tools/lighthouse/
    • https://material.io/develop/web/
    • http://jankfree.org/
    • https://developers.google.com/web/fundamentals/
    performance/

    View Slide