This document discusses doing modern web development with JavaScript and HTML5 in the enterprise. It begins by introducing the author and their background. It then discusses resources like podcast interviews and JavaScript libraries the author has created. The document goes on to summarize some key differences between enterprise and non-enterprise development. The main part of the document discusses what a modern web app is, how to structure one for the enterprise, and technologies like HTML5, CSS3, JavaScript, and APIs. It emphasizes the importance of making enterprise JavaScript apps maintainable, scalable, testable, and deployable. It also provides recommendations for managing a JavaScript app project.

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!

7. Enterprises - Tend to focus on .NET

8. Non-Enterprises - Tend to focus on NodeJs, Ruby,
PHP and a few other server-side platforms

9. Enterprises - Have large and ‘small’ teams

10. Non-Enterprises - Have Small teams

11. Enterprises - Have DBAs

12. Non-Enterprises - Use NoSQL

13. Enterprises - Get Paid Real Salaries

14. Non-Enterprises – Get Lots Of Free Pizza

15. In Short -
Enterprises Need
Help!

16. Where Should They Start

17. What a Modern Web App Is
(API + HTML5 + CSS3 + JavaScript +
StandardsCompliant Browser) *
(Touch + Mobility + Performance)
=== Great Single Page Application

18. What Does the Modern Enterprise Web App
Topology look like?
Data
API
Browser/AJAX Layer

19. The Modern Web Hour Glass
HTML5
JavaScript
CSS3
ASP.NET.IIS
DB – SQL Server/NoSQL

20. What does the AJAX Layer Look Like?
HTML
CSS
JavaScript

21. 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

22. 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

23. 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.

24. 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

25. Oh No!! Not JavaScript!!

26. Enterprise Developers Really Do Not Understand
JavaScript

27. Enterprise JavaScript
var helloWorld = function (message) {
if (!message) {
message = "Hello World";;;;;;
}
alert(message);;;;;;;;;;;;;;;;;;;
};;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
http://stackoverflow.com/questions/5671286/what-is-enterprise-javascript

28. Relax – It’s Not That Hard
C-like Syntax
Very Modular and Extensible
Understand Scope & Context
What is this?
Has Core Set of Object
Math, Date, Array, etc
It’s NOT C#
So Do Not Write It Like C#

29. What is a SPA?
Single Page App
Has 1 to many views
Heavy JavaScript

30. Enterprise Quality Applications Should Be
Maintainable
Scalable
Testable
Deployable
Have Tangible ROI

31. Of Course All Enterprise
Applications Meet
Those Criteria....

32. What is Maintainable JavaScript?
Decoupled
Extensible
Structured

33. What is Scalable JavaScript?
• Should Work As More Users Enter
• Should Keep Working On Errors

34. Extensible
• A Core App
• Add Functionality As Needed
Core
Module
Module
Module

35. 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

36. What is Testable JavaScript?
Small Testable Units of Work
Be Able to Be Automated
Easy to Understand Libraries

37. What is Deployable JavaScript?
Continuous Build
Auto Deployment
Auto Testing (yes those pesky unit tests)

38. What is Tangible JavaScript?
Easy to Maintain
Reduced Bugs
Low Barrier to Entry for Future Devs

39. Tangible ROI
• Should Improve Business Process(es) by Reducing Time Needed
• Reducing or Eliminating Manual Processes
• Improve Quality by Eliminating Errors and Defects

40. Sounds Great, but Isn't
that What Everyone
Already Does?

41. Seriously Have You Ever
Worked in An Enterprise?

42. So How Do You Manage A JavaScript App?
Project Structure
‘Compiling’
Testing
Bundling & Minification
Build System
I Like GruntJs

43. Demo Time!