doing modern web, aka javascript and html5 in the enterprise
Post on 18-Oct-2014
1.888 views
DESCRIPTION
Some Practices and Principles to help get enterprises on the right track building modern web applications.TRANSCRIPT
![Page 1: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/1.jpg)
Doing Modern Web, aka JavaScript and HTML5 In The Enterprise
Chris Love
@ChrisLove
ProfessionalASPNET.com
![Page 2: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/2.jpg)
Who Am I?
ASP.NET MVP
ASP Insider
Internet Explorer User Agent
Author
Speaker
Tweaker, Lover of Mobile Web, JavaScript, CSS &
HTML5
![Page 3: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/3.jpg)
Podcast Interviews
The Tablet ShowChris Love Talks Surface Pro, Mobile Development and Morehttp://thetabletshow.com/?ShowNum=80
Chris Love Does Enterprise Mobilityhttp://thetabletshow.com/?ShowNum=22
Deep Fried BytesMobile Web Is Not What The Other Guys Say It Ishttp
://deepfriedbytes.com/podcast/episode-74-mobile-web-is-not-what-the-other-guys-say-it-is/
Technology & FriendsTalking About Touch & Mobile Web http://bit.ly/12IduAd
![Page 4: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/4.jpg)
JavaScript Libraries
DeepTissueJS – A Touch Gesture Abstraction Libraryhttp://deeptissuejs.com
PanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5https://github.com/docluv/panoramajs
ToolbarJS – JavaScript Library to Implement a Mobile AppBar, like Windows Phonehttp://toolbarjs.com
Coming Soon!SPA – Single Page Application Router, View ManagerBackpack – Markup Manager leveraging LocalStorageFannyPack – Markup Manager leveraging on page markup??????
![Page 5: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/5.jpg)
Resources
Slide Deck – http://www.slideshare.net/docluv <- Only
URL U Need!
Source Code – Coming Soon!
Live Site - Coming Soon!
![Page 6: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/6.jpg)
The Enterprise is a radically different world from a startup, small, consumer web development shop.
![Page 7: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/7.jpg)
Enterprises - Tend to focus on .NET
![Page 8: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/8.jpg)
Non-Enterprises - Tend to focus on NodeJs, Ruby, PHP and a few other server-side platforms
![Page 9: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/9.jpg)
Enterprises - Have large and ‘small’ teams
![Page 10: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/10.jpg)
Non-Enterprises - Have Small teams
![Page 11: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/11.jpg)
Enterprises - Have DBAs
![Page 12: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/12.jpg)
Non-Enterprises - Use NoSQL
![Page 13: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/13.jpg)
Enterprises - Get Paid Real Salaries
![Page 14: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/14.jpg)
Non-Enterprises – Get Lots Of Free Pizza
![Page 15: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/15.jpg)
In Short -Enterprises Need Help!
![Page 16: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/16.jpg)
Where Should They Start
![Page 17: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/17.jpg)
What a Modern Web App Is
(API + HTML5 + CSS3 + JavaScript + Standards Compliant Browser) *
(Touch + Mobility) === Great Single Page Application
![Page 18: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/18.jpg)
What is the API?
The window to and from your dataCan be Restful, but more importantly should use JSONCan 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
![Page 19: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/19.jpg)
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
![Page 20: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/20.jpg)
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.
![Page 21: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/21.jpg)
What is JavaScript?
It is not C# or Java so stop writing it that way!It is a protypical, very dynamic languageProvides a rich way to drive great user experiences in the browser and now do cool things on the server
![Page 22: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/22.jpg)
Oh No!! Not JavaScript!!
![Page 23: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/23.jpg)
What is a SPA?
Single Page AppHas 1 to many viewsHeavy JavaScript
![Page 24: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/24.jpg)
Enterprise Developers Really Do Not Understand JavaScript
![Page 25: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/25.jpg)
Enterprise Quality Applications Should Be
MaintainableScalableTestableDeployableHave Tangible ROI
![Page 26: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/26.jpg)
Enterprise Quality Applcations Should Be
MaintainableScalableTestableDeployableHave Tangible ROI
![Page 27: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/27.jpg)
Of Course All Enterprise Applications Meet Those Criteria....
![Page 28: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/28.jpg)
Enterprise Quality Applications Should Be
MaintainableScalableTestableDeployableHave Tangible ROI
![Page 29: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/29.jpg)
What is Maintainable JavaScript?
DecoupledExtensibleStructured
![Page 30: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/30.jpg)
What is Scalable JavaScript?
Can handle large and small loads effectivelyGreat Performance
![Page 31: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/31.jpg)
What is Testable JavaScript?
Small Testable Units of WorkBe Able to Be AutomatedEasy to Understand Libraries
![Page 32: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/32.jpg)
What is Deployable JavaScript?
Continuous BuildAuto DeploymentAuto Testing (yes those pesky unit tests)
![Page 33: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/33.jpg)
What is Tangible JavaScript?
Easy to MaintainReduced BugsLow Barrier to Entry for Future Devs
![Page 34: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/34.jpg)
Sounds Great, but Isn't that What Everyone Already Does?
![Page 35: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/35.jpg)
Seriously Have You Ever Worked in An Enterprise?
![Page 36: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/36.jpg)
What Does the Modern Enterprise Web App Topology look like?
Data
API
Browser/AJAX Layer
![Page 37: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/37.jpg)
What does the AJAX Layer Look Like?
HTML
CSS
JavaScript
![Page 38: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/38.jpg)
Enterprise JavaScript Apps Need to Be Modular
Do Not Use the Global NamespaceUse a Module
JavaScript Object – {}Anonymous MethodsMake it ExtensibleThink Like jQuery
![Page 39: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/39.jpg)
So How Do You Manage A JavaScript App?
Project Structure‘Compiling’TestingBundling & Minification
Build System
I Like GruntJs
![Page 40: Doing Modern Web, aka JavaScript and HTML5 in the Enterprise](https://reader033.vdocuments.mx/reader033/viewer/2022061105/5442554aafaf9fef098b4602/html5/thumbnails/40.jpg)
Demo Time!