Dos & Donts when making Technology choices
-
Upload
vinci-rufus -
Category
Internet
-
view
122 -
download
2
Transcript of Dos & Donts when making Technology choices
![Page 1: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/1.jpg)
Dos & Don’ts when making Technology Choices
Vinci Rufus @areai51
Sr. Director
SapientRazorfish
Google Developer Expert
![Page 2: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/2.jpg)
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 don’t get paid by Google. (which sucks)
All references to Google’s products or any other companies products are purely Coincidental.
Disclaimer
![Page 3: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/3.jpg)
![Page 4: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/4.jpg)
1996 2002 2003 2005 2007
Evolution of Smartphones
![Page 5: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/5.jpg)
Watch this once every 2 months for a healthy dose of motivationhttps://www.youtube.com/watch?v=9hUIxyE2Ns8&t=126s
![Page 6: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/6.jpg)
Dos & Don’ts
![Page 7: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/7.jpg)
Plan for Scale but don’t necessarily go overboard building
for one
![Page 8: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/8.jpg)
![Page 9: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/9.jpg)
![Page 10: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/10.jpg)
Avoid#geekgasm
![Page 11: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/11.jpg)
Be Paranoid about Speed & Payload
![Page 12: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/12.jpg)
Stay Performant from Day 0
• Time for Dev Environment setup
• Loading time during development
• Build Time.
![Page 13: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/13.jpg)
Spend time on what is more Important
![Page 14: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/14.jpg)
Architecture Design Principles
![Page 15: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/15.jpg)
Data / Content Layer
User Experience Layer
De-Couple
![Page 16: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/16.jpg)
RDBMS AggregationMachine Learning
PWA Native
Microservices
Orchestration LayerAPI Gateway
Be Future Proof Ready
Data / Content
Middleware
User eXperience
![Page 17: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/17.jpg)
RDBMS AggregationMachine Learning
PWA Native
Microservices
Orchestration LayerAPI Gateway
De-Couple Identity Management
Identity Management
![Page 18: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/18.jpg)
‘True’ Mobile first Strategy
API Gateway / Graph QL
Treat everything as just another device
Microservices
![Page 19: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/19.jpg)
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
![Page 20: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/20.jpg)
Leverage the Cloud
• Cloud Native features
• Go Serverless, Cloud Functions
• QA & staging environments
on cloud
![Page 21: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/21.jpg)
Not Every App needs to be NativeBut every Responsive site needs to be a PWA
![Page 22: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/22.jpg)
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.
![Page 23: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/23.jpg)
PWAs can do All that.. atleast on Android
![Page 24: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/24.jpg)
WTH is a Progressive Web App
“... a new software development methodology for building modern
frontend”
![Page 25: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/25.jpg)
What Constitutes a PWA
App Shell Model
Instant Loading
Offline Support
60 fpsAdd to Home Screen
Push Notifications
![Page 26: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/26.jpg)
Minimal Viable PWA
• App Shell
• Add to Home Screen
• Full Screen
• Offline Support
![Page 27: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/27.jpg)
Full-on PWA
• Push Notifications
• Deeply Integrated PWA
• Background Sync
![Page 28: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/28.jpg)
• 3x more time spent on site
• 40% higher re-engagement rate
• 70% greater conversion rate via homeScreen
• 3x lower data usage
Flipkart Lite
![Page 29: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/29.jpg)
• ~60 MB on Android
• ~100 MB on iOS
• 0.5 MB as a PWA
OLA PWA
![Page 30: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/30.jpg)
PWA should replace your Responsive Site
![Page 31: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/31.jpg)
![Page 32: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/32.jpg)
AMP
•AMP HTMLAMP HTML is basically HTML extended with custom AMP properties
•AMP JSThe AMP JS library ensures the fast rendering of AMP HTML pages.
•AMP CacheThe Google AMP Cache can be used to serve cached AMP HTML pages.
![Page 33: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/33.jpg)
PWA + AMP = PWAMP
![Page 34: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/34.jpg)
Tech Team you Hire
![Page 35: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/35.jpg)
Full Stack Developer
Angular React JS Preact Vue JS
Node Node Java Play Go Lang
MongoDB MySQL Neo4J Cassendra
Frontend
Backend
Database
![Page 36: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/36.jpg)
Polyglot Developer
Angular React JS Preact Vue JS
Node Node Java Play Go Lang
MongoDB MySQL Neo4J Cassendra
Frontend
Backend
Database
![Page 37: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/37.jpg)
Full stack to Polyglot Switch
Early Stage Full Steam
Fullstack Polyglot
MVP is Shipped
![Page 38: Dos & Donts when making Technology choices](https://reader031.fdocuments.net/reader031/viewer/2022030318/5a6e00b77f8b9ac0678b51c3/html5/thumbnails/38.jpg)
Vinci Rufus
@areai51Stay Practical.