Building tomorrow's web with today's tools

  • Published on
    02-Dec-2014

  • View
    1.999

  • Download
    7

DESCRIPTION

Few have the chance to create web-based mobile services from scratch. After years of investment in existing platforms (such as content management systems), how can you re-use your content, your servers, and your knowledge and evolve them to meet the mobile challenge?

Transcript

1. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com 2. BuildingTomorrows WebWith Todays Tools 3. 1941 4. An Experience Designed for the Medium 5. 1995 6. An Experience Designed for the Medium 7. 2007 8. An Experience Designed for the Medium 9. History has taught us to embrace change 10. History has taught usto question assumptions 11. History has taught usto have high expectations 12. How The Webis Changing Mobile How Mobileis Changing The Web 13. 2008We must have an iPhone App! 14. 2009We must have an Android App! 15. 2010We must have an iPad App! 16. 2011We must have a... 17. omfg 18. JSC# Palm J2MEMicrosoftRIM RIMAndroidAppleApple Air MicrosoftPalmObj-C Java C++ AndroidTop U.S. Smartphone Platforms,3 Month Average Ending December 2010comScore MobiLens 2010 19. But what does this word even mean?The Mobile WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies 20. A perfect storm 21. DocumentsApplicationsDeclarative HTML Programmatic DOMThemes & templates JSON APIsThin clientThick clientURLs Arguments & signalsRequest/Response Synchronization 22. A New Web StackWebFontsVideoAudioGraphicsDevice AccessServer & ServicesCameraCSS Styling & LayoutHTTPLocationAJAX JavaScriptContactsEventsSMSSemantic HTML Sockets Orientation SSL File SystemsWorkerx-AppGyroDBsParallelMore... MessagingApp Cache Processing 23. Web technologiesare a viable alternativeto native development 24. built withApps vs Web technology 25. DocumentsApplicationsDeclarative HTML Programmatic DOMThemes & templates JSON APIsThin clientThick clientURLs Arguments & signalsRequest/Response SynchronizationSedentary user Mobile user This is what it means 26. Mobile isan adjective not a noun 27. 480px) {and (m ax-width:@me dia screenpng);#logo {mage: u rl(mobile. ba ckground-i}} 28. Mobile devices are di erent GPS deviceCamera Music playerPhone 29. atio n/mswordtent-Ty pe: applicCon 30. The Mobile Webis not a320px Web 31. How did those assortedtank tops work out for you? 32. Techniques 33. adap tationnadaptatio tSHn/ /adp-/dapnoun/ao f adapting or process 1.The action ted orbeing adap r stage play sio n drama, o itten work2.A mo vie, televif rom a wren adapted that has be or speciesan organism nmentby whicho its enviro3.A change t etter suitedbecomes b 34. Mobile adaptationPresentational PrioritizationalPermutational 35. Presentational adaptationLa yout 36. Prioritizational adaptation Ation and I N aviga 37. Permutational adaptation nalityFu nctio 38. The topology of adaptation ClientProxyServer 39. PresentationalPrioritizationalPermutational Client Proxy Server 40. Passive client adaptation55 :// 555">5=" tel < a href 41. Proxy adaptationTheres a bad sortTheres a good sort 42. Server adaptationViewsHTML, CSS...Controllers Models 43. Server adaptation DesktopSwitcher HTML, CSS...MobileControllers Models 44. Device detection with pluginsWordPress Mobile Packhttp://wordpress.org/extend/plugins/wordpress-mobile-pack WPTouch http://wordpress.org/extend/plugins/wptouch Drupal Mobile Plugin http://drupal.org/project/mobileplugin 45. Brand consistency 46. Device detection with PHPif (isset($_SERVER[HTTP_X_WAP_PROFILE]) { ...if (in_array(substr($user_agent, 0, 4), $prefixes)) { ...if (strpos($accept, wap) !== false) { ...if (preg_match("/(" . $keywords . ")/i", $user_agent)) { ... https://github.com/jamesgpearce/mobiledetect 47. Device detection with Railsclass ApplicationController < ActionController::Basehas_mobile_fuend*.mobile.erbis_mobile_device?in_mobile_view?https://github.com/brendanlim/mobile-fu 48. Device detection with node.js var Connect = require("connect"),Monomi = require("monomi");Connect.createServer(Monomi.detectBrowserType(),function(request, response, next) {response.writeHead(200, {Content-Type: text/plain});response.write(Hello World: );response.end(you are using a+ request.monomi.browserType);}).listen(8080); https://github.com/jamesgpearce/monomi 49. Detection & user choice Switch to our desktop site 50. Thematic consistencyw3c-speak http://mysite.com/posts/123http://m.mysite.com/posts/123 51. Using di erent URLscan preserve the integrity of One Web 52. Device diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com 53. dapt ation ave c lient esignPresentationalPassiWebDsiveR espon t ation adap Proxyt ection Devi ce dePrioritizational ele sit MobiPermutational Client ProxyServer 54. dapt ation ave c lient esignPresentationalPassiWebDsiveR espon t ation adap Proxyt ection Devi ce dePrioritizational ele sit MobiPermutational Client ProxyServer 55. A dedicated mobile appDesktopSwitchers Mobile RESTJSOonControllersN ceModels 56. The stack of the present req/resUser interface RenderingBusiness logic Storage 57. The stack of the futureUser interface syncSecurityBusiness logicStorageStorageThe return of the thick client 58. Do we have time for somecode? 59. Progressive enhancement 60. assumption HTMLJSCSSprogressive enhancementapp docvs assumptionHTMLJS CSSapp detection +/- feature 61. Thick client, thin serverThe shortfall in the cloud 62. http://mysite.com/myimage.pnghttp://i.tinysrc.mobi/http://mysite.com/myimage.png 63. dapt ation ave c lient esignPresentationalPassiWebDsiveR espon t ation adap Proxyt ection Devi ce dePrioritizational ele sit Mobip d su pportPermutationalMob ile ap Clou Client ProxyServer 64. Mobile isan adjective not a noun 65. The Mobile Webis not a320px Web 66. History has taught us to embrace change 67. History has taught usto question assumptions 68. History has taught usto have high expectations 69. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com