Post on 27-Jan-2015
description
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!
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 + Performance)
=== Great Single Page Application
What Does the Modern Enterprise Web App Topology look like?
Data
API
Browser/AJAX Layer
The Modern Web Hour Glass
HTML5JavaScriptCSS3
ASP.NET.IIS
DB – SQL Server/NoSQL
What does the AJAX Layer Look Like?
HTML
CSS
JavaScript
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!!
Enterprise Developers Really Do Not Understand JavaScript
Enterprise JavaScript
var helloWorld = function (message) { if (!message) { message = "Hello World";;;;;; }
alert(message);;;;;;;;;;;;;;;;;;;
};;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
http://stackoverflow.com/questions/5671286/what-is-enterprise-javascript
Relax – It’s Not That Hard
C-like SyntaxVery Modular and ExtensibleUnderstand Scope & Context
What is this?Has Core Set of Object
Math, Date, Array, etcIt’s NOT C#
So Do Not Write It Like C#
What is a SPA?
Single Page AppHas 1 to many viewsHeavy JavaScript
Enterprise Quality Applications Should Be
MaintainableScalableTestableDeployableHave Tangible ROI
Of Course All Enterprise Applications Meet Those Criteria....
What is Maintainable JavaScript?
DecoupledExtensibleStructured
What is Scalable JavaScript?
• Should Work As More Users Enter• Should Keep Working On Errors
Extensible
• A Core App• Add Functionality As Needed
Core
ModuleModule
Module
Enterprise JavaScript Apps Need to Be Modular
Do Not Use the Global NamespaceUse a Module
JavaScript Object – {}Anonymous MethodsMake it ExtensibleThink Like jQuery
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
Tangible ROI
• Should Improve Business Process(es) by Reducing Time Needed• Reducing or Eliminating Manual Processes• Improve Quality by Eliminating Errors and Defects
Sounds Great, but Isn't that What Everyone Already Does?
Seriously Have You Ever Worked in An Enterprise?
So How Do You Manage A JavaScript App?
Project Structure‘Compiling’TestingBundling & Minification
Build System
I Like GruntJs
Demo Time!