Digesting JavaScript MVC

Slide 1

Slide 1 text

Digesting MVC WITH @addyosmani JAVASCRIPT

Slide 2

Slide 2 text

Is it abuse? Let’s talk more about that soon. What year were you born? 50s-70s 1980 1990 2000 Now C#, Clojure, Go, Dart C++ born JavaScript, Ruby, Java, PHP born Fortran, C created Perl, Erlang

Slide 3

Slide 3 text

Is it abuse? Let’s talk more about that soon. MVC was conceived in 1978 Still being used 34 years later. Thanks Smalltalk-80 and Trygve Reenskaug! Apple II, 1978.

Slide 4

Slide 4 text

Is it abuse? Let’s talk more about that soon. Think about that. Imagine if we were still using these? 5.25” Floppy disks

Slide 5

Slide 5 text

Is it abuse? Let’s talk more about that soon. Or..Sean Connery still did this.

Slide 6

Slide 6 text

Let’s talk about MVC.

Slide 7

Slide 7 text

Is it abuse or evolution? Let’s talk more about that soon.

Slide 8

Slide 8 text

I WORK AT AS A DEVELOPER PROGRAMS ENGINEER 50% ENGINEER 50% TECHNICAL WRITER QUICK INFO ABOUT ME

Slide 9

Slide 9 text

CONTRIBUTED TO: CREATED: TodoMVC jQuery UI Bootstrap Backbone Aura Backbone Paginator jQuery Plugin Patterns getUserMedia.js basket.js and more. Feature detection tests Documentation, Learning Site, Triage Latest Todo application WRITTEN: Learning JS Design Patterns Backbone Fundamentals

Slide 10

Slide 10 text

Most Developers realize that structured, maintainable code is important. Much better position than where we were 2-3 years ago. Not enough took Dojo seriously for this, but should have. In 2012

Slide 11

Slide 11 text

There are over 40 JavaScript MVC frameworks to help. ..many of which don’t use MVC.

Slide 12

Slide 12 text

Let’s talk about MVC. http://todomc.com

Slide 13

Slide 13 text

Let’s talk about MVC.

Slide 14

Slide 14 text

Design Patterns were supposed to be a common vocabulary. but everyone has their own deﬁnitions.

Slide 15

Slide 15 text

Everyone has their own take on how separation of concerns should manifest.

Slide 16

Slide 16 text

MVC.

Slide 17

Slide 17 text

That doesn’t mean go create your own framework. Please don’t. (Unless it’s doing something totally diﬀerent)

Slide 18

Slide 18 text

Solving a problem yourself can greatly improve your understanding of it’s mechanics. That said..

Slide 19

Slide 19 text

I stand by this, but that doesn’t mean go create your own framework..unless..

Slide 20

Slide 20 text

1980 2012 MVC MVP WEB MVC WEB MVP MVVM JS MVC MV* variations Adaptation over 30 years spanning C++, Java, C#, ASP, PHP now JavaScript. The Browser is a different paradigm.

Slide 21

Slide 21 text

We started oﬀ with MVC. MVC Provides a clean separation of concerns where data (Models), presentation (Views) and user-input (Controllers) are handled separately. (more on this soon)

Slide 22

Slide 22 text

The Model-View-Presenter pattern MVP Like MVC, but with a heavier focus on decoupled UI development. The P (Presenter) plays the role of the Controller with the View handling user- input. Presenter retrieves data (Model) and formats it for display in the View.

Slide 23

Slide 23 text

The Model-View ViewModel pattern MVVM Similarly like MVC, but the ViewModel provides data bindings between the Model and View. Converts Model data and passes it on to the View for usage.

Slide 24

Slide 24 text

Variations on these patterns MV* Patterns which borrow aspects from a number of others and don’t fall under a speciﬁc name. Developers commonly try ﬁtting solutions that fall under MV* into one of the others but shouldn’t.

Slide 25

Slide 25 text

Today, we’ve taken classic patterns and tried to shape them to work with the web. *sometimes this works well, sometimes it doesn’t.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Why care about classic MVC? Understanding patterns allows us to use MV* frameworks more eﬀectively. In theory.

Slide 28

Slide 28 text

Separates applications into three main concerns: Smalltalk MVC Models Views Controllers

Slide 29

Slide 29 text

Domain-level data for the application MVC: Models Represent domain-speciﬁc knowledge and data

Slide 30

Slide 30 text

Domain-level data for the application MVC: Models Notify their observers about state using the Observer pattern

Slide 31

Slide 31 text

Domain-level data for the application MVC: Models Isolated from the View. Modiﬁed by the Controller.

Slide 32

Slide 32 text

Sometimes people said the ﬁrst..but meant the second. MVC: Models • Domain model: data representing the core concepts in the app (e.g Book, Contact, Friend) • Application model: object that knows Views exist and that they need some data

Slide 33

Slide 33 text

Render the current model state in a form that can be viewed/interacted with MVC: Views Often considered the UI, but doesn’t have to be

Slide 34

Slide 34 text

Render the current model state in a form that can be viewed/interacted with MVC: Views Must know about the existence of Models in order to observe them

Slide 35

Slide 35 text

Render the current model state in a form that can be viewed/interacted with MVC: Views Must know something about the Model nature. What are they observing?

Slide 36

Slide 36 text

Render the current model state in a form that can be viewed/interacted with MVC: Views Multiple Views can exist for single Models. Think of any?

Slide 37

Slide 37 text

Receive input and instruct views to respond accordingly MVC: Controllers Controllers handle input. Views handle output. This is a simpliﬁcation.

Slide 38

Slide 38 text

Receive input and instruct views to respond accordingly MVC: Controllers When the Controller changes model state, doesn’t directly tell the View.

Slide 39

Slide 39 text

Here be dragons. MVC: Controllers Some implementations merge the Controller and the View.

Slide 40

Slide 40 text

Text

Slide 41

Slide 41 text

Challenge: Smalltalk !== JavaScript How do we apply it to a JS app?

Slide 42

Slide 42 text

Converting spaghetti code to use MVC isn’t all that hard.. How Does This Work? Models Views Controllers Spaghetti code What unique data is represented in my app? e.g a picture, a person What does the user need to be able to see and do? What (repeatable) output can I shift to JS templating? (varies) Typically handle user interaction

Slide 43

Slide 43 text

Converting spaghetti code to use MVC isn’t all that hard.. How Does This Work? Models Views Controllers Spaghetti code What unique data is represented in my app? e.g a picture, a person What does the user need to be able to see? What (repeatable) output can I shift to JS templating? (varies) Typically handle user interaction

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Back to frameworks and MV*.

Slide 46

Slide 46 text

It’s more MVP than anything else. Backbone MVC Models Views Collections Routers Domain-level data structures User-interface and Interaction Closer to Controller Like the ‘P’ in MVP Groups of models Map URLs to functions

Slide 47

Slide 47 text

Actual components Backbone MVC Backbone. Model Backbone.View Backbone. Collection Backbone.Router Views Collections Routers Models

Slide 48

Slide 48 text

How does Ember.js view the MVC pattern? Ember MVC Models Views Controllers State Manager Domain-level data, relationships between models HTML Templates Manage lists of objects Mediates between MVC parts

Slide 49

Slide 49 text

How does Ember.js view the MVC pattern? Ember MVC Models Views Controllers State Manager DS.Model Ember.View Ember.ArrayController Mediates between MVC parts

Slide 50

Slide 50 text

How does Angular.js view the MVC pattern? (btw, check it out!) AngularJS Models Views Controllers Scope Single entity object or entire data model (all entities) Rendered DOM based on what’s in the Controller and Model Classes for augmenting Angular Scopes API for observing models, API for propagating model changes through the system

Slide 51

Slide 51 text

How does Angular.js view the MVC pattern? (btw, check it out!) AngularJS Models Controllers Scope In data-bindings Templates Bindings between View and Model Augments $scope $scope Views

Slide 52

Slide 52 text

CoﬀeeScript-based MVC framework Spine.js Models Views Controllers Routers Domain-data Controllers bind to model events HTML fragments Respond to DOM events, render templates, sync models and views Hash fragment based routing

Slide 53

Slide 53 text

CoﬀeeScript-based MVC framework Spine.js Models Views Controllers Routers Spine.Model JS-templating of coice Spine.Controller Spine.Route

Slide 54

Slide 54 text

Everyone considers MVC something diﬀerent. They’ve adapted it.

Slide 55

Slide 55 text

Let’s look at a framework which tries to stick closer to Smalltalk MVC

Slide 56

Slide 56 text

Based on Smalltalk MVC, by Peter Michaux Maria MVC Models Views Controllers Routers Domain-data on change it notiﬁes observers Observes models, represents model’s current state Handles what happens when a user interacts with a View Your own. https://github.com/petermichaux/maria/

Slide 57

Slide 57 text

Based on Smalltalk MVC Maria MVC Models Views Controllers Routers maria.Model maria.ElementView maria.Controller Your own.

Slide 58

Slide 58 text

Discussion JSMVC: Evolution or Abuse? Does Smalltalk MVC have a place in JavaScript land? Are frameworks right to augment ‘MVC’?

Slide 59

Slide 59 text

Let’s get real. Don’t be pedantic. Use what feels like the most maintainable option for you.

Slide 60

Slide 60 text

What’s the latest MV* hotness?

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

HarvestHQ Harvey DEVICE-SPECIFIC VIEWS https://github.com/harvesthq/harvey

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

Backbone.Offline OFFLINE-FIRST APPS https://github.com/Ask11/backbone.offline Apps work offline first, server sync when there’s a connection.

Slide 65

Slide 65 text

Backbone Aura Backbone LayoutManager Backbone Marionette Thorax Chaplin ARCHITECTURE EXTENSIONS MV* is just a small base. These components help manage greater concerns.