Mvc app in coffeescript 101 part 1/3
Upcoming SlideShare
Loading in...5
×
 

Mvc app in coffeescript 101 part 1/3

on

  • 1,767 views

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.

Statistics

Views

Total Views
1,767
Views on SlideShare
1,742
Embed Views
25

Actions

Likes
1
Downloads
1
Comments
0

2 Embeds 25

http://github.local.opendojo.org 13
http://opendojo.org 12

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mvc app in coffeescript 101 part 1/3 Mvc app in coffeescript 101 part 1/3 Presentation Transcript

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