What is Ionic? • Develop once, deploy everywhere • Ready made components • Implement native functionality when necessary “Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease“
About this Workshop • Simple Ionic Chat Application + ( ) • No mobile compilation due to time constraints • But there is a surprise at the end! • Beware: There will be live coding in this workshop! • Everything is ready in the repository, no need to follow along with the live coding • 3 Programming checkpoints • Pair programming is encouraged!
Home Page + Chat Room Page • Structural directives • *ngFor to list room links • *ngIf to show empty list message • Listen observables with AsyncPipe • Transclusion selector slots • Introduce footer slot in chat room page to insert messages input
Chat Room Messages git checkout workshop-checkpoint-3 • List room messages • Use backend sendMessage() method • New messages will be added to Room.messages property 20 minutes
Considerations for production • Internationalization • Form validation++ • UI++ (avatars, settings, etc.) • Encrypt messages • Release to App Stores • Push notifications • Native? not necessarily – Check out Twitter PWA • Check out service workers for functionality when app is closed • Relative imports conundrum
Building release artifact node_modules/.bin/ionic cordova build {platform} --prod • Android: upload .APK to Google Play • iOS: use Xcode to release app to AppStore • PWA: Progressive Web App • Prepare manifest.json file • Remove cordova dependencies • node_modules/.bin/ionic cordova build browser –prod • Use www/ folder as website root
Closing Thoughts • Hybrid development is the best choice for startups and proof-of-concept • Firebase + Github Pages == 0 Hosting costs • Coming Soon: Web Components • Ionic will become only a components library • Hello Vue, Goodbye Angular!