Get Started with JavaScript Frameworks

(and select one for your team)
Get Started with JavaScript
Frameworks
Presenter: Christian Gaetano

Agenda
 What is a JavaScript Framework?
 Choosing a framework for your team
 The most popular JavaScript frameworks used today
 Diving into frontend frameworks and UI libraries with Wijmo
 Where to go to learn more
 Questions

What is JavaScript, anyways?
 Procedural-style language with plenty of quirks
 Emerged in the mid-90s – scripting capabilities for
the nascent web
 Lightweight, versatile, accessible
 Recent JavaScript boom – now ubiquitous
o Server-side: Node.js
o Native: Electron, Cordova, others
o Frontend: Frameworks!

Software Design Patterns: MVC
Model
• Data storage
• Integrity,
consistency
• Queries and
mutations
Controller
• Receive,
interpret, and
validate input
• Create and
update views
• Query models
View
• UI assets
• Animation,
dynamic styles
User
Receives,
inputs
data

The Need for Frameworks
 Separation of concerns on web
platform difficult
 “Spaghetti code”
 Maintenance and performance
 Frontend frameworks!
 Dynamic data binding, DOM
manipulation, event handlers –
all encapsulated!
 Reusable components
The Problem The Solution
<label>
Expiry Date: {‘ '}
<MaskedInput mask = "11/1111" name = "expiry“
placeholder = "mm/yyyy" onChange = {this._onChange} />
</label>

Recap: Why Frameworks?
1. Dynamic views
2. Maintenance of state
3. DRYness

Choosing a Framework for Your Project
1. Prioritize
2. Match
3. Real World Testing
4. Confirm
For more guidance on making a framework choice for your
project, check out the SPEC methodology in our free e-
book or at wijmo.com/spec.

Most Popular Front-end JavaScript Frameworks
Framework Name Creator/Maintainer Year Released
AngularJS Google 2010
Angular Google 2016
React Facebook 2013
Vue.js Independent 2014
Knockout Independent 2010

The Dynamic Chart Wijmo Example
 Using UI libraries with frameworks another
best practice
o Maximizes separation of concerns
o “Plug and play”
o Wijmo offers broad framework support
 Real-time, editable charts
o Dynamic nature of frameworks
o Shows how to maintain and modify state
o Fun, simple, and quick
o Does not cover setting up frameworks in
development environment, deployment

The Dynamic Chart Sample in Action
 Vanilla JavaScript

AngularJS: The Minimal, Classic Framework
 Focuses on making up for shortcomings of HTML
 Provides directives for easy data binding
 Relatively lightweight – maintains speed under stress
 Helpful utilities like filters and expressions

Markup Code Example
Data Binding
JavaScript Code-behind
ReferenceDirectives

 AngularJS

Angular: The Full-Featured Workflow Solution
 Provides an end-to-end workflow solution
 Extensive TypeScript integration – transition from OOP languages
easier
 Highly compartmentalized via components
 Performant as a standalone framework, too

Markup
Code
Example
Data
Binding
Directives
Form Modeling

 Angular

React: The JavaScript Enthusiast’s Framework
 Familiar to JavaScript developers
 Extremely rich ecosystem with officially supported plugins like react-
router
 Robust – performant in almost any scenario
 Relatively low learning curve – familiar HTML and JavaScript syntax

Markup
Code
Example
Data
Binding
Components
Event Handling
State

 React

Vue.js: The Lean, Mean Newcomer
 Small, minimalist core with plenty of available add-ons
 Offers JSX, TypeScript support via plugins
 Offers best performance in environments that support it
 Data binding implemented via native JavaScript objects

Markup
Code
Example
Data
Binding
Directives
Form Modeling
JavaScript Code-
behind Reference

 Vue.js

Knockout: The Minimalist, “Support
Everything” Option
 Supports over 99% of current browser market share
 Resembles a “library” more than framework – easy to insert into
existing applications
 Quick and easy data binding

Markup Code Example
Data Binding Event Handling

 Knockout

Recap: How the Frameworks Stack Up
o Focus on revamping HTML with
directives
o Flexible and robust for inclusion in
any app
o Provides an end-to-end workflow
solution
o Modern and fast developer platform
o Extends JavaScript to support all-in-
one UI components
o Very fast with a rich ecosystem
o Maximizes performance and offers
extensibility
o Fully modular, supports many
features of other frameworks
o Straightforward and minimalist,
preferred by .NET developers
o Offers the most wide-reaching
browser support

Where to Go from Here
 E-book: How to Choose the Best
JavaScript Framework for Your Team
o Comparison of modern frameworks
o Additional example walkthroughs
o The SPEC method for choosing a
framework for your specific project
o Check email for follow-up with link
 Nuts and bolts of how JavaScript
works: You Don’t Know JS by Kyle
Simpson
 http://demos.wijmo.com/5/SampleEx
plorer/SampleExplorer/Sample/FlexC
hartIntro

Questions?
 Comments, concerns, suggestions welcome, too!

Contact Us, Follow Us
 Follow us on twitter @wijmo
 Submit feedback to our forums at
wijmo.com
 Get our JavaScript Frameworks e-book
at wijmo.com/ebook
 Take the online SPEC quiz to find the
best framework for your team at
wijmo.com/spec
 Get in touch with me anytime!
 https://christiangaetano.com
 @cgatno
 christian.gaetano@grapecity.com

Get Started with JavaScript Frameworks