Some Practices and Principles to help get enterprises on the right track building modern web applications.

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!
Source Code – Coming Soon!
Live Site - Coming Soon!

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 + Standards
Compliant Browser) *
(Touch + Mobility)
=== Great Single Page Application

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

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

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

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

22. Oh No!! Not JavaScript!!

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

24. Enterprise Developers Really Do Not Understand
JavaScript

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

26. Enterprise Quality Applcations Should Be
Maintainable
Scalable
Testable
Deployable
Have Tangible ROI

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

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

29. What is Maintainable JavaScript?
Decoupled
Extensible
Structured

30. What is Scalable JavaScript?
Can handle large and small loads effectively
Great Performance

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

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

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

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

35. Seriously Have You Ever
Worked in An Enterprise?

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

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

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

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

40. Demo Time!