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.

Ionic 2: Mobile apps with the Web

717 views

Published on

Slides for the Twitter-Dev event in Boston, MA

Published in: Technology
  • Login to see the comments

Ionic 2: Mobile apps with the Web

  1. 1. MOBILE APPS WITH THE WEB Mike Hartington | @mhartington
  2. 2. BEFORE WE JUMP INTO THINGS...
  3. 3. IONIC V1! SDK for Developing Hybrid Apps Focused on mobile apps first Sass for easy customization Angular for code structure
  4. 4. EMPOWERED DEVELOPERS EVERYWHERE Web Developers could now participate in making apps!
  5. 5. THE STATS 34th most popular OSS project (24,000+ stars on GitHub) Meetup Groups around the world Ionic apps top app store charts Used everywhere from Fortune 50 co’s to YC/TechStars companies
  6. 6. WAIT, THIS WHOLE "WEB THING" AGAIN?
  7. 7. WE TRIED THIS BEFORE AND WERE NOT IMPRESSED
  8. 8. JS => NATIVE FALL BACK TO NATIVE
  9. 9. BUT THE WEB HAS GOTTEN A LOT BETTER
  10. 10. IONIC 2 Pushing whats possible with the web
  11. 11. V2 GOALS Simplicity Navigation Tooling Make NG2 Easy
  12. 12. SIMPLICITY Make it easy to understand HTML
  13. 13. CLASSES <a class="button button-positive"></a> <button type="button" class="btn btn-default"></button> <a class="small expanded button" href="#"></a>
  14. 14. <div class="btn-group" role="group" aria-label="..."> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <div class="btn-group" role="group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Dropdown link</a></li> <li><a href="#">Dropdown link</a></li> </ul> </div> </div>
  15. 15. CSS CLASSES CAN GET COMPLEX AND CLUTTERED
  16. 16. JUST USE RAW ELEMENTS Easier to understand and less clutter
  17. 17. THE STYLES DON'T CHANGE <ion-list> <ion-list-header> Action </ion-list-header> <ion-item>Terminator II</ion-item> <ion-item>The Empire Strikes Back</ion-item> <ion-item>Blade Runner</ion-item> </ion-list> but the markup becomes much clearer
  18. 18. EQUALLY EASY TO STYLE AND EXTEND ion-avatar{ border-radius: 30px; } ion-card{ width: 80%; }
  19. 19. NAVIGATION More robust and powerful
  20. 20. I NEED TO OPEN A MODAL, THEN NAVIGATE TO A SUBVIEW I WANT TO CREATE A SUBVIEW IN A SIDEMENU
  21. 21. V1'S ROUTING .config(function($stateProvider){ $stateProvider .state('firstpage', { url:'/firstpage', templateUrl: 'firstpage.html' }) .state('secondpage', { url:'/secondpage', templateUrl: 'secondpage.html' }) .state('thirdpage', { url:'/thirdpage/:id', templateUrl: 'thirdpage.html' }); }); UI-Router
  22. 22. DOESN'T GIVE THE FLEXIBILITY YOU WANT Navigation: user experience URLs don't offer that Developers NEED to be in control
  23. 23. PUSH/POP/PARAMS import SecondPage from '../secondpage'; export class FirstPage { constructor( public nav: NavController) {}; pushState() { this.nav.push(SecondPage) }; };
  24. 24. FULL CONTROL Push pages on to the nav stack Pop pages off the nav stack Insert/Remove/Update Create app history from nothing Update the URL as an option
  25. 25. TOOLING FOR EVERYONE Building apps with new standards
  26. 26. JAVASCRIPT HAS CHANGED ES6 brings many new features Typescript builds on top of that Tooling that IDEs can hook into All of this, helping you to developer faster
  27. 27. ES6 Modular: Import what you need & and gets rid of globals Scoping: let defines a block-scoped variable Promises: Built into the language natively Classes: Simpler syntax for building objects
  28. 28. TYPESCRIPT ES6 + Decorators + Types Ionic 2 and NG2 built using TS Optional Types for stricter coding Code completion in your editor
  29. 29. ALL THESE NEW FEATURES.... BUT HOW DO I START?
  30. 30. DON'T WORRY, IONIC'S GOT YOUR BACK!
  31. 31. Ionic provides a TypeScript setup You can just focus on writing your app A build system handles everything else! It "just works"™
  32. 32. SETUP $ NPM INSTALL -G IONIC@BETA $ IONIC START MYAPP --V2 $ CD MYAPP $ IONIC SERVE
  33. 33. FINAL MESSAGE Ionic 2 is really pushing what we can do with the web The future is looking great for web and web technologies Always bet on the web
  34. 34. THANK YOU! </HTML> SAMPLE APP IONIC.IO/2 @mhartington

×