[PPT] - Invest in the future: build for the web! Soledad Penads @supersole PowerPoint Presentation

SLIDE 1

Invest in the future: build for the web!

Soledad Penadés

@supersole

Invest in the future, build for the web! http://localhost:8000/#1 1 of 61 20/06/2014 12:56

SLIDE 2

Apps Engineer, Mozilla

Invest in the future, build for the web! http://localhost:8000/#1 2 of 61 20/06/2014 12:56

SLIDE 3

Some time before...

Android

Invest in the future, build for the web! http://localhost:8000/#1 3 of 61 20/06/2014 12:56

SLIDE 4

“You can earn a living with Android apps”

Invest in the future, build for the web! http://localhost:8000/#1 4 of 61 20/06/2014 12:56

SLIDE 5

Photography apps

Invest in the future, build for the web! http://localhost:8000/#1 5 of 61 20/06/2014 12:56

SLIDE 6

Faster than stock app

Less clunky Hardware buttons Silent

Invest in the future, build for the web! http://localhost:8000/#1 6 of 61 20/06/2014 12:56

SLIDE 7

Image filters

Image processing Push limits of hardware Do it realtime

Invest in the future, build for the web! http://localhost:8000/#1 7 of 61 20/06/2014 12:56

SLIDE 8

Good feedback, but...

Lots of untestable hardware issues Can’t buy all those phones! Where’s the iOS version? And Blackberry? Windows? MacOS? (I was running Linux!)

Invest in the future, build for the web! http://localhost:8000/#1 8 of 61 20/06/2014 12:56

SLIDE 9

Interactive picture books start-up

Mac OS authoring environment XML format that contained text, assets, transition/interaction data Engine: iOS, Android

Invest in the future, build for the web! http://localhost:8000/#1 9 of 61 20/06/2014 12:56

SLIDE 10

Layout was DIFFICULT

No preview... ... or differs from actual results (1+ minute deploy times) Complex layouts ... actually used a WebView! Native animations limited Jank Spending inordinate amounts of time in the profiler Jank! Cargo cult optimisations JANK! Testing—LOL

Invest in the future, build for the web! http://localhost:8000/#1 10 of 61 20/06/2014 12:56

SLIDE 11

Bad habits, deeply ingrained

Treating different sizes as an exception not a norm Assets sized for iPad 1 Fun fun fun when retina iPads were introduced

Invest in the future, build for the web! http://localhost:8000/#1 11 of 61 20/06/2014 12:56

SLIDE 12

One day I woke up and wondered...

why is this not HTML+JS+CSS?

Invest in the future, build for the web! http://localhost:8000/#1 12 of 61 20/06/2014 12:56

SLIDE 13

“... because the web is not ready yet...” “... you can’t have smooth animations and audio in the browser...”

OK

Invest in the future, build for the web! http://localhost:8000/#1 13 of 61 20/06/2014 12:56

SLIDE 14

Contracting for local newspaper

We basically built a glorified RSS reader. Layout kept getting more complex. Again lots of WebViews. Scripted actions in articles using JavaScript. Nested views limit, but NOT ALL devices had that error. Hey, so... what about a total rewrite of this less than two years app?

Invest in the future, build for the web! http://localhost:8000/#1 14 of 61 20/06/2014 12:56

SLIDE 15

One day I woke up and wondered again...

why is this not HTML+JS+CSS?

Invest in the future, build for the web! http://localhost:8000/#1 15 of 61 20/06/2014 12:56

SLIDE 16

“... because the web is not ready yet...” “... you can’t store offline data...” “... you can’t have push notifications...”

A-ha.

Invest in the future, build for the web! http://localhost:8000/#1 16 of 61 20/06/2014 12:56

SLIDE 17

One day I was updating the company website and opened DevTools to live edit it

I had an epiphany

Invest in the future, build for the web! http://localhost:8000/#1 17 of 61 20/06/2014 12:56

SLIDE 18

We’re recreating browsers again and again because...

“the web is not ready”

Enough is enough.

Invest in the future, build for the web! http://localhost:8000/#1 18 of 61 20/06/2014 12:56

SLIDE 19

I’m out of this madness, and back to the web.

Invest in the future, build for the web! http://localhost:8000/#1 19 of 61 20/06/2014 12:56

SLIDE 20

Back with a vengeance

Invest in the future, build for the web! http://localhost:8000/#1 20 of 61 20/06/2014 12:56

SLIDE 21

Two sides of the fence

Upsides vs downsides Teach about upsides Work in fixing the downsides! So...

Invest in the future, build for the web! http://localhost:8000/#1 21 of 61 20/06/2014 12:56

SLIDE 22

I joined Mozilla

Invest in the future, build for the web! http://localhost:8000/#1 22 of 61 20/06/2014 12:56

SLIDE 23

We want YOU to build for the web

Invest in the future, build for the web! http://localhost:8000/#1 23 of 61 20/06/2014 12:56

SLIDE 24

Why build for the web?

It’s the only non proprietary platform. No one owns it. The closest to Write Once Run Everywhere you’ll ever get. Using standards === higher chance it’ll work in the future Fragmentation is not an issue, it's business as usual. Widens your base of customers. Lowest development costs. It’s everywhere ... even in e-books, TV set top boxes, GPS trackers, mobile native via WebKit views, native via PhoneGap, Ludei, AppCelerator..., desktop environments (GNOME 3), Mac OS scripting...

Invest in the future, build for the web! http://localhost:8000/#1 24 of 61 20/06/2014 12:56

SLIDE 25

We helped unlock desktop browsers from monopoly

Invest in the future, build for the web! http://localhost:8000/#1 25 of 61 20/06/2014 12:56

SLIDE 26

We’re doing the same in mobile with Firefox OS

Invest in the future, build for the web! http://localhost:8000/#1 26 of 61 20/06/2014 12:56

SLIDE 27

New APIs

Network Information Bluetooth Mobile Connection Network Stats TCP Socket Telephony WebSMS WiFi Information Ambient Light Sensor Battery Status Proximity Device Orientation Screen Orientation Vibration Alarm WebFM Camera Power Management FileHandle Contacts Device Storage Settings Alarm Simple Push Web Notifications Web Activities WebPayment Browser Idle Permissions Time/Clock

Invest in the future, build for the web! http://localhost:8000/#1 27 of 61 20/06/2014 12:56

SLIDE 28

Prefixed API implementations

It’s the testing ground

Submitted to standards track

Invest in the future, build for the web! http://localhost:8000/#1 28 of 61 20/06/2014 12:56

SLIDE 29

T

help shaping standards, not

to build a proprietary OS in JS

Invest in the future, build for the web! http://localhost:8000/#1 29 of 61 20/06/2014 12:56

SLIDE 30

Existing APIs→

efficient mobile implementations

Invest in the future, build for the web! http://localhost:8000/#1 30 of 61 20/06/2014 12:56

SLIDE 31

Existing APIs

WebGL Web Audio WebRTC Geolocation Pointer Lock IndexedDB

Invest in the future, build for the web! http://localhost:8000/#1 31 of 61 20/06/2014 12:56

SLIDE 32

Over two billion people still don’t have access to the Internet

Invest in the future, build for the web! http://localhost:8000/#1 32 of 61 20/06/2014 12:56

SLIDE 33

2,000,000,000+

Invest in the future, build for the web! http://localhost:8000/#1 33 of 61 20/06/2014 12:56

SLIDE 34

$25 phone

Invest in the future, build for the web! http://localhost:8000/#1 34 of 61 20/06/2014 12:56

SLIDE 35

Better tooling

The Web is more than documents today

Invest in the future, build for the web! http://localhost:8000/#1 35 of 61 20/06/2014 12:56

SLIDE 36

Responsive design mode

Invest in the future, build for the web! http://localhost:8000/#1 36 of 61 20/06/2014 12:56

SLIDE 37

Network + cache inspector

Invest in the future, build for the web! http://localhost:8000/#1 37 of 61 20/06/2014 12:56

SLIDE 38

Scratchpad

Invest in the future, build for the web! http://localhost:8000/#1 38 of 61 20/06/2014 12:56

SLIDE 39

Canvas inspector

Invest in the future, build for the web! http://localhost:8000/#1 39 of 61 20/06/2014 12:56

SLIDE 40

Shader editor

Invest in the future, build for the web! http://localhost:8000/#1 40 of 61 20/06/2014 12:56

SLIDE 41

Web Audio Editor

Invest in the future, build for the web! http://localhost:8000/#1 41 of 61 20/06/2014 12:56

SLIDE 42

Polyfills and libraries

Filling the gaps

Invest in the future, build for the web! http://localhost:8000/#1 42 of 61 20/06/2014 12:56

SLIDE 43

Brick

Invest in the future, build for the web! http://localhost:8000/#1 43 of 61 20/06/2014 12:56

SLIDE 44

Phonegap + Firefox OS

Invest in the future, build for the web! http://localhost:8000/#1 44 of 61 20/06/2014 12:56

SLIDE 45

localForage

// In localStorage, we would do: localStorage.setItem('key', JSON.stringify('value')); doSomethingElse(); // With localForage, we use callbacks: localforage.setItem('key', 'value', doSomethingElse); // Or we can use Promises: localforage.setItem('key', 'value').then(doSomethingElse);

Invest in the future, build for the web! http://localhost:8000/#1 45 of 61 20/06/2014 12:56

SLIDE 46

Animated_GIF

var imgs = document.querySelectorAll('img'); var ag = new Animated_GIF(); var animatedImage = document.createElement('img'); ag.setSize(320, 240); for(var i = 0; i < imgs.length; i++) { ag.addFrame(imgs[i]); } ag.getBase64GIF(function(image) { animatedImage.src = image; document.body.appendChild(animatedImage); });

Invest in the future, build for the web! http://localhost:8000/#1 46 of 61 20/06/2014 12:56

SLIDE 47

Animated_GIF

Invest in the future, build for the web! http://localhost:8000/#1 47 of 61 20/06/2014 12:56

SLIDE 48

Y eah, but...

Invest in the future, build for the web! http://localhost:8000/#1 48 of 61 20/06/2014 12:56

SLIDE 49

Missing a feature?

Don’t just complain,

get involved!

Invest in the future, build for the web! http://localhost:8000/#1 49 of 61 20/06/2014 12:56

SLIDE 50

This is not the 90s anymore.

Invest in the future, build for the web! http://localhost:8000/#1 50 of 61 20/06/2014 12:56

SLIDE 51

The Web is YOURS,

so shape it!

Invest in the future, build for the web! http://localhost:8000/#1 51 of 61 20/06/2014 12:56

SLIDE 52

Getting involved means you make informed decisions.

Invest in the future, build for the web! http://localhost:8000/#1 52 of 61 20/06/2014 12:56

SLIDE 53

What works? What doesn’t? Why? Is there a work around?

Invest in the future, build for the web! http://localhost:8000/#1 53 of 61 20/06/2014 12:56

SLIDE 54

Getting involved means your needs are taken into account.

Invest in the future, build for the web! http://localhost:8000/#1 54 of 61 20/06/2014 12:56

SLIDE 55

We need this feature for our use case... This feature can't work for this reason...

Invest in the future, build for the web! http://localhost:8000/#1 55 of 61 20/06/2014 12:56

SLIDE 56

A W3C editor sitting on their chair on a lonely room will never know about your needs unless you tell them.

Invest in the future, build for the web! http://localhost:8000/#1 56 of 61 20/06/2014 12:56

SLIDE 57

Ways to get involved

Always assume good intent, and be respectful. Find your channel: mailing lists, GitHub repos, IRC, meet ups, the Extensible web summit... Ask questions. Try your code in different browsers. Try nightlies for preview features. Maybe even learn to compile your favourite browser! File bugs. Build things. Break things! File more bugs!

Invest in the future, build for the web! http://localhost:8000/#1 57 of 61 20/06/2014 12:56

SLIDE 58

For the Web to be ours, it needs everyone’s input.

Invest in the future, build for the web! http://localhost:8000/#1 58 of 61 20/06/2014 12:56

SLIDE 59

Let’ s build this together .

Invest in the future, build for the web! http://localhost:8000/#1 59 of 61 20/06/2014 12:56

SLIDE 60

Thanks!

@supersole

soledadpenades.com

Invest in the future, build for the web! http://localhost:8000/#1 60 of 61 20/06/2014 12:56

SLIDE 61

Invest in the future, build for the web! http://localhost:8000/#1 61 of 61 20/06/2014 12:56