HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer...
-
Upload
rebecca-shelton -
Category
Documents
-
view
215 -
download
1
Transcript of HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer...
![Page 1: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/1.jpg)
![Page 2: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/2.jpg)
HTML5 AND THE FUTURE JAVASCRIPT PLATFORM
Marcelo Lopez RuizSenior Software Design EngineerMicrosoft Corporation
![Page 3: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/3.jpg)
looking ahead, looking behind
• web application architecture• evolution and trends• show work to help bridge to future
![Page 4: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/4.jpg)
web apps - classicHTML Page
Server
http(s) transportInitial Page Request
HTML+CSS + JS
Browser (Client)
![Page 5: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/5.jpg)
web apps - modern
Server
http(s) transport
HTML Page Ajax Support
(XMLHttpRequest)
JavaScript Call
HTML+CSS+Data
Response
Request
HTML+CSS + JS
Initial Page Request
![Page 6: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/6.jpg)
evolving platform = opportunity
![Page 7: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/7.jpg)
from good AJAX apps to great AJAX apps
• more interactive• more responsive• improved and specialized user experiences
![Page 8: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/8.jpg)
• Local Storage• Language
Improvements• Network Improvements• Advanced Graphics• Media
• Facebook• eBay• Netflix• Twitter• Flickr• StackOverflow• SharePoint• … running out of slide
space
HTML5 improvements data everywhere
![Page 9: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/9.jpg)
data everywhere
• Huge data growth - Vast variety of data exist today, more coming.
• Some companies are in the business of producing data so others make business by consuming it
• REST open web protocols for querying and updating data
![Page 10: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/10.jpg)
OData
• Rely on standard web technologies like HTTP, Atom Publishing Protocol (AtomPub) and JSON
• Operation semantics - mapping of HTTP methods (GET, POST, PUT, DELETE)
• Query - resources, identified using Uniform Resource Identifiers
![Page 11: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/11.jpg)
quick code – local storage
demo
![Page 12: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/12.jpg)
quick code –data everywhere
demo
![Page 13: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/13.jpg)
• Local Storage• Language
Improvements• Network Improvements• Advanced Graphics• Media
• Facebook• eBay• Netflix• Twitter• Flickr• StackOverflow• SharePoint• … running out of slide
space
HTML5 improvements data everywhere
datajs
cache data smart prefetch
cross domain
no browser diffs
same coderesilient to network
leverage capabilities
multiple sources
![Page 14: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/14.jpg)
datajs – library for data-centric web applications
demo
![Page 15: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/15.jpg)
recap: datajs communication library• Abstracts out formats• Abstracts out communication details• All protocol capabilities: read, write, metadata• Full asynchronous support• Layered and open, great for unit tests
![Page 16: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/16.jpg)
recap: datajs caching library• Let you focus on the problem and not the
implementation• Fast page load• Fast scrolling and pagination• Web page survives connectivity hiccups• Works over Web Storage or in-memory today, lights up
on IndexedDB tomorrow• You write it once – we test it against all browsers all
form factors
![Page 17: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/17.jpg)
datajs – same code, multiple browsers and devices
demo
![Page 18: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/18.jpg)
It’s the final countdown(para-pa-pa para-pa-pa-pa)
ie6 – back compat matters
![Page 19: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/19.jpg)
library trends• fewer large frameworks, more small & focused• play well together• more structure to applications (MVC, MVVM)• still some common blocks missing e.g. change
notification• common features: pay for play, avoid polluting
namespace, work cross-browser, degrade gracefully
![Page 20: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/20.jpg)
datajs future• long list, will only get longer, join us!• better support for authentication• first-class support for tracking local changes,
validation, saving them, etc.• canvas and SVG integration – see other sessions!• deeper integration with libraries (plug-ins)• high-level API when IndexedDB is available
![Page 21: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/21.jpg)
building the future together• http://datajs.codeplex.com/• download and try it out, build it yourself• early adopters have been sending feedback and
asking questions – join in!
![Page 22: HTML5 AND THE FUTURE JAVASCRIPT PLATFORM Marcelo Lopez Ruiz Senior Software Design Engineer Microsoft Corporation.](https://reader035.fdocuments.in/reader035/viewer/2022070404/56649f345503460f94c51c05/html5/thumbnails/22.jpg)
Q&A