Doing Modern Web, aka JavaScript and HTML5 in the Enterprise


Published on

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

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Doing Modern Web, aka JavaScript and HTML5 in the Enterprise

  1. 1. Doing Modern Web, akaJavaScript and HTML5 In TheEnterpriseChris
  2. 2. Who Am I?ASP.NET MVPASP InsiderInternet Explorer User AgentAuthorSpeakerTweaker, Lover of Mobile Web, JavaScript, CSS & HTML5
  3. 3. Podcast InterviewsThe Tablet ShowChris Love Talks Surface Pro, Mobile Development and More Love Does Enterprise Mobility Fried BytesMobile Web Is Not What The Other Guys Say It Is & FriendsTalking About Touch & Mobile Web
  4. 4. JavaScript LibrariesDeepTissueJS – A Touch Gesture Abstraction Libraryhttp://deeptissuejs.comPanoramaJS – JavaScript Library to Implement The Windows Phone Panorama Control in HTML5 – JavaScript Library to Implement a Mobile AppBar, like Windows Phonehttp://toolbarjs.comComing Soon!SPA – Single Page Application Router, View ManagerBackpack – Markup Manager leveraging LocalStorageFannyPack – Markup Manager leveraging on page markup??????
  5. 5. ResourcesSlide Deck – <- Only URL UNeed!Source Code – Coming Soon!Live Site - Coming Soon!
  6. 6. Enterprises - Tend to focus on .NET
  7. 7. Non-Enterprises - Tend to focus on NodeJs, Ruby,PHP and a few other server-side platforms
  8. 8. Enterprises - Have large and ‘small’ teams
  9. 9. Non-Enterprises - Have Small teams
  10. 10. Enterprises - Have DBAs
  11. 11. Non-Enterprises - Use NoSQL
  12. 12. Enterprises - Get Paid Real Salaries
  13. 13. Non-Enterprises – Get Lots Of Free Pizza
  14. 14. In Short -Enterprises NeedHelp!
  15. 15. Where Should They Start
  16. 16. What a Modern Web App Is(API + HTML5 + CSS3 + JavaScript + StandardsCompliant Browser) *(Touch + Mobility)=== Great Single Page Application
  17. 17. 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 cloudAs the web guy I could care less what lies behind the API,just give me the JSON baby
  18. 18. What is HTML5?Natural progression of HTML that is a living breathingspecification that defines how developers canconfidently create modern web sites with structuredmarkup, CSS and JavaScript
  19. 19. What is CSS3?Natural progression of CSS that is a living breathingspecification that defines what developers can use tocontrol the rendering, animations and other really coolthings with their HTML elements.
  20. 20. 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 thebrowser and now do cool things on the server
  21. 21. Oh No!! Not JavaScript!!
  22. 22. What is a SPA?Single Page AppHas 1 to many viewsHeavy JavaScript
  23. 23. Enterprise Developers Really Do Not UnderstandJavaScript
  24. 24. Enterprise Quality Applications Should BeMaintainableScalableTestableDeployableHave Tangible ROI
  25. 25. Enterprise Quality Applcations Should BeMaintainableScalableTestableDeployableHave Tangible ROI
  26. 26. Of Course All EnterpriseApplications MeetThose Criteria....
  27. 27. Enterprise Quality Applications Should BeMaintainableScalableTestableDeployableHave Tangible ROI
  28. 28. What is Maintainable JavaScript?DecoupledExtensibleStructured
  29. 29. What is Scalable JavaScript?Can handle large and small loads effectivelyGreat Performance
  30. 30. What is Testable JavaScript?Small Testable Units of WorkBe Able to Be AutomatedEasy to Understand Libraries
  31. 31. What is Deployable JavaScript?Continuous BuildAuto DeploymentAuto Testing (yes those pesky unit tests)
  32. 32. What is Tangible JavaScript?Easy to MaintainReduced BugsLow Barrier to Entry for Future Devs
  33. 33. Sounds Great, but Isntthat What EveryoneAlready Does?
  34. 34. Seriously Have You EverWorked in An Enterprise?
  35. 35. What Does the Modern Enterprise Web AppTopology look like?DataAPIBrowser/AJAX Layer
  36. 36. What does the AJAX Layer Look Like?HTMLCSSJavaScript
  37. 37. Enterprise JavaScript Apps Need to Be ModularDo Not Use the Global NamespaceUse a ModuleJavaScript Object – {}Anonymous MethodsMake it ExtensibleThink Like jQuery
  38. 38. So How Do You Manage A JavaScript App?Project Structure‘Compiling’TestingBundling & MinificationBuild SystemI Like GruntJs
  39. 39. Demo Time!