The perfect cross-platform

@yrezgui for RivieraDev

@RivieraDEV

Make some noise !

Yacine Rezgui

French Tunisian

Lead Front end @ import.io

Lives in London

DevRocket UK meetup

@yrezgui

History of the web

But what is HTML5 ?

Thanks to it, we have powerful apps now 

• Inbox by Gmail
• Slack
• Sqwiggle
• Import.io

Let's replace

Native Apps !

So powerful, that we said...

But...

Reasons ?

• Ugly interface like a GeoCities page
• Slow like Windows Vista
• Poor features like a Blackberry
• Not the same API coverage everywhere

How can we fix that ?

Just keep focusing on

this talk    

Ugly design ?

Ugly design ?

For God sake, hire a designer !

Bootstrap is a boilerplate, you need to personnalise it

Slow like Windows Vista ?

Slow like Windows Vista ?

• WebWorkers
• Canvas
• ASM.js
• CSS3 animations

Poor features like a BlackBerry ?

Poor features like a BlackBerry ?

• Web APIs
• Chrome & Firefox Apps
• Atom Shell & Node Webkit
• Firefox OS
• PhoneGap

Chrome & Firefox Apps

• Installed apps (local files)
• Can be opened outside of the browser
• Access to low-level APIs (Network, FileSystem, etc.)

AtomShell & Node Webkit

• Chromium Engine with NodeJS embedded
• Access to all NPM packages (155 686 today)
• Update system, Multiplatform

Firefox OS

• Made only with Web technologies
• Debug like you debug your website

PhoneGap & Crosswalk

• Made only with Web technologies
• Debug like you debug your website

Not the same API coverage everywhere ?

• Chrome, Firefox and Opera are best friends
• Microsoft Edge (IE 11 is good)
• Safari isn't that bad (otherwise PhoneGap)

It's easier to do 3d in Web than styling the <select> element...

Web Components

Create your own elements

​

• HTML imports
• Templates
• Custom Elements
• Shadow DOM

Google Music built with Polymer

Bonus

I ❤ React

WhatsApp web with ReactJS

React Canvas

React Native

Just do it !

Thanks !

www.yrezgui.com

twitter.com/yrezgui

github.com/yrezgui