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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mvc app in coffeescript 101 part 1/3

1,323

Published on

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
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,323
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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

×