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 framework one day training

Most of the major internet companies have now declared themselves to be mobile first. Smartphones have become ubiquitous throughout the development world. But mobile development is fraught with challenges. There are more Android devices than iOS, but iOS users tend to spend more money. If you build your app for one, it is a complete re-write for the other. You may have heard of Cordova/PhoneGap, but the apps tend to be somewhat clunky looking.

Enter the Ionic Framework, a cross platform framework which combines PhoneGap with AngularJS and super fast CSS3 to make apps which perform at near native levels.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Ionic framework one day training

  1. 1. Ionic Framework
 One Day Training 17 January 2015 - Irvine, CA Troy Miles
  2. 2. Agenda JavaScript AngularJS PhoneGap/Cordova Plugins The Ionic Framework Debugging ui router YP.com Google Maps Making Coffee!
  3. 3. Your clients Want good looking, well performing mobile apps They normally don’t care how you create them It is usually your choice of tools to use to give the clients the results they want
  4. 4. JavaScript
  5. 5. Quick History of JavaScript Initial version built in 10 days by Brendan Eich Original name was LiveScript Greatly influenced by a language called Scheme Changed to please Sun Microsystems Converted into a curly brace language Renamed JavaScript
  6. 6. Why JavaScript Sucks? Its use of global variables It has strange scoping rules It thinks it is smarter than you
  7. 7. Why writing good JS is hard? Most programmers don’t bother to learn it It is changed not embraced The page load has protected you
  8. 8. Why JS is beautiful? It is a functional language, close to Lisp and Scheme than Java or C First class functions Dynamic objects Loose typing and more…
  9. 9. Keywords JavaScript has surprisingly few keywords break, case, catch, continue, debugger, default, delete, do, else, finally, for, function, if, in, instance, new return, switch, this, throw, try, typeof, var, while, with
  10. 10. Keywords not used class, enum, export, extends, import, super, implements, interface, let, package, private, protected, public, static, yield
  11. 11. Using keywords in variables Can’t be used as variables or parameters But can be used as properties Legal uses: a.import = “test”; a[“import”] = “test”; a = {import: “test”};
  12. 12. Why the weirdness? When the Internet was young, pages were badly coded Both the DOM and JS interpreter tried to correct bad code The results were less than stellar
  13. 13. Coercion Attempts to force two variables to be the same type Unfortunately the results are illogical Always use === and !== Never use == or !=
  14. 14. Hoisting JavaScript is function scoped Variables have a two step creation process: declaration and assignment variables are always declared at the beginning of a function
  15. 15. Function Power! Functions are first class objects Functions can be treated like any other object They can make you code dynamic
  16. 16. Anonymous function Functions don’t need to have a name Can help minimize global space pollution ex. function() {
 /* code goes here */
 }
  17. 17. Immediate functions Functions are normally executed only when called It is possible to create a function executes itself ex. function superFunction(){
 /* code goes here */
 }();

  18. 18. Immediately Invoked Function Expression (IIFE) Has no name Immediately executed Used to create a namespaces Use in many JS libraries
  19. 19. IIFE (continued) (function() {
 /* Nothing inside of the function can be seen on
 on the outside, unless we want it to */
 }());
  20. 20. Object Literals A pair of curly braces surrounding name/value pairs Can appear anywhere an expression can The property’s name can be ANY string Quotes only need when the name is not a legal variable name
  21. 21. Object Literals var empty = {}; var name = {
 “first-name”: “Alan”,
 “last-name”: “Turing”
 };
  22. 22. Arrays vs. Objects Arrays are not true arrays Sort of a special kind of object literal Both can mix types Not the same Arrays inherit from Array.prototype Objects inherit from Object.prototype
  23. 23. More on objects JavaScript objects are always dynamic New properties can always be assigned There is no class in JavaScript
  24. 24. Closure defined In computer science, a closure is a function or reference to a function together with a referencing environment—a table storing a reference to each of the non-local variables (also called free variables) of that function.[1] —Wikipedia
  25. 25. A bit more comprehensible When an inner function has a longer lifetime than its outer function and retains access to the context in which it was created
  26. 26. Strict Mode Functional “strict mode” used heavily Eliminates many JavaScript silent errors Fixes some JavaScript mistakes https://developer.mozilla.org/en-US/docs/Web/ JavaScript/Reference/Strict_mode
  27. 27. AngularJS
  28. 28. AngularJS Created by Miško Hevery and Adam Abrons in 2009 JavaScript MVC 106 kb production version (minimized, not gzipped) Declarative programming for UI Imperative programming for business logic
  29. 29. AngularJS Key Features Model View Controller (MVC) Data Binding HTML Templates Dependency Injection Deep Linking Directives
  30. 30. AngularJS <!DOCTYPE html>
 <html ng-app="moduleName">
 <head lang="en">
 <meta charset="UTF-8">
 <title>NG-Skeleton</title>
 </head>
 <body>
 <div ng-controller="aController">
 </div>
 <div ng-controller="anotherController">
 </div>
 
 <!-- if using jQuery it goes here -->
 <script src="../libs/angular.min.js"></script>
 <!-- other libs and script files -->
 </body>
 </html>

  31. 31. ng-app Declares the boundary of an Angular app The first ng-app found will be auto-bootstrapped ng-app can optionally name a module Can encompass the entire page <html ng-app> Or only part of it, <div ng-app>
  32. 32. What the Browser Does? Loads the HTML Parses it into a Document Object Model or DOM The angular.js script is loaded and parse Angular waits for the DOMContentLoaded event AngularJS’ bootstrap code executed
  33. 33. DOMContentLoaded vs load event The load event fires once everything has loaded The DOMContentLoaded event fires once the DOM has been created DOMContentLoaded doesn’t wait for CSS, images, or iFrames to load DOMContentLoaded fires well before load
  34. 34. AngularJS’ Bootstrap Bootstrap looks for the ng-app directive There can only be one of these The module specification is optional The module specification tells the $injector service which defined module to load
  35. 35. Model View Controller Uses MVC or MVVM or MV* depends on who you ask The goal is clear separation of concerns The model is only concerned with data The view presents the data to the user The controller applies the business logic
  36. 36. Data Binding In Angular, binding is built into the framework Replaces text content of HTML element with the value of the expression {{ expression }} <ANY ng-bind=“expression”>…</ANY> <ANY class=“ng-bind: expression;”>…</ANY>
  37. 37. HTML Templates Many JavaScript MVC Frameworks use a client-side templating engine AngularJS doesn’t Angular uses HTML as its templating engine No extra markup, no extra libraries
  38. 38. Dependency Injection A software design pattern that implements inversion of control and allows a program design to follow the dependency inversion principle Allows a dependency to be passed to an object Allows code to clearly state dependencies Leads to code which is easier to debug and test Makes it possible to minimize apps without breaking them
  39. 39. Dependency Injection The DI pattern in AngularJS looks funky due to JavaScript’s shortcomings The pattern is name of module, dot, name of provider, name of object, an array with the list of dependencies in strings and a function as the last item in the array tempApp.controller('CurrentCtrl', ['$scope', function ($scope) {
 $scope.temp = 17;
 }]);
  40. 40. Deep Linking Deep Linking enables a website to restore state from a URL URL and bookmarks are key part of the web Early Single Page Apps lacked deep linking They broke SEO and user expectation
  41. 41. Directives “The coolest feature of AngularJS” - Misko Hervey Attach behavior to DOM elements Can nearly turn HTML into a DSL
  42. 42. Plain Old JavaScript Objects Angular uses dirty checking to keep the model and view in sync Dirty checking runs equality checks over the data the view depends, it is a brute force method Watch expressions are run every time data could change Watch expression should be fast and idempotent
  43. 43. The methods on the $scope $watch() $apply() $digest()
  44. 44. $watch() Watches for model mutations $watch(watched expression/function, handler, …) Watch expression must be fast and idempotent
  45. 45. $apply() Called when you are transitioning from non-angular world into angular world calls $digest
  46. 46. $digest() A digest is just plain old dirty checking It works on all browsers and is totally predictable
  47. 47. Digest Loop Possibility of an endless loop Will only go 10 deep before exception is thrown NOT like a game loop
  48. 48. Module A collection of configuration and run blocks which get applied to the app during bootstrap Most apps will have one module Most 3rd party libraries will come with their own You inject dependent modules into yours
  49. 49. Configuration Blocks Get executed during the provider registration and configuration phase Only providers and constants can be injected into configuration blocks Shortcut methods available for some common configuration blocks
  50. 50. Configuration Shortcuts value(‘constantName’, 123) factory(‘factoryName’, function(){return 123;}) directive(‘directiveName’, …) filter(‘filterName’, …)
  51. 51. Run Blocks Closest thing Angular has to a main method Executed after services have been configured Typically contains code which is hard to unit test
  52. 52. Order of Execution Configuration blocks Run blocks Directive compile functions Controllers Directive link functions
  53. 53. $timeout guaranteed to fire after current digest loop If you use a setTimeOut, you will also need to do $apply $timeout does this for you
  54. 54. PhoneGap/Cordova
  55. 55. The Brief History of Cordova 2009: 1st developed at an iPhoneDevCamp event 2009: Developers form a company, Nitobi 2011: Adobe acquires Nitobi 2011: Adobe open sources PhoneGap project to Apache 2012: Apache gives the project the name Cordova
  56. 56. What Cordova isn’t? A website packaged in an app A converter which turns JavaScript into native code
  57. 57. How Cordova differs from PhoneGap? Cordova is an open source product It serves as the base platform for quite a few commercial implementations One of those is Adobe’s PhoneGap Others are IBM Worklight, Motorola Solutions RhoMobile Suite, Intel XDK, plus more.
  58. 58. Cordova CLI Command Line Interface Two types of commands, global & project
  59. 59. Global Commands create - creates a project help - display help text or help for a specific command
  60. 60. Project Commands info platform plugin prepare compile run serve build emulate
  61. 61. Directory structure config.xml - global configuration file hooks - scripts used to customize Cordova commands platforms - native application projects plugins - added plugins go here www - your app’s code (merges) - platform specific overrides
  62. 62. Hello Cordova World steps 1. cordova create helloapp com.rnc.helloapp 2. cd helloapp 3. cordova platform add android 4. cordova build android 5. cordova run android or cordova serve
  63. 63. Plugins As of version 3.0 Cordova is implemented mainly as a collection of plugins surrounding a small core Plugins are implemented in native code and/or JavaScript Without plugins your application can’t communicate with the device’s hardware Over 600 plugins currently available
  64. 64. Installing/Removing Plugins Find plugins at: http://plugins.cordova.io/ cordova plugin add org.apache.cordova.device cordova plugin remove org.apache.cordova.device Two essential plugins are device & console Plugins not available until after deviceready event
  65. 65. Plugin Anatomy Documentation: doc/index.md Native code in src directory JavaScript in www directory
  66. 66. Using a Plugin Remember: You must wait for the deviceready event Read the plugin’s documentation Implement the functionality according to docs Best practice: Sniff for the property before use
  67. 67. Debugging First Look Two browsers have built-in remote debugging For Android, Chrome is your best friend menu -> More tools -> Inspect Devices For iOS, Safari is your best friend Preferences -> Advanced -> Show develop For both the device must be connected via USB
  68. 68. Adding Libraries Most popular open source libraries will also work in a Cordova app Add the library with the script tag, same as always: <script src=“js/jquery.min.js”></script> For performance sake, place the minimized library in the www directory, don’t load from web
  69. 69. Simple Ajax Functionality Cordova apps not bound by HTML same origin policy But accessible websites must be included on the whitelist By default access is allowed to all sites, but not recommended for production
  70. 70. Housekeeping At some point in the app lifecycle, you may wish to update Cordova or one of the plugins Update Cordova: sudo npm update -g cordova Update a plugin: remove it and add it back BE CAREFUL - Newer versions may break your app
  71. 71. Problems with raw Cordova No user interface No support for HTML templates No application framework
  72. 72. The Ionic Framework
  73. 73. The Ionic Framework? Combines Apache Cordova with Google's AngularJS along with lots custom JavaScript, HTML, and CSS3 to create purpose built mobile apps which perform like native ones and look beautiful
  74. 74. Supported Devices iOS 6+ Android 4+ Windows Phone 8+ (coming) FireFox OS (coming)
  75. 75. Drifty Co. Founded in 2012 by Ben Sperry (CEO) and Max Lynch (CTO) Based in Madison, WI Creators of Codiqa, JetStrap, and Ionic Raised $1 million from Arthur Ventures earlier this year
  76. 76. Are people actually using it?
  77. 77. Mallzee Replaced their hand built PhoneGap app with Ionic in May Excellent UI
  78. 78. Songhop The fastest way to find new music 5 star rated iPhone only
  79. 79. Keychain Like Uber for trucks iOS and Android version Scrapped prior version built with PhoneGap
  80. 80. Sworkit Created by Ryan Hanna alone Featured in the Health and Fitness section of the App Store Downloaded over 3 million times in the App Store, Google Play and Amazon Store
  81. 81. Modern Web Skills HTML 5 / CSS 3 / JavaScript Comfortable with command line tools AngularJS Sass (optional)
  82. 82. Prerequisites Java SDK 6 or 7 Android SDK + Eclipse/Android Studio Node / NPM Cordova Gulp Ionic
  83. 83. Why do I need Node? Node apps are built in JavaScript JavaScript runs on all platforms Node comes bundled with NPM, Node Package Manager It makes installing, running, and updating tools easy Hence Node is a popular way to ship tools
  84. 84. Is there an easier way?
  85. 85. The Ionic Box Install VirtualBox, its free and available for most platforms Install Vagrant, its free too Install the Ionic Box See blog post for complete instructions:
 http://therockncoder.blogspot.com/2014/10/getting- started-building-mobile-apps.html
  86. 86. Ionic and Cordova Ionic is built on top of Cordova It also wraps many of its commands Commands like build, platform, plugin all directly call Cordova It also adds its own like serve, which makes it easier to run apps in browser
  87. 87. Create ionic app ionic start myApp <template> blank tabs sideMenu
  88. 88. Ionicons http://ionicons.com/ Can search from website Can easily change size free & open source
  89. 89. ngCordova Cordova has a lot of available plugins Plugins give access to the machine functions ngCordova "Angularizes" plugins for ready use You are always free to write your own wrapper code
  90. 90. What about tablets? Ionic supports responsive design Ionic’s grid with CSS Flexbox support Side menu can be set auto open on wide displays
  91. 91. Workflow ionic serve Google Chrome mobile emulator iOS Simulator / Android Emulator / Genymotion iOS / Android device
  92. 92. Crosswalk for Android Versions of Android before 4.4 use Android’s no named default browser which is slower and less compliant than Chrome It also means you can’t be exactly sure how your Cordova app will perform on these phones Crosswalk allows you to specify a version of Chrome to run in your Android Cordova app
  93. 93. Crosswalk You can see up to a 10x increase in HTML/CSS rendering and JavaScript performance Your app will grow 10-15 MB in size
  94. 94. Ways to break up an app By file type Files are placed into directories by their type: js, html, etc. May be subdivided further: controllers, directives, etc By feature The files which make up a feature are placed into the same directories

  95. 95. Coffee! An ajax app which uses a third party services from YP.com for data and Google Maps for maps For those who have taken other classes from me, this app is simply too cool to die
  96. 96. Steps to make coffee Make a side menu template app Modify menu markup Modify routes Add listings service Add lists
  97. 97. Steps… Add detail page Add map page Add Google Maps Add markers to map Make markers clickable
  98. 98. Resources http://learn.ionicframework.com/ http://ionicframework.com/ https://angularjs.org/ http://www.appiconsizes.com/ http://therockncoder.blogspot.com/ https://twitter.com/therockncoder
  99. 99. Summary Cordova is a platform which allows for the building of mobile apps using web technologies Ionic builds on top of that by providing a good looking performance driven UI and better developer tools Ionic uses AngularJS as its JavaScript MVC framework

    Be the first to comment

    Login to see the comments

  • JacobPrestonMiller

    Jul. 11, 2015
  • sky_wu

    Jul. 25, 2015
  • slamgundam

    Aug. 2, 2015
  • ChiChiuTSANG

    Aug. 3, 2015
  • wieliong

    Aug. 6, 2015
  • jgabriellima

    Oct. 17, 2015
  • kalyan120

    Oct. 27, 2015
  • KavaskarNadarajah1

    Oct. 28, 2015
  • WanMuzaffar

    Oct. 29, 2015
  • phyo936

    Dec. 26, 2015
  • GeneGuy

    Jan. 6, 2016
  • MelodyMahinay

    Feb. 16, 2016
  • PatrickSu

    Apr. 27, 2016
  • agusk2007

    Jun. 17, 2016
  • KhaireddineHamdi

    Aug. 19, 2016
  • YogeshMahajan3

    Sep. 26, 2016
  • MitchelMeaArjona

    Sep. 27, 2016
  • CharlesMuzonzini1

    Nov. 3, 2016
  • sokphearin

    Nov. 10, 2016
  • NicholasTai2

    May. 17, 2020

Most of the major internet companies have now declared themselves to be mobile first. Smartphones have become ubiquitous throughout the development world. But mobile development is fraught with challenges. There are more Android devices than iOS, but iOS users tend to spend more money. If you build your app for one, it is a complete re-write for the other. You may have heard of Cordova/PhoneGap, but the apps tend to be somewhat clunky looking. Enter the Ionic Framework, a cross platform framework which combines PhoneGap with AngularJS and super fast CSS3 to make apps which perform at near native levels.

Views

Total views

7,939

On Slideshare

0

From embeds

0

Number of embeds

2,412

Actions

Downloads

499

Shares

0

Comments

0

Likes

33

×