Domain-Driven JavaScript Development

36
http://www.flickr.com/photos/lac-bac/467856 http://www.flickr.com/photos/lac-bac/467856

description

We are building more and more complex applications on the front-end of the web stack. We've done a good job of bringing engineering rigor to JavaScript development, but we can do more. We need overall architectural design for our complex applications. Domain-Driven Design offers us a way of approaching software design on the front-end. We walk through the process of setting up a small domain-driven application in Backbone.js.

Transcript of Domain-Driven JavaScript Development

Page 1: Domain-Driven JavaScript Development

http://www.flickr.com/photos/lac-bac/4678565737/http://www.flickr.com/photos/lac-bac/4678565737/

Page 2: Domain-Driven JavaScript Development

Bob HoltSpecialist, Interactive Development

Sapient Global MarketsVisualization Practice

@bobholtgithub.com/bobholt

Page 3: Domain-Driven JavaScript Development

• Asset Management

• Design Patterns

• Modularization

• Linting

• Testing

• Build Process

Page 4: Domain-Driven JavaScript Development

http://www.flickr.com/photos/sidelong/6433552779/http://www.flickr.com/photos/sidelong/6433552779/

Page 5: Domain-Driven JavaScript Development

http://en.wikipedia.org/wiki/File:Joy_Oil_gas_station_blueprints.jpghttp://en.wikipedia.org/wiki/File:Joy_Oil_gas_station_blueprints.jpg

Page 6: Domain-Driven JavaScript Development
Page 7: Domain-Driven JavaScript Development

Domain

The subject of the program

Examples:

•Airline booking program: People getting on aircraft

•Stock Trading program: Securities and exchanges

Page 8: Domain-Driven JavaScript Development

Domain-Driven Design

Manage complex software by placing primary focus on the domain.

•Principles•Techniques•Practices

Page 9: Domain-Driven JavaScript Development

What if my software isn’t complex?

“Put all the business logic into the user interface. […] Use the most automated UI building and visual programming tools available.”

-Eric Evans

Page 10: Domain-Driven JavaScript Development

http:

//w

ww

.flic

kr.c

om/p

hoto

s/si

nam

igos

/750

9698

756/

Page 11: Domain-Driven JavaScript Development

Domain-Driven Design

Manage complex software by placing primary focus on the domain.

•Principles•Techniques•Practices

Page 12: Domain-Driven JavaScript Development

Domain Model

• Abstraction of the knowledge in a domain expert’s head

• Intimately linked with the software implementation

• If a domain model cannot be understood by sophisticated domain experts, then there is something wrong with the model.

Page 13: Domain-Driven JavaScript Development

Building a Domain-Driven Application

Page 14: Domain-Driven JavaScript Development

https://github.com/archfirst/bullsfirst-jquery-backbone

Page 15: Domain-Driven JavaScript Development
Page 16: Domain-Driven JavaScript Development

https://github.com/archfirst/bullsfirst-jquery-backbone

Page 17: Domain-Driven JavaScript Development

The FrameworkBuilding a Domain-Driven Application

Page 18: Domain-Driven JavaScript Development

Backbone.js

In an ecosystem where overarching, decides-everything-for-you frameworks are commonplace, and many libraries require your site to be restructured to suit their look, feel, and default behavior — Backbone should continue to be a tool that gives you the freedom to design the full experience of your web application.

- Jeremy Ashkenas

Page 19: Domain-Driven JavaScript Development

Keel

• Lightweight framework around Backbone.js

• About patterns and practices, not fancy code

• 5 Files: BaseView, ExceptionUtil, Message, MessageBus, Router

https://github.com/archfirst/keel

Page 20: Domain-Driven JavaScript Development

Pattern

• Component– View – Template– ViewModel

Page 21: Domain-Driven JavaScript Development

https://commons.wikimedia.org/wiki/File:Russian-Matroshka_no_bg.jpghttps://commons.wikimedia.org/wiki/File:Russian-Matroshka_no_bg.jpg

Page 22: Domain-Driven JavaScript Development

The ProcessBuilding a Domain-Driven Application

Page 23: Domain-Driven JavaScript Development

Discovery

• Begin constructing the domain model

• Develop an ubiquitous language

Page 24: Domain-Driven JavaScript Development

Ubiquitous Language

• Concept shared with Behavior-Driven Development

• Defined terminology that is shared between all members of the team

• Used in all code and written and verbal communication

Page 25: Domain-Driven JavaScript Development
Page 26: Domain-Driven JavaScript Development
Page 27: Domain-Driven JavaScript Development
Page 28: Domain-Driven JavaScript Development
Page 29: Domain-Driven JavaScript Development

Building the domain model and ubiquitous language is an iterative process

Page 30: Domain-Driven JavaScript Development

Isolate the Domain

Page 31: Domain-Driven JavaScript Development

Express the Model in Software

• Distinguish Entities, Value Objects, and Services

• Set Aggregate Boundaries

• Implement Repositories and Factories

Page 32: Domain-Driven JavaScript Development

Set Aggregate Boundaries

Positions

Transactions

Orders

Lots

Brokerage Account

Page 33: Domain-Driven JavaScript Development

Repositories

• Global interface

• Provides illusion of in-memory collection of all objects

• Deals with the data store

• Caches as necessary

Page 34: Domain-Driven JavaScript Development

Factories

• Take on the responsibility of creating new objects

• Tying to domain or application can be ungainly

• However, Backbone has Collection.add and Model.validate methods that can take care of this for us

Page 35: Domain-Driven JavaScript Development

http:

//co

mm

ons.

wik

imed

ia.o

rg/w

iki/

File

:Dee

p_in

_tho

ught

.jpg

Page 36: Domain-Driven JavaScript Development

Resources

• Domain-Driven Design– Domain-Driven Design: Tackling Complexity in the

Heart of Software – Eric Evans– Domain Driven Design Quickly – InfoQ– Domain-Driven Design – Nettuts+

• Keel.js– Keel – GitHub– Bullsfirst – GitHub– Archfirst Project