SlideShare a Scribd company logo
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
Single Page Applications - Desert Code Camp 2012
Single Page Applications - Desert Code Camp 2012
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

Getting started with angular js
Getting started with angular jsGetting started with angular js
Getting started with angular js
Maurice De Beijer [MVP]
 
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 2
Jeremy Likness
 
DeveloperDeveloperDeveloper! Sydney 2012
DeveloperDeveloperDeveloper! Sydney 2012DeveloperDeveloperDeveloper! Sydney 2012
DeveloperDeveloperDeveloper! Sydney 2012
kittenthecat
 
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
Matt Raible
 
Frontend Application Architecture, Patterns, and Workflows
Frontend Application Architecture, Patterns, and WorkflowsFrontend Application Architecture, Patterns, and Workflows
Frontend Application Architecture, Patterns, and Workflows
Treasure Data, Inc.
 
Selenium practical
Selenium practicalSelenium practical
Selenium practical
Ruslan Strazhnyk
 
jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010jQuery Keynote - Fall 2010
jQuery Keynote - Fall 2010
jeresig
 
Javascript Frameworks
Javascript FrameworksJavascript Frameworks
Javascript Frameworks
Mitesh 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 Ecosystem
Rami Sayar
 
Adobe AEM CQ5 - Developer Introduction
Adobe AEM CQ5 - Developer IntroductionAdobe AEM CQ5 - Developer Introduction
Adobe AEM CQ5 - Developer Introduction
Yash Mody
 
MEAN Stack
MEAN Stack MEAN Stack
MEAN Stack
RoshanTak1
 
從狗熊到英雄 - 我的.Net 6 blazor新體驗
從狗熊到英雄 - 我的.Net 6 blazor新體驗從狗熊到英雄 - 我的.Net 6 blazor新體驗
從狗熊到英雄 - 我的.Net 6 blazor新體驗
Ron Zhong
 
Desktop Intro
Desktop IntroDesktop 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
Viktor 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 University
Syed Shanu
 
Building and Managing Projects with Maven
Building and Managing Projects with MavenBuilding and Managing Projects with Maven
Building and Managing Projects with Maven
Khan625
 
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
Matt Raible
 
Here Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPressHere Be Dragons - Debugging WordPress
Here Be Dragons - Debugging WordPress
Rami Sayar
 
Maven
Maven Maven
Maven
Khan625
 

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 2014
Phil 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 Review
netc2012
 
Spring
SpringSpring
Spring
Suman Behara
 
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
 
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
Nitin 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 Frameworks
FITC
 
Angular JS - Introduction
Angular JS - IntroductionAngular JS - Introduction
Angular JS - Introduction
Sagar Acharya
 
Comparison of Java Web Application Frameworks
Comparison of Java Web Application FrameworksComparison of Java Web Application Frameworks
Comparison of Java Web Application Frameworks
Angelin R
 
PaaS with Java
PaaS with JavaPaaS with Java
PaaS with Java
Eberhard Wolff
 
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
Sean 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.NET
Alan 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 Thulin
Rikard Thulin
 
Mean stack
Mean stackMean stack
Mean stack
RavikantGautam8
 
Web frameworks
Web frameworksWeb frameworks
Web frameworks
Arafat Hossan
 
An introduction to Node.js
An introduction to Node.jsAn introduction to Node.js
An introduction to Node.js
Kasey McCurdy
 
spring
springspring
spring
Suman Behara
 
Selecting the Best Javascript Web Framework
Selecting the Best Javascript Web FrameworkSelecting the Best Javascript Web Framework
Selecting the Best Javascript Web Framework
Rajitha Pathiraja
 
Internship softwaretraining@ijse
Internship softwaretraining@ijseInternship softwaretraining@ijse
Internship softwaretraining@ijse
Jinadi 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

CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
bhumivarma35300
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
Shiv Technolabs
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
Axel Rennoch
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
HackersList
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
Edge AI and Vision Alliance
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 

Recently uploaded (20)

CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
High Profile Girls call Service Pune 000XX00000 Provide Best And Top Girl Ser...
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
The Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF GuideThe Role of IoT in Australian Mobile App Development - PDF Guide
The Role of IoT in Australian Mobile App Development - PDF Guide
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
The importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT StandardizationThe importance of Quality Assurance for ICT Standardization
The importance of Quality Assurance for ICT Standardization
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
How Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdfHow Social Media Hackers Help You to See Your Wife's Message.pdf
How Social Media Hackers Help You to See Your Wife's Message.pdf
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
“Deploying Large Language Models on a Raspberry Pi,” a Presentation from Usef...
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 

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
  • 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