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

Invest in the future, build for the web! http://localhost:8000/#1 Invest in the future: build for the web! Soledad Penadés @supersole 1 of 61 20/06/2014 12:56

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

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

Invest in the future, build for the web! http://localhost:8000/#1 “You can earn a living with Android apps” 4 of 61 20/06/2014 12:56

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

Invest in the future, build for the web! http://localhost:8000/#1 Faster than stock app Less clunky Hardware buttons Silent 6 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 Image filters Image processing Push limits of hardware Do it realtime 7 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 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 !) 8 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 Interactive picture books start-up Mac OS authoring environment XML format that contained text, assets, transition/interaction data Engine: iOS, Android 9 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 Layout was DIFFICULT No preview... ... or di ff ers 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 10 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 Bad habits, deeply ingrained Treating di ff erent sizes as an exception not a norm Assets sized for iPad 1 Fun fun fun when retina iPads were introduced 11 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 One day I woke up and wondered... why is this not HTML+JS+CSS? 12 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 “... because the web is not ready yet...” “... you can’t have smooth animations and audio in the browser...” OK 13 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 Contracting for local newspaper We basically built a glorified RSS reader. Layout kept getting more complex. Again lots of WebView s. 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? 14 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 One day I woke up and wondered again... why is this not HTML+JS+CSS? 15 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 “... because the web is not ready yet...” “... you can’t store o ffl ine data...” “... you can’t have push notifications...” A-ha. 16 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 One day I was updating the company website and opened DevTools to live edit it I had an epiphany 17 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 We’re recreating browsers again and again because... “the web is not ready” Enough is enough. 18 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 I’m out of this madness, and back to the web. 19 of 61 20/06/2014 12:56

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

Invest in the future, build for the web! http://localhost:8000/#1 Two sides of the fence Upsides vs downsides Teach about upsides Work in fixing the downsides! So... 21 of 61 20/06/2014 12:56

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

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

Invest in the future, build for the web! http://localhost:8000/#1 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... 24 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 We helped unlock desktop browsers from monopoly 25 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 We’re doing the same in mobile with Firefox OS 26 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 New APIs Network Information Device Orientation Alarm Bluetooth Screen Orientation Simple Push Mobile Connection Vibration Web Notifications Network Stats Alarm Web Activities TCP Socket WebFM WebPayment Telephony Camera Browser WebSMS Power Management Idle WiFi Information FileHandle Permissions Ambient Light Sensor Contacts Time/Clock Battery Status Device Storage Proximity Settings 27 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 Prefixed API implementations It’s the testing ground Submitted to standards track 28 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 T o help shaping standards, not to build a proprietary OS in JS 29 of 61 20/06/2014 12:56

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

Invest in the future, build for the web! http://localhost:8000/#1 Existing APIs WebGL Web Audio WebRTC Geolocation Pointer Lock IndexedDB 31 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 Over two billion people still don’t have access to the Internet 32 of 61 20/06/2014 12:56

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

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

Invest in the future, build for the web! http://localhost:8000/#1 Better tooling The Web is more than documents today 35 of 61 20/06/2014 12:56

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

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

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

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

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

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

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

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

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

Invest in the future, build for the web! http://localhost:8000/#1 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); 45 of 61 20/06/2014 12:56

Invest in the future, build for the web! http://localhost:8000/#1 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); }); 46 of 61 20/06/2014 12:56

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

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