MVC app CoffeeScript   101 – MVC basic structure
chapters1.    Opendojo     1.    About     2.    Prepared kata     3.    setup2.    MVC app 101     1.    Git     2.    St...
Where you                                          learn moreopendojo                                             aboutABO...
About• Free/Creative Common• Continuous education• Agile/Lean• More on opendojo.org                Sébastien Barbieri - op...
What’s aopendojo                                     prepared Kata?PREPARED KATA           Sébastien Barbieri - opendojo.o...
Prepared Kata• Time limit: 2h• Target: « hello world » MVC app• Real target: coffeescript + javascript app learning• Pract...
What do Iopendojo                                                need?DOJO SETUP           Sébastien Barbieri - opendojo.o...
Dojo Setup• 2 deshi / computer + 1 computer for the sensei• Internet connection• whiteboard + beamer                 Sébas...
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       • Web...
MVC app 101                             Git in 5 minutesGIT              Sébastien Barbieri - opendojo.org            11
Git• Github• git clone• git add• git commit• git push               Sébastien Barbieri - opendojo.org   12
How to                                             structure anMVC app 101                                                ...
Structure•   Webserver     –   DocumentRoot: /var/www/github/myapp     –   ServerName: http://github.local.opendojo.org/• ...
Structure• MVC directory structure  – SOURCE/     • scripts/         – models/         – views/         – controllers/    ...
Event quickMVC app 101                                               hands onEVENT              Sébastien Barbieri - opend...
EventSébastien Barbieri - opendojo.org   17
How to handleMVC app 101                                          dependenciesREQUIRE.JS              Sébastien Barbieri -...
require.js• require([“dir/file1”, “dir/file2”],function(F1,F2){});• define([“dir/file1”, “dir/file2”],function(F1,F2){});•...
Bootstrap•   SOURCE/    – scripts/         •   application/                 –   models/                 –   views/        ...
How the MVCMVC app 101                                  applicationEVENT                                       should work...
EventSébastien Barbieri - opendojo.org   22
Finally someMVC app 101                                            CoffeeScriptCORE              Sébastien Barbieri - open...
Core•   SOURCE/     –   scripts/           •   application/                    –   models/                              » ...
Deeper in theMVC app 101                                              MVCEVENT              Sébastien Barbieri - opendojo....
EventSébastien Barbieri - opendojo.org   26
“Hello world”MVC app 101                                               MVCMVC              Sébastien Barbieri - opendojo.o...
MVC•   MainController     – State machine•   Controller     – dispatch()     – init()     – load()•   View     – load()   ...
Prepare nextHomework                                           chapterHOMEWORK           Sébastien Barbieri - opendojo.org...
Homework• My application  – Design a screen (paper)  – Prepare fake data (json)                   Sébastien Barbieri - ope...
Upcoming SlideShare
Loading in …5
×

Mvc app in coffeescript 101 part 1/3

1,632 views

Published on

Get your hands on an MVC web app, by doing it yourself from scratch with coffeescript.

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,632
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mvc app in coffeescript 101 part 1/3

  1. 1. MVC app CoffeeScript 101 – MVC basic structure
  2. 2. chapters1. Opendojo 1. About 2. Prepared kata 3. setup2. MVC app 101 1. Git 2. Structure 3. Event 4. Require.js 5. MVC3. Homework Sébastien Barbieri - opendojo.org 2
  3. 3. Where you learn moreopendojo aboutABOUT opendojo.org Sébastien Barbieri - opendojo.org 3
  4. 4. About• Free/Creative Common• Continuous education• Agile/Lean• More on opendojo.org Sébastien Barbieri - opendojo.org 4
  5. 5. What’s aopendojo prepared Kata?PREPARED KATA Sébastien Barbieri - opendojo.org 5
  6. 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 6
  7. 7. What do Iopendojo need?DOJO SETUP Sébastien Barbieri - opendojo.org 7
  8. 8. Dojo Setup• 2 deshi / computer + 1 computer for the sensei• Internet connection• whiteboard + beamer Sébastien Barbieri - opendojo.org 8
  9. 9. Dojo Setup• Sensei explain a small part, gives rules• Deshi directly practice• Deshi can interrupt anytime Sébastien Barbieri - opendojo.org 9
  10. 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 10
  11. 11. MVC app 101 Git in 5 minutesGIT Sébastien Barbieri - opendojo.org 11
  12. 12. Git• Github• git clone• git add• git commit• git push Sébastien Barbieri - opendojo.org 12
  13. 13. How to structure anMVC app 101 MVCSTRUCTURE application Sébastien Barbieri - opendojo.org 13
  14. 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 14
  15. 15. Structure• MVC directory structure – SOURCE/ • scripts/ – models/ – views/ – controllers/ Sébastien Barbieri - opendojo.org 15
  16. 16. Event quickMVC app 101 hands onEVENT Sébastien Barbieri - opendojo.org 16
  17. 17. EventSébastien Barbieri - opendojo.org 17
  18. 18. How to handleMVC app 101 dependenciesREQUIRE.JS Sébastien Barbieri - opendojo.org 18
  19. 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 19
  20. 20. Bootstrap• SOURCE/ – scripts/ • application/ – models/ – views/ – controllers/ • vendors/ – jquery/jquery.js – require/require.js • bootstrap.js Sébastien Barbieri - opendojo.org 20
  21. 21. How the MVCMVC app 101 applicationEVENT should work Sébastien Barbieri - opendojo.org 21
  22. 22. EventSébastien Barbieri - opendojo.org 22
  23. 23. Finally someMVC app 101 CoffeeScriptCORE Sébastien Barbieri - opendojo.org 23
  24. 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 24
  25. 25. Deeper in theMVC app 101 MVCEVENT Sébastien Barbieri - opendojo.org 25
  26. 26. EventSébastien Barbieri - opendojo.org 26
  27. 27. “Hello world”MVC app 101 MVCMVC Sébastien Barbieri - opendojo.org 27
  28. 28. MVC• MainController – State machine• Controller – dispatch() – init() – load()• View – load() – changeSomething() Sébastien Barbieri - opendojo.org 28
  29. 29. Prepare nextHomework chapterHOMEWORK Sébastien Barbieri - opendojo.org 29
  30. 30. Homework• My application – Design a screen (paper) – Prepare fake data (json) Sébastien Barbieri - opendojo.org 30

×