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, CS...
Podcast Interviews
The Tablet Show
Chris Love Talks Surface Pro, Mobile Development and More
http://thetabletshow.com/?Sho...
JavaScript Libraries
DeepTissueJS – A Touch Gesture Abstraction Library
http://deeptissuejs.com
PanoramaJS – JavaScript Li...
Resources
Slide Deck – http://www.slideshare.net/docluv
Only URL U Need!
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 +
StandardsCompliant Browser) *
(Touch + Mobility + Performance)...
What Does the Modern Enterprise Web App
Topology look like?
Data
API
Browser/AJAX Layer
The Modern Web Hour Glass
HTML5
JavaScript
CSS3
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 data
Can be Restful, but more importantly should use JSON
Can be hosted inter...
What is HTML5?
Natural progression of HTML that is a living breathing
specification that defines how developers can
confid...
What is CSS3?
Natural progression of CSS that is a living breathing
specification that defines what developers can use to
...
What is JavaScript?
It is not C# or Java so stop writing it that way!
It is a protypical, very dynamic language
Provides a...
Oh No!! Not JavaScript!!
Enterprise Developers Really Do Not Understand
JavaScript
Enterprise JavaScript
var helloWorld = function (message) {
if (!message) {
message = "Hello World";;;;;;
}
alert(message)...
Relax – It’s Not That Hard
C-like Syntax
Very Modular and Extensible
Understand Scope & Context
What is this?
Has Core Set...
What is a SPA?
Single Page App
Has 1 to many views
Heavy JavaScript
Enterprise Quality Applications Should Be
Maintainable
Scalable
Testable
Deployable
Have Tangible ROI
Of Course All Enterprise
Applications Meet
Those Criteria....
What is Maintainable JavaScript?
Decoupled
Extensible
Structured
What is Scalable JavaScript?
• Should Work As More Users Enter
• Should Keep Working On Errors
Extensible
• A Core App
• Add Functionality As Needed
Core
Module
Module
Module
Enterprise JavaScript Apps Need to Be Modular
Do Not Use the Global Namespace
Use a Module
JavaScript Object – {}
Anonymou...
What is Testable JavaScript?
Small Testable Units of Work
Be Able to Be Automated
Easy to Understand Libraries
What is Deployable JavaScript?
Continuous Build
Auto Deployment
Auto Testing (yes those pesky unit tests)
What is Tangible JavaScript?
Easy to Maintain
Reduced Bugs
Low Barrier to Entry for Future Devs
Tangible ROI
• Should Improve Business Process(es) by Reducing Time Needed
• Reducing or Eliminating Manual Processes
• Im...
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’
Testing
Bundling & Minification
Build System
I Like G...
Demo Time!
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Upcoming SlideShare
Loading in …5
×

Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp

1,784 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,784
On SlideShare
0
From Embeds
0
Number of Embeds
72
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp

  1. 1. Doing Modern Web, aka JavaScript and HTML5 In The Enterprise Chris Love @ChrisLove ProfessionalASPNET.com
  2. 2. Who Am I? ASP.NET MVP ASP Insider Internet Explorer User Agent Author Speaker Tweaker, Lover of Mobile Web, JavaScript, CSS & HTML5
  3. 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. 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. 5. Resources Slide Deck – http://www.slideshare.net/docluv Only URL U Need!
  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 Need Help!
  15. 15. Where Should They Start
  16. 16. What a Modern Web App Is (API + HTML5 + CSS3 + JavaScript + StandardsCompliant Browser) * (Touch + Mobility + Performance) === Great Single Page Application
  17. 17. What Does the Modern Enterprise Web App Topology look like? Data API Browser/AJAX Layer
  18. 18. The Modern Web Hour Glass HTML5 JavaScript CSS3 ASP.NET.IIS DB – SQL Server/NoSQL
  19. 19. What does the AJAX Layer Look Like? HTML CSS JavaScript
  20. 20. 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
  21. 21. 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
  22. 22. 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.
  23. 23. 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
  24. 24. Oh No!! Not JavaScript!!
  25. 25. Enterprise Developers Really Do Not Understand JavaScript
  26. 26. Enterprise JavaScript var helloWorld = function (message) { if (!message) { message = "Hello World";;;;;; } alert(message);;;;;;;;;;;;;;;;;;; };;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; http://stackoverflow.com/questions/5671286/what-is-enterprise-javascript
  27. 27. 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#
  28. 28. What is a SPA? Single Page App Has 1 to many views Heavy JavaScript
  29. 29. Enterprise Quality Applications Should Be Maintainable Scalable Testable Deployable Have Tangible ROI
  30. 30. Of Course All Enterprise Applications Meet Those Criteria....
  31. 31. What is Maintainable JavaScript? Decoupled Extensible Structured
  32. 32. What is Scalable JavaScript? • Should Work As More Users Enter • Should Keep Working On Errors
  33. 33. Extensible • A Core App • Add Functionality As Needed Core Module Module Module
  34. 34. 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
  35. 35. What is Testable JavaScript? Small Testable Units of Work Be Able to Be Automated Easy to Understand Libraries
  36. 36. What is Deployable JavaScript? Continuous Build Auto Deployment Auto Testing (yes those pesky unit tests)
  37. 37. What is Tangible JavaScript? Easy to Maintain Reduced Bugs Low Barrier to Entry for Future Devs
  38. 38. Tangible ROI • Should Improve Business Process(es) by Reducing Time Needed • Reducing or Eliminating Manual Processes • Improve Quality by Eliminating Errors and Defects
  39. 39. Sounds Great, but Isn't that What Everyone Already Does?
  40. 40. Seriously Have You Ever Worked in An Enterprise?
  41. 41. So How Do You Manage A JavaScript App? Project Structure ‘Compiling’ Testing Bundling & Minification Build System I Like GruntJs
  42. 42. Demo Time!

×