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.

Real World ionic Development

99 views

Published on

Slides from one of my talks I was going to give at the 2017 SoCalCodeCamp.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Real World ionic Development

  1. 1. Real World Ionic Development @chrisgriffith
  2. 2. Ionic Generator
  3. 3. Ionic Generator
  4. 4. Ionic Generator http://bit.ly/2wlRrVa http://bit.ly/2xILll5
  5. 5. Theming
  6. 6. Theming Platform Specific Styles <ion-app class="md"> Platform Mode Details ios ios Viewing on an iphone, ipad, or ipod will use the iOS styles. android md Viewing on any android device will use the Material Design styles. windows wp Viewing on any windows device inside cordova or electron uses the Windows styles. core md Any platform that doesn’t fit any of the above platforms will use the Material Design styles.
  7. 7. Theming src/pages/<page-name>/<page-name>.scss src/app/app.scss src/theme/variables.scss SCSS
  8. 8. Theming $control-height: 40px; .header { height: $control-height; } .sub-header { height: $control-height; }
  9. 9. Theming https://ionicframework.com/docs/theming/overriding-ionic-variables/ SASS Variables
  10. 10. Theming CSS Utilities <div text-center> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div>
  11. 11. Theming CSS Utilities <div text-capitalize> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. </div>
  12. 12. Theming Responsive Float Attributes Attribute Description float-{modifier} Applies the modifier to the element on all screen sizes. float-sm-{modifier} Applies the modifier to the element when min-width: 576px. float-md-{modifier} Applies the modifier to the element when min-width: 768px. float-lg-{modifier} Applies the modifier to the element when min-width: 992px. float-xl-{modifier} Applies the modifier to the element when min-width: 1200px.
  13. 13. Theming Element Padding Attribute Style Rule Description padding padding: 16px Applies padding to all sides. padding-top padding-top: 16px Applies padding to the top. padding-left padding-left: 16px Applies padding to the left. padding-right padding-right: 16px Applies padding to the right. padding-bottom padding-bottom: 16px Applies padding to the bottom. padding-vertical padding: 16px 0 Applies padding to the top and botttom. padding-horizontal padding: 0 16px Applies padding to the left and right. no-padding padding: 0 Applies no padding to all sides.
  14. 14. Theming Element Margin Attribute Style Rule Description margin margin: 16px Applies margin to all sides. margin-top margin-top: 16px Applies margin to the top. margin-left margin-left: 16px Applies margin to the left. margin-right margin-right: 16px Applies margin to the right. margin-bottom margin-bottom: 16px Applies margin to the bottom. margin-vertical margin: 16px 0 Applies margin to the top and botttom. margin-horizontal margin: 0 16px Applies margin to the left and right. no-margin margin: 0 Applies no margin to all sides.
  15. 15. Theming Hidden Gems <ion-header> no-border – Removes the border from the header element transparent – Adds transparent background to header <ion-item> detail-none, detail-push – These can be used to hide or display the arrow icon on a list item item-left, item-right, item-content – These attributes decide where, in relation to other elements, that the item should be placed text-wrap – Will force text inside of item to wrap onto next line
  16. 16. Ionic Native Mocks IONIC NATIVE MOCKS https://github.com/chrisgriffith/ionic-native-mocks Ionic Native Mocks are designed to be used as placeholders during development for the actual Ionic Native modules. Ionic Native is a curated set of wrappers for Apache Cordova plugins that make adding any native functionality you need to your Ionic mobile application easier.
  17. 17. Ionic Native Mocks $ npm install @ionic-native-mocks/[plug-in] --save // app.module.ts import { Camera } from '@ionic-native/camera'; import { CameraMock } from '@ionic-native-mocks/camera'; ... @NgModule({ ... providers: [ ... { provide: Camera, useClass: CameraMock } ... ] ... }) export class AppModule { }
  18. 18. Testing https://github.com/ionic-team/ionic-unit-testing-example This repository is an example project that gives guidance on setting up your Ionic application for unit testing and end-to-end (E2E) testing.
  19. 19. Progressive Web Apps
  20. 20. Progressive Web Apps https://chrisgriffith.wordpress.com/2017/08/24/case-study-stone-fest-21-pwa/ • Enable gzip • Improving iOS support <meta> tags • App Icons • Updating the BODY tag • Handling the no JavaScript case • Removing Cordova • Image Paths • Enabling Serviceworker.js • Updating the manifest.json file
  21. 21. Stencil
  22. 22. Stencil A compiler for web components Based on TypeScript, uses JSX Builds optimized Custom Elements Virtual DOM, Server Side, Pre-compilation, Async Rendering, One-way data-binding, JSX Inspired by the best parts of Angular, React, Vue, Preact, Polymer, etc. Driven entirely to take full advantage of the browser.
  23. 23. Stencil Built for PWAs • Blazin' fast startup • Focused on first-paint and Time-To-Interactive (TTI) • Tiny file sizes (faster startup) • Instead of sending runtime code to client, let the browser do the work • Animations and gestures not required for first paint • (What's good for PWAs, is just as good for Cordova apps, too)
  24. 24. Stencil import { Component, Prop } from '@stencil/core'; @Component({ tag: 'my-first-component', styleUrl: 'my-first-component.scss' }) export class MyComponent { // Indicate that name should be a public property on the component @Prop() name: string; render() { return ( <p> My name is {this.name} </p> ); } }
  25. 25. Stencil
  26. 26. Dev App
  27. 27. Dev App
  28. 28. Creator
  29. 29. Creator Rapid app prototyping Visually build high-fidelity apps in minutes. Drag and drop core Ionic UI components, add themes, animations, design files, and even custom code to create real, interactive Ionic mobile apps.
  30. 30. Deploy Realtime app updates Push hot code updates, content changes, A/B tests, and bug fixes in real time before and after your app is in the app stores, with Ionic Deploy.
  31. 31. Deploy Live updates Push live app updates directly to users and testers in realtime. No approvals, no delays. Automatic updating Keep users on the latest version, with updates that works seamlessly in the background. Split testing Run A/B tests and target the distribution of new changes using multiple update channels. App store compliant Safely update your Ionic apps while staying compliant with Apple and Android requirements.
  32. 32. Package Native builds in the cloud Create native apps in the cloud with Ionic Package to get from code to app store with no platform dependencies or complicated build steps.
  33. 33. Package Turn web assets into native SDKs Upload your Ionic project files and turn web assets into native SDKs for iOS and Android. Ionic Package configures, compiles, and packages it all in the cloud, and gives you everything you need to submit to the app stores.
  34. 34. Monitor Real-time error reporting Track issues in development and catch bugs before they ship. Quickly pinpoint and resolve runtime errors by drilling into your core codebase, down to the TypesSript level.
  35. 35. Monitor Realtime alerts & notifications Be the first to know whenever and wherever your app crashes, or when unexpected errors occur. Built for Ionic apps Track runtime errors in your Ionic apps with full web layer visibility and JavaScript stack traces. No setup. It will Just Work. TypeScript sourcemaps Know exactly where to push fixes by identifying offending code in your app’s original TypeScript.
  36. 36. Resources

×