Dos & Don’ts when making Technology Choices

Vinci Rufus @areai51

Sr. Director

SapientRazorfish

Google Developer Expert

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

1996 2002 2003 2005 2007

Evolution of Smartphones

Watch this once every 2 months for a healthy dose of motivationhttps://www.youtube.com/watch?v=9hUIxyE2Ns8&t=126s

Dos & Don’ts

Plan for Scale but don’t necessarily go overboard building

for one

Avoid#geekgasm

Be Paranoid about Speed & Payload

Stay Performant from Day 0

• Time for Dev Environment setup

• Loading time during development

• Build Time.

Spend time on what is more Important

Architecture Design Principles

Data / Content Layer

User Experience Layer

De-Couple

RDBMS AggregationMachine Learning

PWA Native

Microservices

Orchestration LayerAPI Gateway

Be Future Proof Ready

Data / Content

Middleware

User eXperience

RDBMS AggregationMachine Learning

PWA Native

Microservices

Orchestration LayerAPI Gateway

De-Couple Identity Management

Identity Management

‘True’ Mobile first Strategy

API Gateway / Graph QL

Treat everything as just another device

Microservices

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

Leverage the Cloud

• Cloud Native features

• Go Serverless, Cloud Functions

• QA & staging environments

on cloud

Not Every App needs to be NativeBut every Responsive site needs to be a PWA

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.

PWAs can do All that.. atleast on Android

WTH is a Progressive Web App

“... a new software development methodology for building modern

frontend”

What Constitutes a PWA

App Shell Model

Instant Loading

Offline Support

60 fpsAdd to Home Screen

Push Notifications

Minimal Viable PWA

• App Shell

• Add to Home Screen

• Full Screen

• Offline Support

Full-on PWA

• Push Notifications

• Deeply Integrated PWA

• Background Sync

• 3x more time spent on site

• 40% higher re-engagement rate

• 70% greater conversion rate via homeScreen

• 3x lower data usage

Flipkart Lite

• ~60 MB on Android

• ~100 MB on iOS

• 0.5 MB as a PWA

OLA PWA

PWA should replace your Responsive Site

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.

PWA + AMP = PWAMP

Tech Team you Hire

Full Stack Developer

Angular React JS Preact Vue JS

Node Node Java Play Go Lang

MongoDB MySQL Neo4J Cassendra

Frontend

Backend

Database

Polyglot Developer

Angular React JS Preact Vue JS

Node Node Java Play Go Lang

MongoDB MySQL Neo4J Cassendra

Frontend

Backend

Database

Full stack to Polyglot Switch

Early Stage Full Steam

Fullstack Polyglot

MVP is Shipped

Vinci Rufus

@areai51Stay Practical.