SlideShare a Scribd company logo
Enterprise JavaScript Development: Oxymoron?
 Part 2 of 2




                            Jeremy Likness (@JeremyLikness)
                            Principal Consultant
                            jlikness@wintellect.com
                                                                Copyright © 2012




consulting   training   design   debugging                    wintellect.com
Agenda
 •   JSLint / JSHint – personal style is for fashion, not code
 •   jQuery – one API to bind them all
 •   JSON and Web API – flexible information on demand
 •   Twitter Bootstrap – one layout to rule them all
 •   Underscore.js – the Swiss army knife of JavaScript
 •   Backbone.js – MVC on the client
 •   RequireJS – dependency resolution
 •   MVVM (for example, Kendo UI) – “Gotta keep „em separated”
 •   Amplify.js – publisher/subscriber for the client
 •   … and many more great projects we won‟t have time to discuss today




consulting   training   design   debugging                    wintellect.com
JSLint / JSHint
 • JSLint – JavaScript code that checks for problems in JavaScript code
 • Authored by Douglas Crockford, who helped develop the JavaScript
   language, pioneered JSON and wrote The Good Parts
 • Very restrictive – many debates over whether it is the right tool or not
 • JSHint – code quality tool, open source project
      – Fork of JSLint
      – More flexible
      – Help avoid typos and language “gotchas”
 • Available as a Visual Studio extension
      – Install from Tools -> Extensions and Updates
      – Configure – you can even error builds based on the results
      – Start early because existing code can be a bear to fix




consulting    training   design     debugging                        wintellect.com
demo
   JSLint and JSHint




consulting   training   design   debugging   wintellect.com
jQuery
 • Very “recent” API – released in 2006
 • Most popular JavaScript library in use
 • Designed to make it easier to perform client-side scripting without
   worrying about browser-specific idioms
 • Bundled with the Visual Studio 2012 MVC templates
 • Support for current Firefox, Safari, Opera, and Chrome versions, and
   Internet Explorer 6 and above
 • Support for plug-ins
      – jQuery UI
      – jQuery grid
      – jQuery mobile




consulting   training   design   debugging                     wintellect.com
demo
   jQuery




consulting   training   design   debugging   wintellect.com
JSON and Web API
 •   JSON is client-side data “for free”
 •   JSON is very human readable
 •   JSON is more compact than XML
 •   JSON is a popular format for REST
 •   Web API makes it extremely easy to stand up REST end points
 •   Web API provides true “negotiation” of content types
 •   Web API gives control over response codes
 •   Very easy syntax with jQuery




consulting   training   design   debugging                    wintellect.com
demo
   JSON and Web API




consulting   training   design   debugging   wintellect.com
Twitter Bootstrap
 •   Fixed and fluid layouts
 •   Browser compatibility
 •   Tablet and smartphone support (responsive CSS)
 •   Provides tons of CSS for existing components:
      –   Forms
      –   Labels
      –   Alert boxes
      –   Typographical sections
 • Also includes JavaScript extensions for various features
      – Alert, Tooltip, Modal, etc.
 • Great way to baseline your application
 • Completely customizable CSS




consulting    training    design      debugging               wintellect.com
demo
   Twitter Bootstrap




consulting   training   design   debugging   wintellect.com
Underscore.js
 • Swiss Army Knife
 • Lots of great collection-based functions
      –   Each
      –   Find
      –   Filter
      –   Map
      –   Reduce
      –   Pluck
 • Testers
      – Is Empty?
      – Has?
      – Etc.
 • Templates
 • Helpers i.e. bind = no more self-invoking function


consulting    training   design   debugging             wintellect.com
demo
   Underscore.js




consulting   training   design   debugging   wintellect.com
Backbone.js
 • MVC on the client (C = Collection, not Controller!)
 • Models
      –   Constructors
      –   Defaults
      –   Change notification
      –   Initialization
 • Collections
      – Auto-binding to REST end points
      – Change notification
 • Views
      – Bind to tags
      – Support for templates
 • Events
 • Navigation / Browser journal
 • Great for “data over forms” style applications

consulting     training   design   debugging             wintellect.com
demo
   Backbone.js




consulting   training   design   debugging   wintellect.com
Require.js
 •   Script file / module loader
 •   In-browser dynamic assembly of components
 •   Designed to improve speed and quality
 •   Load modules only if/when/as needed
 •   Optimizer tool can compress JavaScript into single file
 •   In each file, you use this to load other scripts that are dependencies:
     require(["app/services"], function(services) { ...




consulting   training   design   debugging                         wintellect.com
demo
   Require.js




consulting   training   design   debugging   wintellect.com
MVVM (Kendo UI)
 • Telerik
 • Knockout.js equivalent “open source” version
 • ObservableObject
      –   Bind for event handlers
      –   Get/Set for property updates with change notification
      –   toJSON for clean transport
      –   Exposes a change event
 • ObservableArray
      – Array with change tracking
      – Most basic array functions supported
 • Model – specialized ObservableObject with data definition for data
   sources
 • Validator – works with existing HTML5 tags and allows for custom
   rules


consulting    training    design     debugging                    wintellect.com
demo
   Kendo UI / MVVM




consulting   training   design   debugging   wintellect.com
Amplify.js (Postal.js)
 • JavaScript implementation of publish/subscribe pattern
 • Synchronous and asynchronous
 • No external dependencies
 • Channels for further scoping
 • Envelopes for correlation, tracking, etc.
 • Use events on objects and subscribe within modules
 • Use publisher/subscriber for decoupled communication
   between/across modules
 • Use the adapter pattern to adapt pub/sub to events
 • Wiretap to log all events




consulting   training   design   debugging                  wintellect.com
demo
   Amplify.js




consulting   training   design   debugging   wintellect.com
Recap
 •   JavaScript is good
 •   JavaScript has bad parts
 •   JavaScript can get ugly
 •   Known the language
 •   Program with JavaScript, not "C# using JavaScript"
 •   Learn how to make your code:
      –   Use the good parts (JSHint/JSLint)
      –   Cross-browser friendly (jQuery)
      –   Fluid and adaptable (Twitter Bootstrap)
      –   Data-friendly (JSON)
      –   Consistent (tools like underscore)
      –   Modular (Backbone, Requires)
      –   Testable and Extendable (MVVM)
      –   Decoupled (Postal)



consulting     training   design     debugging            wintellect.com
Links and Recommendations

 • Twitter me:
   @JeremyLikness
 • Blog me:
   http://csharperimage.jeremylikness.com/
 • JavaScript: The Good Parts
   ISBN: 0596517742




consulting   training   design   debugging   wintellect.com
Questions?




                            Jeremy Likness (@JeremyLikness)
                            Principal Consultant
                            jlikness@wintellect.com



consulting   training   design   debugging                    wintellect.com

More Related Content

What's hot

Javascript library toolbox
Javascript library toolboxJavascript library toolbox
Javascript library toolbox
Skysoul Pty.Ltd.
 
UI Standards Presentation 2
UI Standards Presentation 2UI Standards Presentation 2
UI Standards Presentation 2
Joshua Jeffryes
 
WebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page AppsWebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page Apps
Pop Apps
 
Life ray training
Life ray training Life ray training
Life ray training
Mayur Sand
 
Concrete5 workshop
Concrete5 workshopConcrete5 workshop
Concrete5 workshop
Russell Searle
 
concrete5 from developer perspective
concrete5 from developer perspectiveconcrete5 from developer perspective
concrete5 from developer perspective
mainio
 
IWMW 2002: Web standards briefing (session C2)
IWMW 2002: Web standards briefing (session C2)IWMW 2002: Web standards briefing (session C2)
IWMW 2002: Web standards briefing (session C2)
IWMW
 
Standardization in W3C
Standardization in W3CStandardization in W3C
Standardization in W3C
Jonathan Jeon
 
Building rich interface components with SharePoint
Building rich interface components with SharePointBuilding rich interface components with SharePoint
Building rich interface components with SharePoint
Louis-Philippe Lavoie
 
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?
Chris Mills
 
Practical html5
Practical html5Practical html5
Practical html5
Maurice De Beijer [MVP]
 
SPA, Scalable Application & AngularJS
SPA, Scalable Application & AngularJSSPA, Scalable Application & AngularJS
SPA, Scalable Application & AngularJS
Mitch Chen
 
Web Development
Web DevelopmentWeb Development
Web Development
Aditya Raman
 
Wheel.js
Wheel.jsWheel.js
Wheel.js
baccigalupi
 
Spa with angular
Spa with angularSpa with angular
Spa with angular
Danny Vernovsky
 
Front end developer responsibilities what does a front-end developer do?
Front end developer responsibilities  what does a front-end developer do?Front end developer responsibilities  what does a front-end developer do?
Front end developer responsibilities what does a front-end developer do?
Katy Slemon
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010
Hemant Joshi
 
Do you need jQuery in 2019?
Do you need jQuery in 2019?Do you need jQuery in 2019?
Do you need jQuery in 2019?
LindaHsu19
 
December 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig PresentationDecember 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig Presentation
Jonathan Abrams
 
JVx with VisionX and Oracle Forms integration
JVx with VisionX and Oracle Forms integrationJVx with VisionX and Oracle Forms integration
JVx with VisionX and Oracle Forms integration
SIB Visions GmbH
 

What's hot (20)

Javascript library toolbox
Javascript library toolboxJavascript library toolbox
Javascript library toolbox
 
UI Standards Presentation 2
UI Standards Presentation 2UI Standards Presentation 2
UI Standards Presentation 2
 
WebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page AppsWebNetConf 2012 - Single Page Apps
WebNetConf 2012 - Single Page Apps
 
Life ray training
Life ray training Life ray training
Life ray training
 
Concrete5 workshop
Concrete5 workshopConcrete5 workshop
Concrete5 workshop
 
concrete5 from developer perspective
concrete5 from developer perspectiveconcrete5 from developer perspective
concrete5 from developer perspective
 
IWMW 2002: Web standards briefing (session C2)
IWMW 2002: Web standards briefing (session C2)IWMW 2002: Web standards briefing (session C2)
IWMW 2002: Web standards briefing (session C2)
 
Standardization in W3C
Standardization in W3CStandardization in W3C
Standardization in W3C
 
Building rich interface components with SharePoint
Building rich interface components with SharePointBuilding rich interface components with SharePoint
Building rich interface components with SharePoint
 
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?
 
Practical html5
Practical html5Practical html5
Practical html5
 
SPA, Scalable Application & AngularJS
SPA, Scalable Application & AngularJSSPA, Scalable Application & AngularJS
SPA, Scalable Application & AngularJS
 
Web Development
Web DevelopmentWeb Development
Web Development
 
Wheel.js
Wheel.jsWheel.js
Wheel.js
 
Spa with angular
Spa with angularSpa with angular
Spa with angular
 
Front end developer responsibilities what does a front-end developer do?
Front end developer responsibilities  what does a front-end developer do?Front end developer responsibilities  what does a front-end developer do?
Front end developer responsibilities what does a front-end developer do?
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010
 
Do you need jQuery in 2019?
Do you need jQuery in 2019?Do you need jQuery in 2019?
Do you need jQuery in 2019?
 
December 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig PresentationDecember 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig Presentation
 
JVx with VisionX and Oracle Forms integration
JVx with VisionX and Oracle Forms integrationJVx with VisionX and Oracle Forms integration
JVx with VisionX and Oracle Forms integration
 

Viewers also liked

I server duress system design
 I server duress system design I server duress system design
I server duress system design
QBsoft Solutions
 
Programação de Bezerros - palcos
Programação de Bezerros - palcosProgramação de Bezerros - palcos
Programação de Bezerros - palcos
Giovanni Sandes
 
Jay Angoff: "King v. Burwell: Obamacare on the Brink?" 6.16.15
Jay Angoff: "King v. Burwell: Obamacare on the Brink?" 6.16.15Jay Angoff: "King v. Burwell: Obamacare on the Brink?" 6.16.15
Jay Angoff: "King v. Burwell: Obamacare on the Brink?" 6.16.15
reportingonhealth
 
Surviving Financial Distress1
Surviving Financial Distress1Surviving Financial Distress1
Surviving Financial Distress1
mwerling
 
Linda Greenhouse: "King v. Burwell: Obamacare on the Brink?" 6.16.15
Linda Greenhouse: "King v. Burwell: Obamacare on the Brink?" 6.16.15Linda Greenhouse: "King v. Burwell: Obamacare on the Brink?" 6.16.15
Linda Greenhouse: "King v. Burwell: Obamacare on the Brink?" 6.16.15
reportingonhealth
 
Safe cities & gender issues 14 7-2015
Safe cities & gender issues  14 7-2015Safe cities & gender issues  14 7-2015
Safe cities & gender issues 14 7-2015
VIBHUTI PATEL
 

Viewers also liked (6)

I server duress system design
 I server duress system design I server duress system design
I server duress system design
 
Programação de Bezerros - palcos
Programação de Bezerros - palcosProgramação de Bezerros - palcos
Programação de Bezerros - palcos
 
Jay Angoff: "King v. Burwell: Obamacare on the Brink?" 6.16.15
Jay Angoff: "King v. Burwell: Obamacare on the Brink?" 6.16.15Jay Angoff: "King v. Burwell: Obamacare on the Brink?" 6.16.15
Jay Angoff: "King v. Burwell: Obamacare on the Brink?" 6.16.15
 
Surviving Financial Distress1
Surviving Financial Distress1Surviving Financial Distress1
Surviving Financial Distress1
 
Linda Greenhouse: "King v. Burwell: Obamacare on the Brink?" 6.16.15
Linda Greenhouse: "King v. Burwell: Obamacare on the Brink?" 6.16.15Linda Greenhouse: "King v. Burwell: Obamacare on the Brink?" 6.16.15
Linda Greenhouse: "King v. Burwell: Obamacare on the Brink?" 6.16.15
 
Safe cities & gender issues 14 7-2015
Safe cities & gender issues  14 7-2015Safe cities & gender issues  14 7-2015
Safe cities & gender issues 14 7-2015
 

Similar to Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2

Silverlight 5
Silverlight 5Silverlight 5
Silverlight 5
Jeremy Likness
 
Sai Sharan_UI_Resume
Sai Sharan_UI_ResumeSai Sharan_UI_Resume
Sai Sharan_UI_Resume
Sai Sharan Madisetty
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
Elad Hirsch
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
Ganesh Kondal
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
NishchaiyaBayla1
 
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav TulachJDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
PROIDEA
 
Intro to modern web technology
Intro to modern web technologyIntro to modern web technology
Intro to modern web technology
Chris Love
 
Santosh_Resume_Java
Santosh_Resume_JavaSantosh_Resume_Java
Santosh_Resume_Java
SANTOSH PATTNAIK
 
A Smooth Transition to HTML5 Using MVVM
A Smooth Transition to HTML5 Using MVVMA Smooth Transition to HTML5 Using MVVM
A Smooth Transition to HTML5 Using MVVM
Chris Bannon
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
Microsoft Developer Network (MSDN) - Belgium and Luxembourg
 
Wintellect - Windows 8 for the Silverlight and WPF Developer
Wintellect   - Windows 8 for the Silverlight and WPF DeveloperWintellect   - Windows 8 for the Silverlight and WPF Developer
Wintellect - Windows 8 for the Silverlight and WPF Developer
Jeremy Likness
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
Abhishek Sur
 
Chalam_JAVA_Portal
Chalam_JAVA_PortalChalam_JAVA_Portal
Chalam_JAVA_Portal
chalamaiah thiruveedhi
 
Ramarao_US_NewNumber_Promatrix_Webservice
Ramarao_US_NewNumber_Promatrix_WebserviceRamarao_US_NewNumber_Promatrix_Webservice
Ramarao_US_NewNumber_Promatrix_Webservice
Ramarao Behara
 
Ramarao_US_NewNumber_Promatrix_Webservice
Ramarao_US_NewNumber_Promatrix_WebserviceRamarao_US_NewNumber_Promatrix_Webservice
Ramarao_US_NewNumber_Promatrix_Webservice
Ramarao Behara
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
Yakov Fain
 
Putting together a web app
Putting together a web appPutting together a web app
Putting together a web app
Ryan Lou
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
IT Arena
 
KhajavaliShaik
KhajavaliShaikKhajavaliShaik
KhajavaliShaik
khajavali shaik
 
A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)
Oursky
 

Similar to Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2 (20)

Silverlight 5
Silverlight 5Silverlight 5
Silverlight 5
 
Sai Sharan_UI_Resume
Sai Sharan_UI_ResumeSai Sharan_UI_Resume
Sai Sharan_UI_Resume
 
AngularJS - Architecture decisions in a large project 
AngularJS - Architecture decisionsin a large project AngularJS - Architecture decisionsin a large project 
AngularJS - Architecture decisions in a large project 
 
Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5Tech io spa_angularjs_20130814_v0.9.5
Tech io spa_angularjs_20130814_v0.9.5
 
Training presentation.pptx
Training presentation.pptxTraining presentation.pptx
Training presentation.pptx
 
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav TulachJDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
JDD2015: Java Everywhere Again—with DukeScript - Jaroslav Tulach
 
Intro to modern web technology
Intro to modern web technologyIntro to modern web technology
Intro to modern web technology
 
Santosh_Resume_Java
Santosh_Resume_JavaSantosh_Resume_Java
Santosh_Resume_Java
 
A Smooth Transition to HTML5 Using MVVM
A Smooth Transition to HTML5 Using MVVMA Smooth Transition to HTML5 Using MVVM
A Smooth Transition to HTML5 Using MVVM
 
Building SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.jsBuilding SPA’s (Single Page App) with Backbone.js
Building SPA’s (Single Page App) with Backbone.js
 
Wintellect - Windows 8 for the Silverlight and WPF Developer
Wintellect   - Windows 8 for the Silverlight and WPF DeveloperWintellect   - Windows 8 for the Silverlight and WPF Developer
Wintellect - Windows 8 for the Silverlight and WPF Developer
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Chalam_JAVA_Portal
Chalam_JAVA_PortalChalam_JAVA_Portal
Chalam_JAVA_Portal
 
Ramarao_US_NewNumber_Promatrix_Webservice
Ramarao_US_NewNumber_Promatrix_WebserviceRamarao_US_NewNumber_Promatrix_Webservice
Ramarao_US_NewNumber_Promatrix_Webservice
 
Ramarao_US_NewNumber_Promatrix_Webservice
Ramarao_US_NewNumber_Promatrix_WebserviceRamarao_US_NewNumber_Promatrix_Webservice
Ramarao_US_NewNumber_Promatrix_Webservice
 
Seven Versions of One Web Application
Seven Versions of One Web ApplicationSeven Versions of One Web Application
Seven Versions of One Web Application
 
Putting together a web app
Putting together a web appPutting together a web app
Putting together a web app
 
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleMeetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech People
 
KhajavaliShaik
KhajavaliShaikKhajavaliShaik
KhajavaliShaik
 
A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)A guide to hiring a great developer to build your first app (redacted version)
A guide to hiring a great developer to build your first app (redacted version)
 

Recently uploaded

GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
KAMESHS29
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
Edge AI and Vision Alliance
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 

Recently uploaded (20)

GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
RESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for studentsRESUME BUILDER APPLICATION Project for students
RESUME BUILDER APPLICATION Project for students
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
“Building and Scaling AI Applications with the Nx AI Manager,” a Presentation...
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
TrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy SurveyTrustArc Webinar - 2024 Global Privacy Survey
TrustArc Webinar - 2024 Global Privacy Survey
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 

Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2

  • 1. Enterprise JavaScript Development: Oxymoron? Part 2 of 2 Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com Copyright © 2012 consulting training design debugging wintellect.com
  • 2. Agenda • JSLint / JSHint – personal style is for fashion, not code • jQuery – one API to bind them all • JSON and Web API – flexible information on demand • Twitter Bootstrap – one layout to rule them all • Underscore.js – the Swiss army knife of JavaScript • Backbone.js – MVC on the client • RequireJS – dependency resolution • MVVM (for example, Kendo UI) – “Gotta keep „em separated” • Amplify.js – publisher/subscriber for the client • … and many more great projects we won‟t have time to discuss today consulting training design debugging wintellect.com
  • 3. JSLint / JSHint • JSLint – JavaScript code that checks for problems in JavaScript code • Authored by Douglas Crockford, who helped develop the JavaScript language, pioneered JSON and wrote The Good Parts • Very restrictive – many debates over whether it is the right tool or not • JSHint – code quality tool, open source project – Fork of JSLint – More flexible – Help avoid typos and language “gotchas” • Available as a Visual Studio extension – Install from Tools -> Extensions and Updates – Configure – you can even error builds based on the results – Start early because existing code can be a bear to fix consulting training design debugging wintellect.com
  • 4. demo JSLint and JSHint consulting training design debugging wintellect.com
  • 5. jQuery • Very “recent” API – released in 2006 • Most popular JavaScript library in use • Designed to make it easier to perform client-side scripting without worrying about browser-specific idioms • Bundled with the Visual Studio 2012 MVC templates • Support for current Firefox, Safari, Opera, and Chrome versions, and Internet Explorer 6 and above • Support for plug-ins – jQuery UI – jQuery grid – jQuery mobile consulting training design debugging wintellect.com
  • 6. demo jQuery consulting training design debugging wintellect.com
  • 7. JSON and Web API • JSON is client-side data “for free” • JSON is very human readable • JSON is more compact than XML • JSON is a popular format for REST • Web API makes it extremely easy to stand up REST end points • Web API provides true “negotiation” of content types • Web API gives control over response codes • Very easy syntax with jQuery consulting training design debugging wintellect.com
  • 8. demo JSON and Web API consulting training design debugging wintellect.com
  • 9. Twitter Bootstrap • Fixed and fluid layouts • Browser compatibility • Tablet and smartphone support (responsive CSS) • Provides tons of CSS for existing components: – Forms – Labels – Alert boxes – Typographical sections • Also includes JavaScript extensions for various features – Alert, Tooltip, Modal, etc. • Great way to baseline your application • Completely customizable CSS consulting training design debugging wintellect.com
  • 10. demo Twitter Bootstrap consulting training design debugging wintellect.com
  • 11. Underscore.js • Swiss Army Knife • Lots of great collection-based functions – Each – Find – Filter – Map – Reduce – Pluck • Testers – Is Empty? – Has? – Etc. • Templates • Helpers i.e. bind = no more self-invoking function consulting training design debugging wintellect.com
  • 12. demo Underscore.js consulting training design debugging wintellect.com
  • 13. Backbone.js • MVC on the client (C = Collection, not Controller!) • Models – Constructors – Defaults – Change notification – Initialization • Collections – Auto-binding to REST end points – Change notification • Views – Bind to tags – Support for templates • Events • Navigation / Browser journal • Great for “data over forms” style applications consulting training design debugging wintellect.com
  • 14. demo Backbone.js consulting training design debugging wintellect.com
  • 15. Require.js • Script file / module loader • In-browser dynamic assembly of components • Designed to improve speed and quality • Load modules only if/when/as needed • Optimizer tool can compress JavaScript into single file • In each file, you use this to load other scripts that are dependencies: require(["app/services"], function(services) { ... consulting training design debugging wintellect.com
  • 16. demo Require.js consulting training design debugging wintellect.com
  • 17. MVVM (Kendo UI) • Telerik • Knockout.js equivalent “open source” version • ObservableObject – Bind for event handlers – Get/Set for property updates with change notification – toJSON for clean transport – Exposes a change event • ObservableArray – Array with change tracking – Most basic array functions supported • Model – specialized ObservableObject with data definition for data sources • Validator – works with existing HTML5 tags and allows for custom rules consulting training design debugging wintellect.com
  • 18. demo Kendo UI / MVVM consulting training design debugging wintellect.com
  • 19. Amplify.js (Postal.js) • JavaScript implementation of publish/subscribe pattern • Synchronous and asynchronous • No external dependencies • Channels for further scoping • Envelopes for correlation, tracking, etc. • Use events on objects and subscribe within modules • Use publisher/subscriber for decoupled communication between/across modules • Use the adapter pattern to adapt pub/sub to events • Wiretap to log all events consulting training design debugging wintellect.com
  • 20. demo Amplify.js consulting training design debugging wintellect.com
  • 21. Recap • JavaScript is good • JavaScript has bad parts • JavaScript can get ugly • Known the language • Program with JavaScript, not "C# using JavaScript" • Learn how to make your code: – Use the good parts (JSHint/JSLint) – Cross-browser friendly (jQuery) – Fluid and adaptable (Twitter Bootstrap) – Data-friendly (JSON) – Consistent (tools like underscore) – Modular (Backbone, Requires) – Testable and Extendable (MVVM) – Decoupled (Postal) consulting training design debugging wintellect.com
  • 22. Links and Recommendations • Twitter me: @JeremyLikness • Blog me: http://csharperimage.jeremylikness.com/ • JavaScript: The Good Parts ISBN: 0596517742 consulting training design debugging wintellect.com
  • 23. Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com consulting training design debugging wintellect.com

Editor's Notes

  1. Show the original first. Run in IE8 and IE9, then show crash in IE7 – find out if students can even see where the crash is coming from.Run JSLint, note it stops after a short time and you have to keep making fixes to keep it moving. Note complaints about spaces. Show that the defect was addressed.Now configure JSHint and show that experience.
  2. Run in browser, then show IETester and run in IE 6.0Show the form, then the logic, then the view – note how this helps structure the code and make it more readable
  3. Show fetch in ChromeShow fetch in IEShow fiddler testing
  4. Show fetch in ChromeShow fetch in IEShow fiddler testing
  5. Show fetch in ChromeShow fetch in IEShow fiddler testing
  6. Show fetch in ChromeShow fetch in IEShow fiddler testing
  7. Show fetch in ChromeShow fetch in IEShow fiddler testing
  8. Show fetch in ChromeShow fetch in IEShow fiddler testing
  9. Show fetch in ChromeShow fetch in IEShow fiddler testing