SlideShare a Scribd company logo
1 of 34
Download to read offline
SINGLE-PAGE APPLICATIONS
      Should you make the shift?




                                   Adam Mokan
                                   Desert Code Camp
                                   Nov 17, 2012
Adam Mokan
Sr Application Architect
       Five9, Inc


    @adammokan
WHAT DEFINES A SINGLE-PAGE
      APPLICATION?
KEY CHARACTERISTICS
• No   reload or ‘refresh’ within the user interface
• User   experience similar to Flash and Java
• Much    more ‘state’ and logic on the client
• Gmail   is a good example
WHAT ARE THE GAINS?

   • Deployment     ease
   • Feature-rich   UI
   • No   plugins
   • Cross-platform      and device
   • Web   browser as a runtime
   • HTML5, CSS3, Web        Sockets*
GAINS OFTEN NOT CONSIDERED

• REST API  can be consumed by other clients and makes a great
 integration point.

• Flexibility
          to shift your application/UI in directions not
 considered.

• Many   client distribution options.

• Parallel   development opportunities.
IT’S NOT FOR EVERYONE
         Yet
CONSIDERATIONS
• How   ready is your team?

• Doyou have a JSON-based
 REST API?

• How  much JavaScript
 experience? Especially over the
 past couple years.

• Do you have specific browsers
 or platforms to target?
FIRST STEP IDEAS



• Dashboard       interfaces

• Portions   of a larger application for use on mobile or
 tablets

• A ‘todo’ list   ( I am not being serious here )

   If this idea is new to you and your team, start small.
WHICH FRAMEWORK???
WHICH FRAMEWORK???

• Backbone.js

• Spine.js

• Knockout.js

• Ember.js

•   and hundreds more!
‘Todo’ examples only go so
                           fa   r...




          http://todomvc.com


       But they are beneficial
WHAT ARE WE USING ?
•   Backbone.js (base lib)

•   Backbone.Marionette
    (application framework, composite
    views, and more)

•   Handlebars.js (view templating)

•   AMD/RequireJS (dependency
    management, module loading)

•   Rivets.js (UI binding/Observables)
WHAT ARE WE USING ?
•   Backbone.js (base lib)
                                            Backbone.js is
                                                              like a toolbox
•   Backbone.Marionette                     with a few ba
                                                             sic items in it
    (application framework, composite                                       .
    views, and more)                      You will not b
                                                          uild a skyscra
                                          without addit                   per
•   Handlebars.js (view templating)                      ional knowled
                                         specialty tool                   ge,
                                                        s, and manpo
•   AMD/RequireJS (dependency                                           wer.
    management, module loading)

•   Rivets.js (UI binding/Observables)
USE THE ‘LEGO’ APPROACH
THINGS TO PLAN FOR

• Plan   for shifts in client-side technology.

• You    will spend considerable time refactoring.

• Ifin a Scrum environment, plan time for refactoring every
  other sprint or so.

• Set   proper expectations with stakeholders and management.
DEVELOP YOUR TEAM
• Invest   in learning and enable developers to do the same
  • Try   to keep up, but don’t expect to follow everything.
• Keep     moving forward
  • Even    if things are not perfect, because they will not be!
  • Extract   what works and refactor.
• Step    back and look at your development workflow.
  • What     can be improved?
TOOLING
Optimize Your Workflow
TOOLING
•   Browser Dev Tools

    •   JavaScript console

    •   Debugging

•   Builds

    •   File Concatenation

    •   File Minification

•   JavaScript Transcompilers

    •   CoffeeScript

    •   TypeScript

•   Node.js

    •   It’s not only useful for 4 line web servers
HOW WE HAVE HANDLED
     THE BUILD PROCESS

• Custom    CLI tool built upon
 Grunt.js

• Evaluated
          Google’s Yeoman
 and many others

• Focused on consistency
 across teams                     http://gruntjs.com/
EXAMPLE OF A FULL-FEATURE
         SYSTEM

• Brunch      http://brunch.io/

 • Application ‘skeletons’ or     boilerplate templates

 • JavaScript, CoffeeScript, and    others

 • Multiple   frameworks, but primarily Backbone.js

 • Combines      project layout, builds, test runners, and dev server
But the re are others!



• Backbone   Boilerplate

• Google Yeoman

• Ember.js
MODULAR CODE
   Plan for disaster
THE OLD APPROACH


• LargeJavaScript files crossing
 multiple concerns

• Dependency   chain managed
 manually
TODAY


• DiscreteJavaScript files and
 structure based upon logical
 area of application

• Dependency management
 managed by a module
 loader
AMD & REQUIREJS
WHAT AMD/REQUIREJS
         HELPED US WITH

• Difficult   and/or complex dependency issues

• Created    a code-base that is easier for new developers to pick
 up

• Flexible   build strategies
LOOSE COUPLING
MEDIATORS & EVENT
  AGGREGATORS
              Avoid direct
             communication
               between
               modules

              Look for bad
                patterns
               developing
             between view
              modules, in
               par ticular
TESTING

• Jasmine   for unit testing
• Selenium Webdriver      for integration testing
• This   has been neglected, but is getting better
RESOURCES MENTIONED
                    A bit.ly bundle with links to
                      frameworks and tools
                    mentioned in addition to a
                     couple fairly new books.




http://bit.ly/dcc-single-page-app-resources
THANK YOU !

Adam Mokan
 @adammokan

More Related Content

What's hot

Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!Serdar Basegmez
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Jeremy Likness
 
DeveloperDeveloperDeveloper! Sydney 2012
DeveloperDeveloperDeveloper! Sydney 2012DeveloperDeveloperDeveloper! Sydney 2012
DeveloperDeveloperDeveloper! Sydney 2012kittenthecat
 
Web Frameworks of the Future: Flex, GWT, Grails and Rails
Web Frameworks of the Future: Flex, GWT, Grails and RailsWeb Frameworks of the Future: Flex, GWT, Grails and Rails
Web Frameworks of the Future: Flex, GWT, Grails and RailsMatt Raible
 
Frontend Application Architecture, Patterns, and Workflows
Frontend Application Architecture, Patterns, and WorkflowsFrontend Application Architecture, Patterns, and Workflows
Frontend Application Architecture, Patterns, and WorkflowsTreasure Data, Inc.
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jeresig
 
Javascript Frameworks
Javascript FrameworksJavascript Frameworks
Javascript FrameworksMitesh Gandhi
 
An Intense Overview of the React Ecosystem
An Intense Overview of the React EcosystemAn Intense Overview of the React Ecosystem
An Intense Overview of the React EcosystemRami Sayar
 
Adobe AEM CQ5 - Developer Introduction
Adobe AEM CQ5 - Developer IntroductionAdobe AEM CQ5 - Developer Introduction
Adobe AEM CQ5 - Developer IntroductionYash Mody
 
從狗熊到英雄 - 我的.Net 6 blazor新體驗
從狗熊到英雄 - 我的.Net 6 blazor新體驗從狗熊到英雄 - 我的.Net 6 blazor新體驗
從狗熊到英雄 - 我的.Net 6 blazor新體驗Ron Zhong
 
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014Viktor Vogel
 
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical UniversityASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical UniversitySyed Shanu
 
Building and Managing Projects with Maven
Building and Managing Projects with MavenBuilding and Managing Projects with Maven
Building and Managing Projects with MavenKhan625
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016Matt Raible
 
Here Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressHere Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressRami Sayar
 

What's hot (20)

Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with angular js
 
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
Engage 2015 - 10 Mistakes You and Every XPages Developer Make. Yes, I said YOU!
 
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
Wintellect - Devscovery - Enterprise JavaScript Development 2 of 2
 
DeveloperDeveloperDeveloper! Sydney 2012
DeveloperDeveloperDeveloper! Sydney 2012DeveloperDeveloperDeveloper! Sydney 2012
DeveloperDeveloperDeveloper! Sydney 2012
 
Web Frameworks of the Future: Flex, GWT, Grails and Rails
Web Frameworks of the Future: Flex, GWT, Grails and RailsWeb Frameworks of the Future: Flex, GWT, Grails and Rails
Web Frameworks of the Future: Flex, GWT, Grails and Rails
 
Frontend Application Architecture, Patterns, and Workflows
Frontend Application Architecture, Patterns, and WorkflowsFrontend Application Architecture, Patterns, and Workflows
Frontend Application Architecture, Patterns, and Workflows
 
Selenium practical
Selenium practicalSelenium practical
Selenium practical
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010
 
Javascript Frameworks
Javascript FrameworksJavascript Frameworks
Javascript Frameworks
 
An Intense Overview of the React Ecosystem
An Intense Overview of the React EcosystemAn Intense Overview of the React Ecosystem
An Intense Overview of the React Ecosystem
 
Adobe AEM CQ5 - Developer Introduction
Adobe AEM CQ5 - Developer IntroductionAdobe AEM CQ5 - Developer Introduction
Adobe AEM CQ5 - Developer Introduction
 
MEAN Stack
MEAN Stack MEAN Stack
MEAN Stack
 
從狗熊到英雄 - 我的.Net 6 blazor新體驗
從狗熊到英雄 - 我的.Net 6 blazor新體驗從狗熊到英雄 - 我的.Net 6 blazor新體驗
從狗熊到英雄 - 我的.Net 6 blazor新體驗
 
Desktop Intro
Desktop IntroDesktop Intro
Desktop Intro
 
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
Joomla! multiplied - How to run Multi-Sites - JandBeyond 2014
 
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical UniversityASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
ASP.NET MVC, AngularJS CRUD for Azerbaijan Technical University
 
Building and Managing Projects with Maven
Building and Managing Projects with MavenBuilding and Managing Projects with Maven
Building and Managing Projects with Maven
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx France 2016
 
Here Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressHere Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPress
 
Maven
Maven Maven
Maven
 

Similar to Single Page Applications - Desert Code Camp 2012

Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014Phil Leggetter
 
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
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Reviewnetc2012
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to conceptsAbhishek Sur
 
Angular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and WorkshopAngular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and WorkshopNitin Bhojwani
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksFITC
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - IntroductionSagar Acharya
 
Comparison of Java Web Application Frameworks
Comparison of Java Web Application FrameworksComparison of Java Web Application Frameworks
Comparison of Java Web Application FrameworksAngelin R
 
Transitioning Groupon to Node.js - EmpireJS 2014
Transitioning Groupon to Node.js - EmpireJS 2014Transitioning Groupon to Node.js - EmpireJS 2014
Transitioning Groupon to Node.js - EmpireJS 2014Sean McCullough
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETAlan Hecht
 
Building software using Rich Clients Platforms Rikard Thulin
Building software using Rich Clients Platforms Rikard ThulinBuilding software using Rich Clients Platforms Rikard Thulin
Building software using Rich Clients Platforms Rikard ThulinRikard Thulin
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.jsKasey McCurdy
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkRajitha Pathiraja
 
Internship softwaretraining@ijse
Internship softwaretraining@ijseInternship softwaretraining@ijse
Internship softwaretraining@ijseJinadi Rashmika
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?Balajihope
 

Similar to Single Page Applications - Desert Code Camp 2012 (20)

Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
Using BladeRunnerJS to Build Front-End Apps that Scale - Fluent 2014
 
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 
 
Frameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic ReviewFrameworks Galore: A Pragmatic Review
Frameworks Galore: A Pragmatic Review
 
Spring
SpringSpring
Spring
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
Angular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and WorkshopAngular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and Workshop
 
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript FrameworksBuilding Enterprise Grade Front-End Applications with JavaScript Frameworks
Building Enterprise Grade Front-End Applications with JavaScript Frameworks
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
 
Comparison of Java Web Application Frameworks
Comparison of Java Web Application FrameworksComparison of Java Web Application Frameworks
Comparison of Java Web Application Frameworks
 
PaaS with Java
PaaS with JavaPaaS with Java
PaaS with Java
 
Transitioning Groupon to Node.js - EmpireJS 2014
Transitioning Groupon to Node.js - EmpireJS 2014Transitioning Groupon to Node.js - EmpireJS 2014
Transitioning Groupon to Node.js - EmpireJS 2014
 
Intro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NETIntro to SPA using JavaScript & ASP.NET
Intro to SPA using JavaScript & ASP.NET
 
Building software using Rich Clients Platforms Rikard Thulin
Building software using Rich Clients Platforms Rikard ThulinBuilding software using Rich Clients Platforms Rikard Thulin
Building software using Rich Clients Platforms Rikard Thulin
 
Mean stack
Mean stackMean stack
Mean stack
 
Web frameworks
Web frameworksWeb frameworks
Web frameworks
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.js
 
spring
springspring
spring
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web Framework
 
Internship softwaretraining@ijse
Internship softwaretraining@ijseInternship softwaretraining@ijse
Internship softwaretraining@ijse
 
What is Mean Stack Development ?
What is Mean Stack Development ?What is Mean Stack Development ?
What is Mean Stack Development ?
 

Recently uploaded

Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...panagenda
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Français Patch Tuesday - Avril
Français Patch Tuesday - AvrilFrançais Patch Tuesday - Avril
Français Patch Tuesday - AvrilIvanti
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneUiPathCommunity
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesManik S Magar
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesThousandEyes
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Jeffrey Haguewood
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 

Recently uploaded (20)

Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
Why device, WIFI, and ISP insights are crucial to supporting remote Microsoft...
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Français Patch Tuesday - Avril
Français Patch Tuesday - AvrilFrançais Patch Tuesday - Avril
Français Patch Tuesday - Avril
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
WomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyoneWomenInAutomation2024: AI and Automation for eveyone
WomenInAutomation2024: AI and Automation for eveyone
 
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotesMuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyesAssure Ecommerce and Retail Operations Uptime with ThousandEyes
Assure Ecommerce and Retail Operations Uptime with ThousandEyes
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
Email Marketing Automation for Bonterra Impact Management (fka Social Solutio...
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 

Single Page Applications - Desert Code Camp 2012

  • 1. SINGLE-PAGE APPLICATIONS Should you make the shift? Adam Mokan Desert Code Camp Nov 17, 2012
  • 2. Adam Mokan Sr Application Architect Five9, Inc @adammokan
  • 3. WHAT DEFINES A SINGLE-PAGE APPLICATION?
  • 4. KEY CHARACTERISTICS • No reload or ‘refresh’ within the user interface • User experience similar to Flash and Java • Much more ‘state’ and logic on the client • Gmail is a good example
  • 5.
  • 6.
  • 7. WHAT ARE THE GAINS? • Deployment ease • Feature-rich UI • No plugins • Cross-platform and device • Web browser as a runtime • HTML5, CSS3, Web Sockets*
  • 8. GAINS OFTEN NOT CONSIDERED • REST API can be consumed by other clients and makes a great integration point. • Flexibility to shift your application/UI in directions not considered. • Many client distribution options. • Parallel development opportunities.
  • 9. IT’S NOT FOR EVERYONE Yet
  • 10. CONSIDERATIONS • How ready is your team? • Doyou have a JSON-based REST API? • How much JavaScript experience? Especially over the past couple years. • Do you have specific browsers or platforms to target?
  • 11. FIRST STEP IDEAS • Dashboard interfaces • Portions of a larger application for use on mobile or tablets • A ‘todo’ list ( I am not being serious here ) If this idea is new to you and your team, start small.
  • 13. WHICH FRAMEWORK??? • Backbone.js • Spine.js • Knockout.js • Ember.js • and hundreds more!
  • 14. ‘Todo’ examples only go so fa r... http://todomvc.com But they are beneficial
  • 15. WHAT ARE WE USING ? • Backbone.js (base lib) • Backbone.Marionette (application framework, composite views, and more) • Handlebars.js (view templating) • AMD/RequireJS (dependency management, module loading) • Rivets.js (UI binding/Observables)
  • 16. WHAT ARE WE USING ? • Backbone.js (base lib) Backbone.js is like a toolbox • Backbone.Marionette with a few ba sic items in it (application framework, composite . views, and more) You will not b uild a skyscra without addit per • Handlebars.js (view templating) ional knowled specialty tool ge, s, and manpo • AMD/RequireJS (dependency wer. management, module loading) • Rivets.js (UI binding/Observables)
  • 17. USE THE ‘LEGO’ APPROACH
  • 18. THINGS TO PLAN FOR • Plan for shifts in client-side technology. • You will spend considerable time refactoring. • Ifin a Scrum environment, plan time for refactoring every other sprint or so. • Set proper expectations with stakeholders and management.
  • 19. DEVELOP YOUR TEAM • Invest in learning and enable developers to do the same • Try to keep up, but don’t expect to follow everything. • Keep moving forward • Even if things are not perfect, because they will not be! • Extract what works and refactor. • Step back and look at your development workflow. • What can be improved?
  • 21. TOOLING • Browser Dev Tools • JavaScript console • Debugging • Builds • File Concatenation • File Minification • JavaScript Transcompilers • CoffeeScript • TypeScript • Node.js • It’s not only useful for 4 line web servers
  • 22. HOW WE HAVE HANDLED THE BUILD PROCESS • Custom CLI tool built upon Grunt.js • Evaluated Google’s Yeoman and many others • Focused on consistency across teams http://gruntjs.com/
  • 23. EXAMPLE OF A FULL-FEATURE SYSTEM • Brunch http://brunch.io/ • Application ‘skeletons’ or boilerplate templates • JavaScript, CoffeeScript, and others • Multiple frameworks, but primarily Backbone.js • Combines project layout, builds, test runners, and dev server
  • 24. But the re are others! • Backbone Boilerplate • Google Yeoman • Ember.js
  • 25. MODULAR CODE Plan for disaster
  • 26. THE OLD APPROACH • LargeJavaScript files crossing multiple concerns • Dependency chain managed manually
  • 27. TODAY • DiscreteJavaScript files and structure based upon logical area of application • Dependency management managed by a module loader
  • 29. WHAT AMD/REQUIREJS HELPED US WITH • Difficult and/or complex dependency issues • Created a code-base that is easier for new developers to pick up • Flexible build strategies
  • 31. MEDIATORS & EVENT AGGREGATORS Avoid direct communication between modules Look for bad patterns developing between view modules, in par ticular
  • 32. TESTING • Jasmine for unit testing • Selenium Webdriver for integration testing • This has been neglected, but is getting better
  • 33. RESOURCES MENTIONED A bit.ly bundle with links to frameworks and tools mentioned in addition to a couple fairly new books. http://bit.ly/dcc-single-page-app-resources
  • 34. THANK YOU ! Adam Mokan @adammokan

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n