Sg conference multiplatform_apps_adam_stanley
Upcoming SlideShare
Loading in...5
×
 

Sg conference multiplatform_apps_adam_stanley

on

  • 561 views

Web technologies such as HTML5, Javascript and CSS3 are emerging as an alternative for mobile application development platform, at the same time allow the user to provide great experiences, and are ...

Web technologies such as HTML5, Javascript and CSS3 are emerging as an alternative for mobile application development platform, at the same time allow the user to provide great experiences, and are simple to administer and maintain by IT organizations.

This session will discuss the status of these technologies and their feasibility for the development of mobile applications. We will also address some recommendations and considerations that must be taken to choose a strategy for developing apps based on web technologies.

Statistics

Views

Total Views
561
Views on SlideShare
542
Embed Views
19

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 19

https://twitter.com 19

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sg conference multiplatform_apps_adam_stanley Sg conference multiplatform_apps_adam_stanley Presentation Transcript

  • Multiplatform App Development with Web Technologies Adam Stanley @n_adam_stanley 04 de julio 2013 Logo de empresa que presenta
  • Hola Mundo • Adam Stanley – Team Lead, BlackBerry Developer Relations – Likes: ninjas, bacon, JavaScript – Dislikes: cilantro, styrofoam, JavaScript – 127.0.0.1 is Waterloo, Ontario, Canada
  • Web or Native? USA Today Flixster
  • Web or Native? • What matters to users is EXPERIENCE • What matters to developers is USERS
  • Why consider Web? • Cross platform by nature, good for developers
  • Why consider Web? Q2 2013 Mobile Developer Report 6,046 Appcelerator Titanium developers
  • Why consider Web? • Excellent cross-platform mobile support • HTML5 Test – Max 500 + 15 bonus points http://html5test.com
  • Current state of HTML5 Camera Accelerometer Storage File API WebGL Magnetometer Geolocation Web sockets requestAnimationFrame Media queries Notification
  • Current state of HTML5 • It knows what you want to do next – Contextual input fields – Native UI integration 9
  • Current state of HTML5 • Ringmark test http://rng.io BlackBerry 10
  • CSS3 • Provide visual style to UI – Enhance default styles – Define a custom look & feel .gangnam { float: left; font-family: Korean; }
  • CSS3 • GPU helps animation & CSS transitions – Use 3D to enable hardware acceleration -webkit-transform: translate(100px, 0px); -webkit-transform: translate3d(100px, 0px, 0px); More demos http://bit.ly/15h0Xa2
  • JavaScript • Functionality for web apps • A beautiful language – Standards based – Cross-platform – No compilation – View source Image Source: ©2008 Doug Crockford, http://shop.oreilly.com/product/9780596517748.do
  • JavaScript • It’s also a terrible language – No OOP – No standard libraries – No module system – Full of surprises > [] + [] [object Object] > {} + [] 0 > {} + {} NaN Image Source: © Phillihp Harmon, http://bit.ly/13uHQKM
  • JavaScript • Classic developer problem Image Source: © 2013, Nicholas H. Tollervey, http://ntoll.org/article/pinax-and-lego So, you want to build something awesome. Do you build everything yourself? Image Source: © 2011, CNET http://news.cnet.com/2300-17938_105-10008728-10.html
  • JavaScript • Or had the problem already been solved? – Don’t invent already invented solutions Image Source: © 2013, Craig Changfoot, http://www.organizedactions.com/?p=1801
  • JavaScript • Understand community frameworks – Macro (jQuery, Sencha) – Micro (require, backbone) “Micro” Frameworks Your Org HTML5, CSS3 JavaScript “Macro” Frameworks
  • JavaScript • Flotr2.js – Drawing HTML5 charts & graphics Image Source: © 2013, Humble Software Development, http://www.humblesoftware.com/flotr2
  • JavaScript • Hammer.js – multi-touch gestures – Cross-platform support – Super lightweight (2Kb) Image Source: © 2013, Jorik Tangelder, http://eightmedia.github.io/hammer.js/ Hammer(el).on("swipeleft", function() { alert('you swiped left!'); });
  • JavaScript • Construct2 – Create compelling HTML5 games – No coding required http://www.scirra.com/construct2
  • JavaScript • Development strategy rule – Never make assumptions based on a browser – Use feature detection NOT browser detection
  • JavaScript • Modernizr – A JavaScript library for feature detection – HTML5, CSS3 – Write code for all browsers Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });
  • Mobile Applications What if you could build a native application using Web technologies? JavaScript HTML5 CSS3
  • Mobile Applications • Storefronts – Powerful digital shopping experience – Carrier billing – Credit card, PayPal
  • Mobile Applications • Browser vs. Applications distribution model
  • Mobile Applications • HTML5 apps that run natively – SDKs: Cordova, PhoneGap, WebWorks
  • Mobile Applications • HTML5 powered by native capabilities HTML5, CSS3, JavaScript WebKit engine Application platforms Platform Developer APIs
  • Mobile Applications • Enriched platform capabilities blackberry.app blackberry.event blackberry.system blackberry.identity Native plugin (C/C++)JavaScript API
  • Mobile Applications • Platform Services – Payment – Advertising – Location – Analytics – Social – Scoreloop
  • Mobile Applications • Achieve a native “Look & Feel” with Web – Reminder: It’s about EXPERIENCE bbUI.jsSencha TouchjQuery Mobile
  • Performance matters http://browserdiet.com
  • Performance matters • Radio – Bandwidth – Latency • CPU – Animation – Scrolling • Battery – Events
  • Performance matters • Hardware acceleration makes a BIG difference – CSS (scrolling, transitions) – Canvas (GUIMark3, WebGL) http://www.youtube.com/watch?v=OYgtr0-hlBQ
  • Real World applications Sencha HTML5 Facebook Hybrid App List scrolling Payload State Retention http://www.sencha.com/blog/the-making-of-fastbook-an-html5-love-story 15 fps 60 fps 20 kb 2 kb None Full
  • Real World applications 35
  • Real World applications USA Today Flixster
  • What’s next for HTML5? • Mobile computing – More than smartphones – Think ‘end points’ http://www.youtube.com/watch?v=J0rMb8qtcSs Image Source: ©2013, Crackberry.com, http://bit.ly/11Btbh9 ©2013, PostMedia News, http://bit.ly/1cUP3U9
  • Closing thoughts • Choose mobile industry leaders – High HTML5 standards support – Very active WebKit contributions – 1st-class packaged Web app support – Enables native integration – Push boundaries of web app platform 38
  • Closing thoughts • Build sophisticated mobile Web apps 2Scoops Filter Mama TuneIn radio Mailonline
  • Closing thoughts • A Web app is not a Web site Packaged Resources + User Experience Optimize Performance Image Source: © Rooster Teeth, http://bit.ly/11jyK3e
  • Closing thoughts • Performance must be considered at every step 0 20 40 60 80 100 Performance Default Some optimization Fully optimized
  • Preguntas ¡Gracias! Adam Stanley @n_adam_stanley Logo de empresa que presenta