Upload
sebastien-barbieri
View
1.861
Download
1
Embed Size (px)
DESCRIPTION
Get your hands on an MVC web app, by doing it yourself from scratch with coffeescript.
Citation preview
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
Sébastien Barbieri - opendojo.org 3
ABOUTopendojo
Where you learn more
about opendojo.org
Sébastien Barbieri - opendojo.org 4
About• Free/Creative Common
• Continuous education
• Agile/Lean
• More on opendojo.org
Sébastien Barbieri - opendojo.org 5
PREPARED KATAopendojo
What’s a prepared
Kata?
Sébastien Barbieri - opendojo.org 6
Prepared Kata• Time limit: 2h
• Target: « hello world » MVC app
• Real target: coffeescript + javascript app learning
• Practice after each baby step
• Deshi: 2-8
Sébastien Barbieri - opendojo.org 7
DOJO SETUPopendojo
What do I need?
Sébastien Barbieri - opendojo.org 8
Dojo Setup
• 2 deshi / computer + 1 computer for
the sensei
• Internet connection
• whiteboard + beamer
Sébastien Barbieri - opendojo.org 9
Dojo Setup
• Sensei explain a small part, gives
rules
• Deshi directly practice
• Deshi can interrupt anytime
Sébastien Barbieri - opendojo.org 10
Dojo Setup• Pre-requisite:
– Installed:
• Sublime text 2
• Nodejs, npm, coffeescript
• Git
• Webserver
– Have a Github account for each student
Sébastien Barbieri - opendojo.org 11
GITMVC app 101
Git in 5 minutes
Sébastien Barbieri - opendojo.org 12
Git• Github
• git clone
• git add
• git commit
• git push
Sébastien Barbieri - opendojo.org 13
STRUCTUREMVC app 101
How to structure an
MVC application
Sébastien Barbieri - opendojo.org 14
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
Sébastien Barbieri - opendojo.org 15
Structure• MVC directory structure
– SOURCE/
• scripts/
– models/
– views/
– controllers/
Sébastien Barbieri - opendojo.org 16
EVENTMVC app 101
Event quick hands on
Sébastien Barbieri - opendojo.org 17
Event
Sébastien Barbieri - opendojo.org 18
REQUIRE.JSMVC app 101
How to handle
dependencies
Sébastien Barbieri - opendojo.org 19
require.js• require([“dir/file1”,
“dir/file2”],function(F1,F2){});
• define([“dir/file1”,
“dir/file2”],function(F1,F2){});
• config (paths)
Sébastien Barbieri - opendojo.org 20
Bootstrap• SOURCE/
– scripts/
• application/
– models/
– views/
– controllers/
• vendors/
– jquery/jquery.js
– require/require.js
• bootstrap.js
Sébastien Barbieri - opendojo.org 21
EVENTMVC app 101
How the MVC application should work
Sébastien Barbieri - opendojo.org 22
Event
Sébastien Barbieri - opendojo.org 23
COREMVC app 101
Finally some CoffeeScript
Sébastien Barbieri - opendojo.org 24
Core• SOURCE/
– scripts/
• application/
– models/
» core.coffee
» core.js
– views/
– controllers/
• vendors/
– jquery/jquery.js
– require/require.js
• bootstrap.js
Sébastien Barbieri - opendojo.org 25
EVENTMVC app 101
Deeper in the MVC
Sébastien Barbieri - opendojo.org 26
Event
Sébastien Barbieri - opendojo.org 27
MVCMVC app 101
“Hello world” MVC
Sébastien Barbieri - opendojo.org 28
MVC• MainController
– State machine
• Controller
– dispatch()
– init()
– load()
• View
– load()
– changeSomething()
Sébastien Barbieri - opendojo.org 29
HOMEWORKHomework
Prepare next chapter
Sébastien Barbieri - opendojo.org 30
Homework
• My application
– Design a screen (paper)
– Prepare fake data (json)