SlideShare a Scribd company logo
1 of 8
Building complex
Single Page
Application should
be as enjoyable as
visit to a SPA
Igor Moochnick
Director, Cloud Platforms

igorm@bluemetal.com
Blog: igorshare.wordpress.com
Parts of a Web
Application



   DATA           WORKFLOW




          VIEWS              STATE
Step 1: MVC etc…
Planning SPA view layout

         Menu
                           Url: #



                           Home View

                           Url: #tasks


        View Port
                           Tasks View
Step 2:
    Templating
          Data                                     Template
[                                            <li>
    {"Subject":"task1"},                        <%= task.Subject
    {"Subject":"task2"}                      %>
]                                            </li>




                                Result


                           <li>task 1</li>
                           <li>task 2</li>
Step 3:
Modularization + AMD
Step 4: Optimization

Data pre-loading,
Bundling & Minimization
Frameworks to
know about
•   jQuery (Duh!)     • JUnit
•   Backbone.js       • JsUnit
•   Knockout          • mockJSON
•   JSRender
•   Underscore.js
•   Require.js        •   Sammy.js
•   Async.js          •   Toastr
•   Knockback.js      •   SignalR
•   Amplify.js        •   Less
•   JSON-js (json2)   •   SaSS
Questions

Contact info
        Igor Moochnick
        igorm@bluemetal.com
        @igor_moochnick
        igorshare.wordpress.co
        m

More Related Content

Similar to Building complex single page application should be as enjoyable as visit to a spa

Jquery dojo slides
Jquery dojo slidesJquery dojo slides
Jquery dojo slides
helenmga
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
Lesson 202 02 oct13-1800-ay
Lesson 202 02 oct13-1800-ayLesson 202 02 oct13-1800-ay
Lesson 202 02 oct13-1800-ay
Codecademy Ren
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites
oazabir
 

Similar to Building complex single page application should be as enjoyable as visit to a spa (20)

Starting with jQuery
Starting with jQueryStarting with jQuery
Starting with jQuery
 
Javascript first-class citizenery
Javascript first-class citizeneryJavascript first-class citizenery
Javascript first-class citizenery
 
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD CombinationLotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
Lotusphere 2012 Speedgeeking - jQuery & Domino, a RAD Combination
 
Jquery dojo slides
Jquery dojo slidesJquery dojo slides
Jquery dojo slides
 
React.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UIReact.js - and how it changed our thinking about UI
React.js - and how it changed our thinking about UI
 
jQuery - Web Engineering
jQuery - Web Engineering jQuery - Web Engineering
jQuery - Web Engineering
 
Jquery library
Jquery libraryJquery library
Jquery library
 
javascript Event Handling and introduction to event.ppt
javascript Event Handling and introduction to event.pptjavascript Event Handling and introduction to event.ppt
javascript Event Handling and introduction to event.ppt
 
CS101- Introduction to Computing- Lecture 32
CS101- Introduction to Computing- Lecture 32CS101- Introduction to Computing- Lecture 32
CS101- Introduction to Computing- Lecture 32
 
Lesson 202 02 oct13-1800-ay
Lesson 202 02 oct13-1800-ayLesson 202 02 oct13-1800-ay
Lesson 202 02 oct13-1800-ay
 
NoSQL Deepdive - with Informix NoSQL. IOD 2013
NoSQL Deepdive - with Informix NoSQL. IOD 2013NoSQL Deepdive - with Informix NoSQL. IOD 2013
NoSQL Deepdive - with Informix NoSQL. IOD 2013
 
Angularjs 2
Angularjs 2 Angularjs 2
Angularjs 2
 
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham SiddiquiJ Query (Complete Course) by Muhammad Ehtisham Siddiqui
J Query (Complete Course) by Muhammad Ehtisham Siddiqui
 
The fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose ReactThe fundamental problems of GUI applications and why people choose React
The fundamental problems of GUI applications and why people choose React
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
Disrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applicationsDisrupting the application eco system with progressive web applications
Disrupting the application eco system with progressive web applications
 
Spring batch showCase
Spring batch showCaseSpring batch showCase
Spring batch showCase
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites
 
How my team is applying JS framework for PHP projects.
How my team is applying JS framework for PHP projects.How my team is applying JS framework for PHP projects.
How my team is applying JS framework for PHP projects.
 
Headless drupal + react js Oleksandr Linyvyi
Headless drupal + react js   Oleksandr LinyvyiHeadless drupal + react js   Oleksandr Linyvyi
Headless drupal + react js Oleksandr Linyvyi
 

More from Igor Moochnick

Amazon 101 - building composite responsive apps - small
Amazon 101 - building composite responsive apps - smallAmazon 101 - building composite responsive apps - small
Amazon 101 - building composite responsive apps - small
Igor Moochnick
 
Ccr - Concurrency and Coordination Runtime
Ccr - Concurrency and Coordination RuntimeCcr - Concurrency and Coordination Runtime
Ccr - Concurrency and Coordination Runtime
Igor Moochnick
 
NO SQL: What, Why, How
NO SQL: What, Why, HowNO SQL: What, Why, How
NO SQL: What, Why, How
Igor Moochnick
 
Arch factory - Agile Design: Best Practices
Arch factory - Agile Design: Best PracticesArch factory - Agile Design: Best Practices
Arch factory - Agile Design: Best Practices
Igor Moochnick
 
Best practices for agile design
Best practices for agile designBest practices for agile design
Best practices for agile design
Igor Moochnick
 
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
Igor Moochnick
 
Building lean products with distributed agile teams
Building lean products with distributed agile teamsBuilding lean products with distributed agile teams
Building lean products with distributed agile teams
Igor Moochnick
 
Building Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.PptxBuilding Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.Pptx
Igor Moochnick
 
Application Patters For The Cloud
Application Patters For The CloudApplication Patters For The Cloud
Application Patters For The Cloud
Igor Moochnick
 

More from Igor Moochnick (20)

Continuous delivery workflow with Docker
Continuous delivery workflow with DockerContinuous delivery workflow with Docker
Continuous delivery workflow with Docker
 
Being a generalist and being great at what you do
Being a generalist and being great at what you doBeing a generalist and being great at what you do
Being a generalist and being great at what you do
 
The journey to container adoption in enterprise
The journey to container adoption in enterpriseThe journey to container adoption in enterprise
The journey to container adoption in enterprise
 
Dev ops overview (brief)
Dev ops overview (brief)Dev ops overview (brief)
Dev ops overview (brief)
 
Dev ops cd tool chains
Dev ops cd tool chainsDev ops cd tool chains
Dev ops cd tool chains
 
Orchestration musings
Orchestration musingsOrchestration musings
Orchestration musings
 
Delivery pipelines
Delivery pipelinesDelivery pipelines
Delivery pipelines
 
Amazon 101 - building composite responsive apps - small
Amazon 101 - building composite responsive apps - smallAmazon 101 - building composite responsive apps - small
Amazon 101 - building composite responsive apps - small
 
Ccr - Concurrency and Coordination Runtime
Ccr - Concurrency and Coordination RuntimeCcr - Concurrency and Coordination Runtime
Ccr - Concurrency and Coordination Runtime
 
RavenDB overview
RavenDB overviewRavenDB overview
RavenDB overview
 
NO SQL: What, Why, How
NO SQL: What, Why, HowNO SQL: What, Why, How
NO SQL: What, Why, How
 
Azure ServiceBus Queues and Topics
Azure ServiceBus Queues and TopicsAzure ServiceBus Queues and Topics
Azure ServiceBus Queues and Topics
 
Arch factory - Agile Design: Best Practices
Arch factory - Agile Design: Best PracticesArch factory - Agile Design: Best Practices
Arch factory - Agile Design: Best Practices
 
Best practices for agile design
Best practices for agile designBest practices for agile design
Best practices for agile design
 
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
Caliburn.micro jump start composite applications for WPF, Silverlight and WP7
 
Building lean products with distributed agile teams
Building lean products with distributed agile teamsBuilding lean products with distributed agile teams
Building lean products with distributed agile teams
 
Practical alm testing
Practical alm   testingPractical alm   testing
Practical alm testing
 
Putting SOAP to REST
Putting SOAP to RESTPutting SOAP to REST
Putting SOAP to REST
 
Building Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.PptxBuilding Gwt Clients For Cloud Apps.Pptx
Building Gwt Clients For Cloud Apps.Pptx
 
Application Patters For The Cloud
Application Patters For The CloudApplication Patters For The Cloud
Application Patters For The Cloud
 

Recently uploaded

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Evaluating the top large language models.pdf
Evaluating the top large language models.pdfEvaluating the top large language models.pdf
Evaluating the top large language models.pdf
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 

Building complex single page application should be as enjoyable as visit to a spa

  • 1. Building complex Single Page Application should be as enjoyable as visit to a SPA Igor Moochnick Director, Cloud Platforms igorm@bluemetal.com Blog: igorshare.wordpress.com
  • 2. Parts of a Web Application DATA WORKFLOW VIEWS STATE
  • 3. Step 1: MVC etc… Planning SPA view layout Menu Url: # Home View Url: #tasks View Port Tasks View
  • 4. Step 2: Templating Data Template [ <li> {"Subject":"task1"}, <%= task.Subject {"Subject":"task2"} %> ] </li> Result <li>task 1</li> <li>task 2</li>
  • 6. Step 4: Optimization Data pre-loading, Bundling & Minimization
  • 7. Frameworks to know about • jQuery (Duh!) • JUnit • Backbone.js • JsUnit • Knockout • mockJSON • JSRender • Underscore.js • Require.js • Sammy.js • Async.js • Toastr • Knockback.js • SignalR • Amplify.js • Less • JSON-js (json2) • SaSS
  • 8. Questions Contact info Igor Moochnick igorm@bluemetal.com @igor_moochnick igorshare.wordpress.co m