Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular Connect

2,155 views

Published on

Slides from our talk on Ionic and Progressive Web Apps at Angular Connect

Published in: Technology
  • Be the first to comment

Angular Connect

  1. 1. Ionic & Progressive Web Apps Brandy Carney Core Framework Developer,Ionic Adam Bradley Framework Lead,Ionic
  2. 2. Who are we? Brandy Carney Core Dev @ Ionic brandyscarney brandyscarney Adam Bradley Team Lead @ Ionic adamdbradley adamdbradley
  3. 3. A Progressive… what?
  4. 4. A Progressive Web App is… Amobilewebappthat feels like a native app.
  5. 5. Why does this matter?
  6. 6. UX Adoption Performance Offline capabilities http://bit.ly/waPWA
  7. 7. What’s required? I’m listening…
  8. 8. Progressive works for every user App-like looks and feels native Connectivity Independent offline support Discoverable easily found through search Linkable access via URL Installable save to home screen Re-engageable push notification support http://bit.ly/waPWA
  9. 9. Beautiful UI Built on Angular Wonderful community Built on web+browser standards Collaboration from designers+developers http://github.com/driftyco/ionic
  10. 10. Performance obsessed.
  11. 11. Native Scrolling Hardware Accelerated Animations Smooth Transitions Optimized for Touch Events Ahead of Time Compiling (AoT)
  12. 12. Creating an ionic app $ npm install -g ionic $ ionic start myApp --v2 $ ionic serve
  13. 13. Remember those requirements?
  14. 14. { “name": "Ionic Sample App", "start_url": "index.html", "display": "standalone", "icons": [{ "src": "img/appicon.png", "sizes": "512x512", "type": "image/png" }], "background_color": "#387ef5", "theme_color": "#387ef5" } Web app manifest http://bit.ly/maniMDN
  15. 15. Service Workers Caches data & files Send push notifications Intercept network requests Run by browser in the background serviceworke.rs
  16. 16. Code once. Run everywhere.
  17. 17. How does this benefit you?
  18. 18. Offline capable Quicker load times Native UX on the web Cordova+App Stores not required * Ionic apps ARE Progressive Web Apps *
  19. 19. Important links Demo code https://github.com/driftyco/ionic-pwa-demos/tree/master/contacts Example PWAs using ionic pwa.ionic.io
  20. 20. …oh, btw
  21. 21. Thank you! Brandy Carney Core Framework Developer,Ionic Adam Bradley Framework Lead,Ionic

×