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!