mvc app in coffeescript 101 part 1/3

MVC app CoffeeScript

101 – MVC basic structure

Sébastien Barbieri - opendojo.org 2

chapters1. Opendojo

1. About

2. Prepared kata

3. setup

2. MVC app 101

1. Git

2. Structure

3. Event

4. Require.js

5. MVC

3. Homework


ABOUTopendojo

Where you learn more

about opendojo.org


About• Free/Creative Common

• Continuous education

• Agile/Lean

• More on opendojo.org


PREPARED KATAopendojo

What’s a prepared

Kata?


Prepared Kata• Time limit: 2h

• Target: « hello world » MVC app

• Real target: coffeescript + javascript app learning

• Practice after each baby step

• Deshi: 2-8


DOJO SETUPopendojo

What do I need?


Dojo Setup

• 2 deshi / computer + 1 computer for

the sensei

• Internet connection

• whiteboard + beamer


Dojo Setup

• Sensei explain a small part, gives

rules

• Deshi directly practice

• Deshi can interrupt anytime


Dojo Setup• Pre-requisite:

– Installed:

• Sublime text 2

• Nodejs, npm, coffeescript

• Git

• Webserver

– Have a Github account for each student


GITMVC app 101

Git in 5 minutes


Git• Github

• git clone

• git add

• git commit

• git push


STRUCTUREMVC app 101

How to structure an

MVC application


Structure• Webserver

– DocumentRoot: /var/www/github/myapp

– ServerName: http://github.local.opendojo.org/

• File structure Base

– SOURCE/

• scripts/

• skins/

• index.html

– TEST/

– BUILD/

– build.xml


Structure• MVC directory structure

– SOURCE/

• scripts/

– models/

– views/

– controllers/


EVENTMVC app 101

Event quick hands on


Event


REQUIRE.JSMVC app 101

How to handle

dependencies


require.js• require([“dir/file1”,

“dir/file2”],function(F1,F2){});

• define([“dir/file1”,

“dir/file2”],function(F1,F2){});

• config (paths)


Bootstrap• SOURCE/

– scripts/

• application/

– models/

– views/

– controllers/

• vendors/

– jquery/jquery.js

– require/require.js

• bootstrap.js


EVENTMVC app 101

How the MVC application should work


Event


COREMVC app 101

Finally some CoffeeScript


Core• SOURCE/

– scripts/

• application/

– models/

» core.coffee

» core.js

– views/

– controllers/

• vendors/

– jquery/jquery.js

– require/require.js

• bootstrap.js


EVENTMVC app 101

Deeper in the MVC


Event


MVCMVC app 101

“Hello world” MVC


MVC• MainController

– State machine

• Controller

– dispatch()

– init()

– load()

• View

– load()

– changeSomething()


HOMEWORKHomework

Prepare next chapter


Homework

• My application

– Design a screen (paper)

– Prepare fake data (json)

mvc app in coffeescript 101 part 1/3

Education