javascript mvc - Motorola Solutions Launchpad

yrekazzyzxamuckInternet and Web Development

Dec 4, 2013 (3 years and 10 months ago)

76 views

JAVASCRIPT MVC

Rob Galvin

RhoMobile

Dev

Community

AGENDA


What is JS MVC ?


Why do we need it ?


Selecting
MVC frameworks


Features of JS MVC


Using with
RhoMobile

Apps


Getting started with JS MVC


What JS MVC Provides


Well structured manageable code


Separates


Data (Model)


UI (Views)


Logic (Controller)


Single Page App Architecture


Templating


Routing


Event handling


Demo

When to Use


Complex or multi
-
view application


Communication with backend


Heavy lifting for viewing or manipulating data on
the client


Don’t want to write everything yourself


CONSIDERATIONS FOR
SELECTING THE RIGHT
TOOL

Community

Most Established


Backbone.js


AngularJS

Most Growth


Angular 379%


Meteor 130%


76%

Trends

Source:

Google Trends

MATURITY

SIZE & INTEROPERABILITY

LIBRARIES

-
More easily integrate into other
libraries

-
You may need to connect the dots

-
Can be used for part of SPA



Backbone


Knockout


Spine


CanJS


FRAMEWORKS

-
Usually provides everything you need

-
Intended to be in control of whole SPA

-
May not play well with others




Ember


Angular*


Batman


Meteor


Philosophy

OPINIONATED

UNOPINIONATED

UNOPINIONATED

-

Make own decisions

-

Can work against you if not
careful

OPINIONATED

-

Emphasis
on testability and
dependency injection

-

Declarative Programming




UNOPINIONATED

-

Routing / Data is
Dev

Choice

-

Does not dictate URL
structure


VERY OPINIONATED

-
More
code generated for you

-
Standardizes
files and
url

structures

-
Does
allow you to override
if
needed



Don’t waste time making trivial choices.


JS MVC FEATURES AT
A GLANCE

MODEL BINDING


Most touted & demoed feature



Unidirectional:


Change Data in Input


Bound JS object and other UI
automatically change


CanJS



Bi
-
Directional:


Change JS Object


Automatically refresh HTML/View


Angular, Ember, Knockout, Batman,
Meteor



None*:


Requires heavy lifting to enable


Backbone, Spine



VIEW TEMPLATING (Text/String)


String/text
templates
included for full or partial views


Replaces
the dynamic parts with data from your
models


Frameworks may dictate which
templating

engine you use


Ember


handlebars.js


Others make it optional


Backbone, Knockout, Spine


VIEW TEMPLATING (Declarative)


Declarative markup


HTML on steroids


Directives associate attach behavior to HTML element


Possibly less code to write


add behavior and transform the template DOM into the dynamic view
DOM


Can create custom markup directives

DATA STORAGE


Sync JS MVC Model to actual storage


Either backend

or local storage


Most assume REST


Tie into
Rhom

in different ways


Extending base model class (Backbone)


Using a mapping (Knockout)


Writing an adapter (Ember)


Writing a service (Angular)


Disconnected Considerations


Send Server Request
-
> Save client side


Client server stay in sync more easily


Not great for disconnected scenarios


Ex: Backbone


Save client side
-
> Send server request


More responsive


Good for disconnected scenarios


Ex;
Spine.JS



ROUTING


App States / Views represented by a URL


Routers maps
url

to controllers/views to change state


Typically not full page reload
-

render to a placeholder on
page


Similar to
RhoMobile

url

-
> Ruby controller/view

JS MVC with
RhoMobile

Apps


Use in place of scaffolding provided by
RhoStudio


Consider integrating with
Rhom



Local storage &
persistance


Integration with
RhoConnect

(Sync, Push)


Consult
docs.rhomobile.com

for samples (more to come)

Getting Started


Check out
Todomvc.com


Review considerations for choosing the right
framework


Research internet for comparisons


Check out the providers documentation, tutorials,
etc


Review
docs.rhomobile.com

for examples of using