Your SlideShare is downloading. ×
  • Like
Mvc app in coffeescript 101 part 1/3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Mvc app in coffeescript 101 part 1/3

  • 1,257 views
Published

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

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

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,257
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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