Your SlideShare is downloading. ×
0
A Mobile App                Development Toolkit                Rebecca Murphey & Dan Imal                Boston Front End ...
Rebecca Murphey                          Lead JavaScript Developer                          @rmurphey                     ...
Tuesday, January 24, 12
linkage                mulberry.toura.com                bit.ly/toura-mulberry                bit.ly/toura-mulberry-demosT...
Tuesday, January 24, 12
Tuesday, January 24, 12
command line tools                scaffold your app and                generate skeleton                 les for the pieces...
Callback               CordovaTuesday, January 24, 12
$ mulberry scaffold recipesTuesday, January 24, 12
Tuesday, January 24, 12
Tuesday, January 24, 12
$ mulberry generateTuesday, January 24, 12
dramatic pause.Tuesday, January 24, 12
Tuesday, January 24, 12
create content with                          yaml, markdown & htmlTuesday, January 24, 12
create functionality with javascriptTuesday, January 24, 12
create styles with css & sassTuesday, January 24, 12
Tuesday, January 24, 12
$ mulberry serveTuesday, January 24, 12
ohai sane development tools.Tuesday, January 24, 12
$ mulberry testTuesday, January 24, 12
Tuesday, January 24, 12
Tuesday, January 24, 12
$ mulberry deployTuesday, January 24, 12
it’s just javascript.                (ok, and some haml, yaml, & sass.)Tuesday, January 24, 12
todos:                            capabilities:                            - name: PageTodos                            sc...
$YOURAPP/javascript/routes.js        mulberry.page(/todos, {          name : Todos,          pageDef : todos        }, tru...
$YOURAPP/javascript/components/TodoForm.js           mulberry.component(TodoForm, {             componentTemplate : dojo.c...
$YOURAPP/javascript/components/TodoForm/TodoForm.haml                 %form.component.todo-form                   %input{ ...
$YOURAPP/javascript/stores/todos.js                mulberry.store(todos, {                  model : Todo,                 ...
$YOURAPP/javascript/models/Todo.js                mulberry.model(Todo, {                  complete : false,               ...
@touradev @rmurphey @mrdanimal                mulberry.toura.com                bit.ly/toura-mulberry                bit.l...
Tuesday, January 24, 12
routes manage high-level application state                components receive and render data,                and react to ...
routes manage high-level application stateTuesday, January 24, 12
$YOURAPP/javascript/routes.js        mulberry.page(/todos, {          name : Todos,          pageDef : todos        }, tru...
stores persist data on the device, make that                data query-able, and return model instancesTuesday, January 24...
$YOURAPP/javascript/stores/todos.js                      mulberry.store(todos, {                        model : Todo,     ...
page de nitions reusable groupings                of components and capabilitiesTuesday, January 24, 12
todos:                            capabilities:                            - name: PageTodos                            sc...
components receive and render data,                and react to user inputTuesday, January 24, 12
$YOURAPP/javascript/components/TodoForm.js           mulberry.component(TodoForm, {             componentTemplate : dojo.c...
$YOURAPP/javascript/components/TodoForm/TodoForm.haml                 %form.component.todo-form                   %input{ ...
$YOURAPP/javascript/components/TodoForm.js           mulberry.component(TodoForm, {             componentTemplate : dojo.c...
capabilities provide data to components,                and broker communications between themTuesday, January 24, 12
mulberry.capability(PageTodos, {            todos:                                              requirements : {          ...
mulberry.capability(PageTodos, {            todos:                                              requirements : {          ...
mulberry.capability(PageTodos, {            todos:                                              requirements : {          ...
Upcoming SlideShare
Loading in...5
×

Getting Started with Mulberry

1,723

Published on

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

No Downloads
Views
Total Views
1,723
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Getting Started with Mulberry"

  1. 1. A Mobile App Development Toolkit Rebecca Murphey & Dan Imal Boston Front End Developer Meetup January 2012Tuesday, January 24, 12
  2. 2. Rebecca Murphey Lead JavaScript Developer @rmurphey Dan Imal Senior User Experience Developer @mrdanimalTuesday, January 24, 12
  3. 3. Tuesday, January 24, 12
  4. 4. linkage mulberry.toura.com bit.ly/toura-mulberry bit.ly/toura-mulberry-demosTuesday, January 24, 12
  5. 5. Tuesday, January 24, 12
  6. 6. Tuesday, January 24, 12
  7. 7. command line tools scaffold your app and generate skeleton les for the pieces you’ll need application code harness a powerful CSS and JavaScript framework to develop rich interfaces app builder generates production- ready builds for Android, iOS (mobile web is on the way)Tuesday, January 24, 12
  8. 8. Callback CordovaTuesday, January 24, 12
  9. 9. $ mulberry scaffold recipesTuesday, January 24, 12
  10. 10. Tuesday, January 24, 12
  11. 11. Tuesday, January 24, 12
  12. 12. $ mulberry generateTuesday, January 24, 12
  13. 13. dramatic pause.Tuesday, January 24, 12
  14. 14. Tuesday, January 24, 12
  15. 15. create content with yaml, markdown & htmlTuesday, January 24, 12
  16. 16. create functionality with javascriptTuesday, January 24, 12
  17. 17. create styles with css & sassTuesday, January 24, 12
  18. 18. Tuesday, January 24, 12
  19. 19. $ mulberry serveTuesday, January 24, 12
  20. 20. ohai sane development tools.Tuesday, January 24, 12
  21. 21. $ mulberry testTuesday, January 24, 12
  22. 22. Tuesday, January 24, 12
  23. 23. Tuesday, January 24, 12
  24. 24. $ mulberry deployTuesday, January 24, 12
  25. 25. it’s just javascript. (ok, and some haml, yaml, & sass.)Tuesday, January 24, 12
  26. 26. todos: capabilities: - name: PageTodos screens: - name: index regions: - components: - custom.TodoForm - className: list scrollable: true components: - custom.TodoList - components: - custom.TodoTools NB: You can define this with JavaScript, too, using toura.pageDef(‘todos’, { ... }).Tuesday, January 24, 12
  27. 27. $YOURAPP/javascript/routes.js mulberry.page(/todos, { name : Todos, pageDef : todos }, true); mulberry.page(/completed, { name : Completed, pageDef : completed }); #/todos #/completedTuesday, January 24, 12
  28. 28. $YOURAPP/javascript/components/TodoForm.js mulberry.component(TodoForm, { componentTemplate : dojo.cache(client.components, TodoForm/TodoForm.haml), init : function() { this.connect(this.domNode, submit, function(e) { e.preventDefault(); var description = dojo.trim(this.descriptionInput.value), item; if (!description) { return; } item = { description : description }; this.domNode.reset(); this.onAdd(item); }); }, onAdd : function(item) { } });Tuesday, January 24, 12
  29. 29. $YOURAPP/javascript/components/TodoForm/TodoForm.haml %form.component.todo-form %input{ placeholder : New todo, dojoAttachPoint : descriptionInput } %button{ dojoAttachPoint : saveButton } AddTuesday, January 24, 12
  30. 30. $YOURAPP/javascript/stores/todos.js mulberry.store(todos, { model : Todo, finish : function(id) { this.invoke(id, finish); }, unfinish : function(id) { this.invoke(id, unfinish); } });Tuesday, January 24, 12
  31. 31. $YOURAPP/javascript/models/Todo.js mulberry.model(Todo, { complete : false, finish : function() { this.set(complete, true); }, unfinish : function() { this.set(complete, false); } });Tuesday, January 24, 12
  32. 32. @touradev @rmurphey @mrdanimal mulberry.toura.com bit.ly/toura-mulberry bit.ly/toura-mulberry-demosTuesday, January 24, 12
  33. 33. Tuesday, January 24, 12
  34. 34. routes manage high-level application state components receive and render data, and react to user input capabilities provide data to components, and broker communications between them page de nitions reusable groupings of components and capabilities stores persist data on the device, make that data query-able, and return model instancesTuesday, January 24, 12
  35. 35. routes manage high-level application stateTuesday, January 24, 12
  36. 36. $YOURAPP/javascript/routes.js mulberry.page(/todos, { name : Todos, pageDef : todos }, true); mulberry.page(/completed, { name : Completed, pageDef : completed }); #/todos #/completedTuesday, January 24, 12
  37. 37. stores persist data on the device, make that data query-able, and return model instancesTuesday, January 24, 12
  38. 38. $YOURAPP/javascript/stores/todos.js mulberry.store(todos, { model : Todo, finish : function(id) { this.invoke(id, finish); }, unfinish : function(id) { this.invoke(id, unfinish); } });Tuesday, January 24, 12
  39. 39. page de nitions reusable groupings of components and capabilitiesTuesday, January 24, 12
  40. 40. todos: capabilities: - name: PageTodos screens: - name: index regions: - components: - custom.TodoForm - className: list scrollable: true components: - custom.TodoList - components: - custom.TodoTools NB: You can define this with JavaScript, too, using toura.pageDef(‘todos’, { ... }).Tuesday, January 24, 12
  41. 41. components receive and render data, and react to user inputTuesday, January 24, 12
  42. 42. $YOURAPP/javascript/components/TodoForm.js mulberry.component(TodoForm, { componentTemplate : dojo.cache(client.components, TodoForm/TodoForm.haml), init : function() { this.connect(this.domNode, submit, function(e) { e.preventDefault(); var description = dojo.trim(this.descriptionInput.value), item; if (!description) { return; } item = { description : description }; this.domNode.reset(); this.onAdd(item); }); }, onAdd : function(item) { } });Tuesday, January 24, 12
  43. 43. $YOURAPP/javascript/components/TodoForm/TodoForm.haml %form.component.todo-form %input{ placeholder : New todo, dojoAttachPoint : descriptionInput } %button{ dojoAttachPoint : saveButton } AddTuesday, January 24, 12
  44. 44. $YOURAPP/javascript/components/TodoForm.js mulberry.component(TodoForm, { componentTemplate : dojo.cache(client.components, TodoForm/TodoForm.haml), init : function() { this.connect(this.domNode, submit, function(e) { e.preventDefault(); var description = dojo.trim(this.descriptionInput.value), item; if (!description) { return; } item = { description : description }; this.domNode.reset(); this.onAdd(item); }); }, onAdd : function(item) { } });Tuesday, January 24, 12
  45. 45. capabilities provide data to components, and broker communications between themTuesday, January 24, 12
  46. 46. mulberry.capability(PageTodos, { todos: requirements : { capabilities: todoList : custom.TodoList, - name: PageTodos todoForm : custom.TodoForm, screens: todoTools : custom.TodoTools - name: index }, regions: - components: connects : [ - custom.TodoForm [ todoForm, onAdd, _add ], - className: list [ todoList, onComplete, _complete ], scrollable: true [ todoList, onDelete, _delete ], components: [ todoTools, onCompleteAll, _completeAll ] - custom.TodoList ], - components: - custom.TodoTools init : function() { this.todos = client.stores.todos; this._updateList(); }, _add : function(item) { this.todos.add(item); this._updateList(); }, _delete : function(id) { this.todos.remove(id); this._updateList(); },Tuesday, January 24, 12 _complete : function(id) {
  47. 47. mulberry.capability(PageTodos, { todos: requirements : { capabilities: todoList : custom.TodoList, - name: PageTodos todoForm : custom.TodoForm, screens: todoTools : custom.TodoTools - name: index }, regions: - components: connects : [ - custom.TodoForm [ todoForm, onAdd, _add ], - className: list [ todoList, onComplete, _complete ], scrollable: true [ todoList, onDelete, _delete ], components: [ todoTools, onCompleteAll, _completeAll ] - custom.TodoList ], - components: - custom.TodoTools init : function() { this.todos = client.stores.todos; this._updateList(); }, _add : function(item) { this.todos.add(item); this._updateList(); }, _delete : function(id) { this.todos.remove(id); this._updateList(); },Tuesday, January 24, 12 _complete : function(id) {
  48. 48. mulberry.capability(PageTodos, { todos: requirements : { capabilities: todoList : custom.TodoList, - name: PageTodos todoForm : custom.TodoForm, screens: todoTools : custom.TodoTools - name: index }, regions: - components: connects : [ - custom.TodoForm [ todoForm, onAdd, _add ], - className: list [ todoList, onComplete, _complete ], scrollable: true [ todoList, onDelete, _delete ], components: [ todoTools, onCompleteAll, _completeAll ] - custom.TodoList ], - components: - custom.TodoTools init : function() { this.todos = client.stores.todos; this._updateList(); }, _add : function(item) { this.todos.add(item); this._updateList(); }, _delete : function(id) { this.todos.remove(id); this._updateList(); },Tuesday, January 24, 12 _complete : function(id) {
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×