Doing Modern Web, aka JavaScript and HTML5 in the Enterprise
1. Doing Modern Web, aka
JavaScript and HTML5 In The
Enterprise
Chris Love
@ChrisLove
ProfessionalASPNET.com
2. Who Am I?
ASP.NET MVP
ASP Insider
Internet Explorer User Agent
Author
Speaker
Tweaker, Lover of Mobile Web, JavaScript, CSS & HTML5
3. Podcast Interviews
The Tablet Show
Chris Love Talks Surface Pro, Mobile Development and More
http://thetabletshow.com/?ShowNum=80
Chris Love Does Enterprise Mobility
http://thetabletshow.com/?ShowNum=22
Deep Fried Bytes
Mobile Web Is Not What The Other Guys Say It Is
http://deepfriedbytes.com/podcast/episode-74-mobile-web-is-not-what-the-other-guys-say-it-is/
Technology & Friends
Talking About Touch & Mobile Web
http://bit.ly/12IduAd
4. JavaScript Libraries
DeepTissueJS – A Touch Gesture Abstraction Library
http://deeptissuejs.com
PanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5
https://github.com/docluv/panoramajs
ToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phone
http://toolbarjs.com
Coming Soon!
SPA – Single Page Application Router, View Manager
Backpack – Markup Manager leveraging LocalStorage
FannyPack – Markup Manager leveraging on page markup
??????
5. Resources
Slide Deck – http://www.slideshare.net/docluv <- Only URL U
Need!
Source Code – Coming Soon!
Live Site - Coming Soon!
17. What a Modern Web App Is
(API + HTML5 + CSS3 + JavaScript + Standards
Compliant Browser) *
(Touch + Mobility)
=== Great Single Page Application
18. What is the API?
The window to and from your data
Can be Restful, but more importantly should use JSON
Can be hosted internally or in the cloud
As the web guy I could care less what lies behind the API,
just give me the JSON baby
19. What is HTML5?
Natural progression of HTML that is a living breathing
specification that defines how developers can
confidently create modern web sites with structured
markup, CSS and JavaScript
20. What is CSS3?
Natural progression of CSS that is a living breathing
specification that defines what developers can use to
control the rendering, animations and other really cool
things with their HTML elements.
21. What is JavaScript?
It is not C# or Java so stop writing it that way!
It is a protypical, very dynamic language
Provides a rich way to drive great user experiences in the
browser and now do cool things on the server
36. What Does the Modern Enterprise Web App
Topology look like?
Data
API
Browser/AJAX Layer
37. What does the AJAX Layer Look Like?
HTML
CSS
JavaScript
38. Enterprise JavaScript Apps Need to Be Modular
Do Not Use the Global Namespace
Use a Module
JavaScript Object – {}
Anonymous Methods
Make it Extensible
Think Like jQuery
39. So How Do You Manage A JavaScript App?
Project Structure
‘Compiling’
Testing
Bundling & Minification
Build System
I Like GruntJs