that's #toshmagosh

This is me, Tara

Software Engineer

turned

Developer Advocate

@TZMANICS

#KENDOCAMPERTOUR

@NodeSchoolCincy

@CincyWWCode

PROMO CODE: PROM-KCT7

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

that's me 😄

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

I'M LEARNING

THEN I TRY TO HELP YOU LEARN TOO

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

KENDO CAMPER TOUR PROJECT

An IoT PWA Using Angular & Node

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

KENDO CAMPER TOUR PROJECT TECHNOLOGIES

Philips Hue

Angular

Kendo UI

Node.js

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

KENDO CAMPER TOUR PROJECT INITIAL OUTLINE

  1. make sure IoT works

  2. create angular app

  3. add ui components

  4. integrate IoT API to UI

  5. upgrade to PWA

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

IoT

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

KENDO CAMPER TOUR PROJECT INITIAL OUTLINE

  1. make sure IoT works

  2. create angular app

  3. add ui components

  4. integrate IoT API to UI

  5. upgrade to PWA

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

#(not so)liveDemo

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

Angular CLI

ng new <project name>

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

Angular CLI

u-go-hue-go/

file structure

u-go-hue-go/src
u-go-hue-go/src/app

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

Kendo UI Components

get all the things!

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

Kendo UI Components

app/src/app.module.ts

👉

{

👍

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

app/src/app.component.html
app/src/app.component.ts

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

KendoUI.com

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

themebuilder.telerik.com

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

http://developer.telerik.com/

@tzmanics

#KendoCamperTour

@KendoUI

KENDO CAMPER TOUR PROJECT INITIAL OUTLINE

  1. pick IoT

  2. make sure it works

  3. create angular app

  4. add ui components

  5. integrate IoT API to UI

  6. upgrade to PWA

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

KENDO CAMPER TOUR PROJECT INITIAL OUTLINE

  1. pick IoT

  2. make sure it works

  3. create angular app

  4. add ui components

  5. upgrade to PWA

  6. integrate IoT API to UI

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

PROGRESSIVE WEB APPS

  1. app shell

  2. service workers

  3. app manifest

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

! LIMERICK CHALLENGE !

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

To make your app load real well

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

Kiss all that data farewell

Just add what you need

Then you'll see some speed

We'll just load our app

...

SHELL

The minimum amount of HTML, CSS & JavaScript needed for your UI.

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

app shell

cache these files & fill in data when it's available

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

app shell

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

https://github.com/angular/mobile-toolkit/blob/master/guides/app-shell.md

! LIMERICK CHALLENGE !

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

When your network is being a shirker

You can serve up this little lurker

Make your load times much fast

With no running app

It's time for a service

...

WORKER

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

NETWORK ------ SERVICE WORKER ------ BROWSER

🤝

🕵🏻‍♀️

☠️

@tzmanics

#KendoCamperTour

@KendoUI

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

👁 @kosamari 👁

@tzmanics

#KendoCamperTour

@KendoUI

SERVICE WORKER

src/index.html

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

@tzmanics

#KendoCamperTour

@KendoUI

sw-precache

@tzmanics

#KendoCamperTour

@KendoUI

@tzmanics

#KendoCamperTour

@KendoUI

ng build -prod

npm run precache

@tzmanics

#KendoCamperTour

@KendoUI

@tzmanics

#KendoCamperTour

@KendoUI

! LIMERICK CHALLENGE !

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

To make your PWA look like the rest

This JSON file's the best

It makes full screen views

and home screen cues

Let's add an app

...

MANIFEST

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

APP MANIFEST

index.html

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

APP MANIFEST

manifest.json

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

LIGHTHOUSE

https://developers.google.com/web/tools/lighthouse/

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

KENDO CAMPER TOUR PROJECT INITIAL OUTLINE

  1. pick IoT

  2. make sure it works

  3. create angular app

  4. add ui components

  5. integrate IoT API to UI

  6. upgrade to PWA

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

@tzmanics

#KendoCamperTour

@KendoUI

FIREBASE HOSTING

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

npm i -g firebase-tools

@tzmanics

#KendoCamperTour

@KendoUI

FIREBASE HOSTING

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

firebase login

@tzmanics

#KendoCamperTour

@KendoUI

FIREBASE HOSTING

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

firebase login

@tzmanics

#KendoCamperTour

@KendoUI

FIREBASE HOSTING

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

firebase init

@tzmanics

#KendoCamperTour

@KendoUI

FIREBASE HOSTING

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

firebase.json

@tzmanics

#KendoCamperTour

@KendoUI

FIREBASE HOSTING

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

firebase deploy

@tzmanics

#KendoCamperTour

@KendoUI

FIREBASE HOSTING

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

console

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

THANK YOU

SEATTLE JS WORKSHOP!!

@TZMANICS

#KENDOCAMPERTOUR

PROMO CODE: PROM-KCT7

Seattle JavaScript Workshop

By Tara Z. Manicsic

Made with Slides.com

Seattle JavaScript Workshop

Slides for my Seattle JavaScript talk on IoT PWA with Kendo UI, Angular & Firebase

  • 1,579

More from Tara Z. Manicsic