Today we have a plethora of JavaScript frameworks to choose from. Each framework comes with its own advantages and disadvantages. For sure the concept “one size fits all” doesn’t work in this context.
Traditionally scripting languages are notorious when it comes to writing modular maintainable applications and end up in a big ball of mud.
If the chosen framework doesn’t match the business requirement, the problem of rewriting applications will be on the cards for sure.
In this Session, I want to take an example scenario, Look at the various options available and choose the framework which will fit a business Requirement.
We will take a look at
1. Full Stack Vs Non Full Stack Frameworks
2. Frameworks Vs Libraries
3. What are the bare minimum categories of these libraries/frameworks required to do a simple application?
4. Take a look at each category and select a framework which supports the business requirement.
As always, Technology Selection is always based on the Business context/requirement.
4. Choosing Technology Framework
Tech Stack
Frameworks
Non Full Stack
Full Stack
Frameworks
Monoliths Modular Micro
Macro
Meteor
DOJO
FlatIron Monoliths Modular
JQuery
5. Framework vs. Library Framework
vs. Library
Framework Library
Ember,
Backbone,
Angular,
Knockout,
Meteor,
Spine, CanJS
Batman
Introducing
Enforce New Fits inside
Features in a
Structure and Application your Existing
Phased
Architecture Development Architecture
Manner
6. Bare Minimum Required Categories
Structure the
Code
Routing &
History
Bind Data Templates
to Render
Views
Communicate with
the Server to fetch
and update data
7. Structuring Code - Modularity
• Divide and Conquer
• Goals
– Do not pollute the global namespace
• To avoid namespace conflicts
– Load modules fast (even out of order)
– Execute modules in the right order
• Examples: REQUIREJS, CURLJS
8. Structuring Code – Separation of
Concerns
Backbone, Spine,
Separation of
Angular, Ember
Concerns
MVC
MVVM
Knockout Unit Tests
9. Template Engine
Templates
DOM String
Based Based
Handlebars,
Knockout Mustache,
Dust.JS
Logic Less Supports Execute in
Declarative Polyfills Templates SEO both Server
and Client
What happens to my UI Designer?
10. Data Binding
Input Intensive
Type of
Application
Mostly Read
1 way or 2 way
Client
Binding
Developer Skills
RESTful
Server
DDP
11. Client Side Architecture Diagram
Templat
Templat Templat
Templat
Template Engine
Templat
es Templat
es
es
es
Templates Knockout es
Rendered
es
Views
End to end Tests
Module Library
Route Definitions
Route Definitions
Routing Engine Route Definitions
Route Definitions
Data-binding
Sammy Route Definitions
Route Definitions
URLs / User Actions
View
Knockout
Unit Tests
Knockout
View Model
REQUIREJS
Model
JSON
JSON over REST
Server API
12. Parameters
• Is it an Enterprise Application or an
External Facing application?
• Am I developing something from scratch
or trying to use it in an existing
application?
• Do I need SEO Support?
• Do I have Accessibility requirements?
• Do I need to Support Older Browsers?
13. Parameters
• Is Readability and Maintainability a key
aspect?
• Am I going to use JavaScript in the Backend?
• What are my requirements on Performance?
• Do I need near real time updates in my
Application?
• Do I need an UI Designer to work on my
project?
• What are my current developers skillset?
14. Parameters
•How long is it in the Market?
•Documentation and Samples
•Is there any Editor support available?
•Can I Debug?
•Do I have Community Support?
•What are the dependencies?
•How much time does it take to learn?
•Will this improve my application performance?
•Can I write automated unit tests?
16. Useful Pointers
Rich JavaScript Applications – the Seven Frameworks
Choosing a JavaScript Framework
The Pros And Cons Of JavaScript Micro-Frameworks
Large-scale JavaScript Application Architecture
The Top 10 JavaScript MVC Frameworks Reviewed
Editor's Notes
Client has an Application built in DelphiNever ever thought Web Application can replace his desktop and didn’t want to migrate so farRecently had a look at outlook.com and got really impressed. Started getting a feeling if Hotmail can do this, why not us?Did some initial research and figured out about HTML5/JavaScript. Strongly believes it’s the way to move forwardWants to do a PoC and showcase it to the board to get the budget approvalWants to do enough research to understand the pros and cons before finalizing the technology stack
Layer Diagram which involves all these components and what technologies we have chosen.
Talk about the Choices and what we coveredWhy Technology Selection always based on ContextWhat is in store for you?If you are a DeveloperIf you are an ArchitectIf you are an ManagerIf you are a Business Person