doing modern web, aka javascript and html5 in the enterprise
Post on 18-Oct-2014
1.883 views
DESCRIPTION
Some Practices and Principles to help get enterprises on the right track building modern web applications.TRANSCRIPT
Doing Modern Web, aka JavaScript and HTML5 In The Enterprise
Chris Love
@ChrisLove
ProfessionalASPNET.com
Who Am I?
ASP.NET MVP
ASP Insider
Internet Explorer User Agent
Author
Speaker
Tweaker, Lover of Mobile Web, JavaScript, CSS &
HTML5
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
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??????
Resources
Slide Deck – http://www.slideshare.net/docluv <- Only
URL U Need!
Source Code – Coming Soon!
Live Site - Coming Soon!
The Enterprise is a radically different world from a startup, small, consumer web development shop.
Enterprises - Tend to focus on .NET
Non-Enterprises - Tend to focus on NodeJs, Ruby, PHP and a few other server-side platforms
Enterprises - Have large and ‘small’ teams
Non-Enterprises - Have Small teams
Enterprises - Have DBAs
Non-Enterprises - Use NoSQL
Enterprises - Get Paid Real Salaries
Non-Enterprises – Get Lots Of Free Pizza
In Short -Enterprises Need Help!
Where Should They Start
What a Modern Web App Is
(API + HTML5 + CSS3 + JavaScript + Standards Compliant Browser) *
(Touch + Mobility) === Great Single Page Application
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
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
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.
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
Oh No!! Not JavaScript!!
What is a SPA?
Single Page AppHas 1 to many viewsHeavy JavaScript
Enterprise Developers Really Do Not Understand JavaScript
Enterprise Quality Applications Should Be
MaintainableScalableTestableDeployableHave Tangible ROI
Enterprise Quality Applcations Should Be
MaintainableScalableTestableDeployableHave Tangible ROI
Of Course All Enterprise Applications Meet Those Criteria....
Enterprise Quality Applications Should Be
MaintainableScalableTestableDeployableHave Tangible ROI
What is Maintainable JavaScript?
DecoupledExtensibleStructured
What is Scalable JavaScript?
Can handle large and small loads effectivelyGreat Performance
What is Testable JavaScript?
Small Testable Units of WorkBe Able to Be AutomatedEasy to Understand Libraries
What is Deployable JavaScript?
Continuous BuildAuto DeploymentAuto Testing (yes those pesky unit tests)
What is Tangible JavaScript?
Easy to MaintainReduced BugsLow Barrier to Entry for Future Devs
Sounds Great, but Isn't that What Everyone Already Does?
Seriously Have You Ever Worked in An Enterprise?
What Does the Modern Enterprise Web App Topology look like?
Data
API
Browser/AJAX Layer
What does the AJAX Layer Look Like?
HTML
CSS
JavaScript
Enterprise JavaScript Apps Need to Be Modular
Do Not Use the Global NamespaceUse a Module
JavaScript Object – {}Anonymous MethodsMake it ExtensibleThink Like jQuery
So How Do You Manage A JavaScript App?
Project Structure‘Compiling’TestingBundling & Minification
Build System
I Like GruntJs
Demo Time!