max firtman @firt firt.mobi

Saudi Aramco

Custom JavaScript Training

mobile+web developer

who? @firt

mobile+web developer & trainer

trainer

Books I’ve written

TranslationsLanguages I don’t

understand

questions

yes, please

anytime

It’s your turn

experience in

HTML, CSS, JavaScript other dev platforms?

About this training

Goals

Custom JavaScript Training

HTML5 and CSS3

Bootstrap

Additional Tools: VS Code, WebPack, LESS/SASS

TypeScript

Angular 2 with TypeScript

Browsers JS APIs

Goals

Optional modules (last day)

Web Performance Optimization

Web Hardware access

Apache Cordova

Node.js

Logistics

Logistics

7.30am: start 9.00am: break 15 min 11.30pm: lunch 1 hour 12.30pm: second half start 1.30pm: break 15 min ~2.30pm: end. Q&A until 3.30pm

Logistics

- Material from (just wait for the URL) - Presentation, Live code samples, exercises - Test on browsers

Questions?

Yes, please!

Anytime!

Let’s start

html5

‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ everything “new” on the web

mobile

1- websites 2- apps

mobile

1- websites 2- apps

mobile

1- websites 2- apps

with html5 we can create...

we can create

1- websites

Using the browser

URL

Web Server

1- websiteswe can create

we can create

2- webapps

Browser to install

Full-screen

Icon on home screen

Web Server

2- webappswe can create

full screen webapps

home screen webapps

webapps are also known as(

)

we can create

3- native webapps

Package, compile, sign

Icon on home screen

App Store

No web server

3- native webappswe can create

hybrid apps

packaged webapps

native webapps are also known as

(

)

mobile

1- websites 2- apps

a- native b- webapps c- native webapps

mobile

1- websites 2- apps

native webapps

What is ?

html5

‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ everything “new” on the web

html version 5?

typeof html5 != boolean

some features safe

some features only on few platforms

some features experimental

some features with prefixes

and what about capabilities today?

progressive enhancement

progressive enhancement

responsive web design

Architecture

Architecture

Architecture

Architecture

Architecture

Architecture

Architecture

Best of both worlds

Progressive Web Apps

1- Open Definition 2- Performance, Secure, App-like 3- Progressive Enhancement 4- Best of Web and Native

Best of Web1- Linkable 2- Discoverable 3- Easy to deploy 4- Easy to update 5- Standards

6- Offline Access 7- Installed Icon 8- Push Notifications 9- Full Screen Experience 10- Fast UI

Best of Native

you can reach a good experience

Pictures)from)freedigitalphotos.net)

thanks!

firtman@gmail.comtwitter: @firt

mobilexweb.com