1. Dos & Donts when making Technology Choices Vinci Rufus @areai51 Sr. Director SapientRazorfish Google Developer Expert 2. Other than being a GDE I have no other association with Google. Opinions and perspectives shared in this talk are my own and do not reflect that of any other organization. I dont get paid by Google. (which sucks) All references to Googles products or any other companies products are purely Coincidental. Disclaimer 3. 1996 2002 2003 2005 2007 Evolution of Smartphones 4. Watch this once every 2 months for a healthy dose of motivation https://www.youtube.com/watch?v=9hUIxyE2Ns8&t=126s 5. Dos & Donts 6. Plan for Scale but dont necessarily go overboard building for one 7. Avoid #geekgasm 8. Be Paranoid about Speed & Payload 9. Stay Performant from Day 0 Time for Dev Environment setup Loading time during development Build Time. 10. Spend time on what is more Important 11. Architecture Design Principles 12. Data / Content Layer User Experience Layer De-Couple 13. RDBMS Aggregation Machine Learning PWA Native Microservices Orchestration Layer API Gateway Be Future Proof Ready Data / Content Middleware User eXperience 14. RDBMS Aggregation Machine Learning PWA Native Microservices Orchestration Layer API Gateway De-Couple Identity Management Identity Management 15. True Mobile first Strategy API Gateway / Graph QL Treat everything as just another device Microservices 16. Single Page Experience over SPA Home & Categories Gallery / Product Listing Product Details Checkout Flow My Account A Collection of smaller modular apps. www.bit.ly/why-spe 17. Leverage the Cloud Cloud Native features Go Serverless, Cloud Functions QA & staging environments on cloud 18. Not Every App needs to be Native But every Responsive site needs to be a PWA 19. Reasons we went Native We want Push Notifications We wanted a good User Experience ( aka smooth scrolling) Want it to work Offline Leverage Device Capabilities. 20. PWAs can do All that .. atleast on Android 21. WTH is a Progressive Web App ... a new software development methodology for building modern frontend 22. What Constitutes a PWA App Shell Model Instant Loading Offline Support 60 fps Add to Home Screen Push Notifications 23. Minimal Viable PWA App Shell Add to Home Screen Full Screen Offline Support 24. Full-on PWA Push Notifications Deeply Integrated PWA Background Sync 25. 3xmore time spent on site 40%higher re-engagement rate 70%greater conversion rate via homeScreen 3xlower data usage Flipkart Lite 26. ~60 MB on Android ~100 MB on iOS 0.5 MB as a PWA OLA PWA 27. PWA should replace your Responsive Site 28. AMP AMP HTML AMP HTML is basically HTML extended with custom AMP properties AMP JS The AMP JS library ensures the fast rendering of AMP HTML pages. AMP Cache The Google AMP Cache can be used to serve cached AMP HTML pages. 29. PWA + AMP = PWAMP 30. Tech Team you Hire 31. Full Stack Developer Angular React JS Preact Vue JS Node Node Java Play Go Lang MongoDB MySQL Neo4J Cassendra Frontend Backend Database 32. Polyglot Developer Angular React JS Preact Vue JS Node Node Java Play Go Lang MongoDB MySQL Neo4J Cassendra Frontend Backend Database 33. Full stack to Polyglot Switch Early Stage Full Steam Fullstack Polyglot MVP is Shipped 34. Vinci Rufus @areai51 Stay Practical.