Mobile Dev For Web Devs
Mobile application development does not need to be difficult for us Web Developers. No longer do we need to learn a whole slew of new programming languages to create a mobile application. We can use our existing skills and create mobile applications with Html, JavaScript, and CSS. Then deploy to Android and iOS devices using a single code base that looks, feels, and performs like a native mobile application. Apache Cordova enables the packaging of our web code into the mobile application that we will deploy to the App Stores but it does not include a UI framework. For the UI framework, we will be using Ionic framework. The Ionic framework takes the worry out of making the UI look, feel and perform correctly on the slew different Apple and Android devices that your users will have. It allows you to focus on your business logic and not the underlying infrastructure. Your time to market will be greatly reduced. In addition to the free, open-sourced framework, Ionic also has a slew of highly useful cloud based tools that you can pay for it you need them such as Push Notifications, User Authentication, Native Builds, and Live Updates. Push Notifications allows targeted pushes and custom scheduling to improve push notification engagements. User Authentication provides a single authentication solution with email & password authentication, as well as third-party providers like Facebook, Twitter, Google and more. Native Builds turns your code into the native app binaries for the Apple and Android with a single command. Finally, Live Updates gives you the ability to push updates and UI changes to your user immediately without going through the app stores. In this talk we will dive into what it takes to get started, look at the features of the Ionic framework and finish off by creating a sample application with the Ionic framework. You will walk away from this talk with all of the tools that you need to deliver your first mobile application
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Mobile Dev For Web Devs
Similar to Mobile Dev For Web Devs (20)
More from Justin James
More from Justin James (8)
Recently uploaded
Recently uploaded (20)
Mobile Dev For Web Devs
- 1. http://digitaldrummerj.me Justin James DevOps Evangelist Web Developer Microsoft MVP
- 2. http://digitaldrummerj.me Faster than the PC boom10X Faster than the Internet boom2X Faster than the social networking explosion3X 2
- 3. http://digitaldrummerj.me I wanted to build a mobile app too! 3
- 5. http://digitaldrummerj.me Traditional Development Strategy Native platform technologies Objective-C / Swift Java / Kotlin 5
- 6. http://digitaldrummerj.me So What’s The Issue? 6
- 7. http://digitaldrummerj.me Same App Different Tools IOS Obj-C/Swift XCODE $$$ Android Java/Kotlin A-Studio $$$ Web JavaScript ANY $ OSX Swift XCODE $$$$ Windows Universal .NET Visual Studio $$$ 7
- 11. 11
- 12. http://digitaldrummerj.me Hybrid Development Strategy Web platform technologies HTML 5 CSS 3 JavaScript 12 Mobile Traditional Web Apps Desktop Apps IOT Server Side TV Apps Proprietary Devices (Console Games, Airline Entertainment)
- 13. http://digitaldrummerj.me Can You Spot The Web App? Untapped UBER Sworkit SLACK VS Code 13
- 14. http://digitaldrummerj.me All Those Apps Where Built With Web Technologies 14
- 15. http://digitaldrummerj.me Same App Different Experience 15
- 16. http://digitaldrummerj.me Typical Use Case Mobile IOS Android Web Desktop Web Mobile Web PWA Desktop Windows OSX Linux 16
- 18. http://digitaldrummerj.me Things We Want To Achieve Code once with web technologies Code runs same way across mobile platforms Access to hardware feature like bluetooth, GPS, accelerometer, etc Access hardware features same way with the same code 18
- 19. http://digitaldrummerj.me Every Modern Device Can Run Web Technologies 19
- 21. http://digitaldrummerj.me How to Do Cross Platform Development? 21
- 23. http://digitaldrummerj.me Middleware to Bundle Web Code into Mobile Application with Access to Native Device Apache Cordova 23
- 25. http://digitaldrummerj.me 25 Cordova Installation • http://nodejs.org Node LTS • npm install –g cordova Global NPM Packages
- 26. http://digitaldrummerj.me 26 Android Setup Windows, Linux, and OSX Java SDK 8 Android SDK Gradle Google Chrome Google Android Emulator Google Developers Account
- 27. http://digitaldrummerj.me 27 iOS Setup OSX Only (thanks Apple) Xcode Xcode Command Line Tools iOS Simulator Safari Apple Developers Accounts
- 29. http://digitaldrummerj.me Mobile Problem Solved? Well Not Really 29
- 30. http://digitaldrummerj.me Mobile Platforms Have Different Behaviours They Have Different UI SDK Libraries User Experience Is Different Across Mobile Devices Some Devices Have Back Buttons Don’t Forget The Tablets How To Reuse At This Level? 30
- 31. http://digitaldrummerj.me Cordova AppNative App The Issue Visualised Cordova WebView HTML CODE Animations Tabs Buttons WebView Gestures 31
- 32. http://digitaldrummerj.me Can We Achieve A Uniform Mobile Experience? 32
- 34. http://digitaldrummerj.me What Is Ionic? Missing Cordova UI Framework (i.e. Mobile Web SDK) Supports Android, IOS & Windows Universal Open Source Built With Web Technologies Performance Obsessed Zero Code Redundancy 34
- 37. http://digitaldrummerj.me Adjust According To Platform Icon Library Customizable and Configurable Awesome Cross Platform Components 37
- 38. http://digitaldrummerj.me Popups Modals Spinners Slidebox Menus Lists Footers Buttons Tabs Cards Headers Forms Ionic Components 38
- 39. http://digitaldrummerj.me Scaffolds And Serves App SASS Pre Processing Typescript Transpiling Error Reporting Code Bundling and AOT/Tree Shaking Great CLI Tool 39
- 40. http://digitaldrummerj.me Other Features Right To Left Support Internationalization Ionic Native 40
- 41. http://digitaldrummerj.me Who Is Using Ionic? 41
- 42. http://digitaldrummerj.me 42 Over 4 Million Apps Generated 110+ Countries with Communities 13,000 Slack Members 30,000 Start On Github Companies Include Microsoft, Airbus, Diesel, Dow Jones, ETC Apps Include Untapped, Sworkit & Microsoft Flow. Ionic Usage
- 43. http://digitaldrummerj.me 43 Ionic Installation • http://nodejs.org Node LTS • npm install –g ionic Global NPM Packages
- 44. http://digitaldrummerj.me 44 Ionic App Creation • ionic start [App Name] [blank/tabs/sideMenu] Create New Project • ionic serve or ionic lab Test In Web Browser • ionic platform add [android/ios] Add Mobile Platform • ionic [run/emulate] [android/ios] Test On Device / Emulator
- 46. http://digitaldrummerj.me Mobile Problem Solved Now Mobile IOS Android Web Desktop Web Mobile Web PWA Desktop Windows OSX Linux 46
- 48. http://digitaldrummerj.me Consider Different Screen Sizes Consider Different Input Devices Don’t Forget About Accessibility Its All About Adapting To Screen Size
- 51. http://digitaldrummerj.me Web Problem Solved? Not Really What About PWA?
- 52. http://digitaldrummerj.me What Is A PWA? PWA = Progressive Web App A Web Application That Works Offline Can Be Installed On A Mobile Phone Runs Full Screen With Icon & Splash Screen Works Thanks To Manifest.JSON & Service Worker
- 53. http://digitaldrummerj.me We Have Ludicrous Mode in a Car We Have Invented AI We Have Reusable Rockets Yet Dinosaur Game, Is Best Offline Experience State Of Offline In 2017
- 54. http://digitaldrummerj.me Proxy Network Requests Cache Unlimited Data On Device Solves The LiFi Problem More About Service Worker
- 56. http://digitaldrummerj.me Web Problem Solved Now Mobile IOS Android Web Desktop Web Mobile Web PWA Desktop Windows OSX Linux 56
- 57. http://digitaldrummerj.me Lets Solve Desktop Now 57
- 58. http://digitaldrummerj.me About Desktop Apps Lot In Common With Web Apps In Terms Of User Experience Some Few Noticeable Differences From Web Apps Offline Is A Must OSX, Windows & Linux All Have Different UI Skins How Do You Ensure Reuse Between Each Desktop Platform
- 60. http://digitaldrummerj.me About Electron Cordova For Desktop Open Source Use Web Technologies To Code Apps OSX, Linux & Windows Support
- 61. http://digitaldrummerj.me Some Electron Apps You Use Today
- 63. http://digitaldrummerj.me Web Problem Solved Now Mobile IOS Android Web Desktop Web Mobile Web PWA Desktop Windows OSX Linux 63
- 64. http://digitaldrummerj.me Other Things To Be Aware Of 64
- 65. http://digitaldrummerj.me Compiler For Generating Native Web Components Will Power Ionic 4.0 No More Framework Needed Available For Play Today https://github.com/ionic-team/stencil Stencil JS 65
- 66. http://digitaldrummerj.me Deploy – Update Apps Without AppStore Package - Cloud Builds Error Reporting Drag & Drop Prototyping https://ionicframework.com/products Ionic Pro - Tools By Ionic For Ionic 66
- 70. http://digitaldrummerj.me If you can make a great web page you can make a great app! 70
Editor's Notes
- ionic conference app demo ionic serve vs ripple Live debugging in Visual studio against iOS simulator, iOS device, or Android Emulator
- ionic conference app demo ionic serve vs ripple Live debugging in Visual studio against iOS simulator, iOS device, or Android Emulator
- ionic conference app demo ionic serve vs ripple Live debugging in Visual studio against iOS simulator, iOS device, or Android Emulator
- ionic conference app demo ionic serve vs ripple Live debugging in Visual studio against iOS simulator, iOS device, or Android Emulator