SlideShare a Scribd company logo
A Mobile App
                Development Toolkit
                Rebecca Murphey & Dan Imal
                Boston Front End Developer Meetup
                January 2012



Tuesday, January 24, 12
Rebecca Murphey
                          Lead JavaScript Developer
                          @rmurphey

                          Dan Imal
                          Senior User Experience Developer
                          @mrdanimal



Tuesday, January 24, 12
Tuesday, January 24, 12
linkage
                mulberry.toura.com
                bit.ly/toura-mulberry
                bit.ly/toura-mulberry-demos




Tuesday, January 24, 12
Tuesday, January 24, 12
Tuesday, January 24, 12
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
Callback
               Cordova


Tuesday, January 24, 12
$ mulberry scaffold recipes




Tuesday, January 24, 12
Tuesday, January 24, 12
Tuesday, January 24, 12
$ mulberry generate




Tuesday, January 24, 12
dramatic pause.




Tuesday, January 24, 12
Tuesday, January 24, 12
create content with
                          yaml, markdown & html




Tuesday, January 24, 12
create functionality with javascript




Tuesday, January 24, 12
create styles with css & sass




Tuesday, January 24, 12
Tuesday, January 24, 12
$ mulberry serve




Tuesday, January 24, 12
ohai sane development tools.




Tuesday, January 24, 12
$ mulberry test




Tuesday, January 24, 12
Tuesday, January 24, 12
Tuesday, January 24, 12
$ mulberry deploy




Tuesday, January 24, 12
it’s just javascript.
                (ok, and some haml, yaml, & sass.)




Tuesday, January 24, 12
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
$YOURAPP/javascript/routes.js

        mulberry.page('/todos', {
          name : 'Todos',
          pageDef : 'todos'
        }, true);

        mulberry.page('/completed', {
          name : 'Completed',
          pageDef : 'completed'
        });




                                        #/todos   #/completed

Tuesday, January 24, 12
$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
$YOURAPP/javascript/components/TodoForm/TodoForm.haml

                 %form.component.todo-form
                   %input{ placeholder : 'New todo', dojoAttachPoint : 'descriptionInput' }
                   %button{ dojoAttachPoint : 'saveButton' } Add




Tuesday, January 24, 12
$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
$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
@touradev @rmurphey @mrdanimal
                mulberry.toura.com
                bit.ly/toura-mulberry
                bit.ly/toura-mulberry-demos


Tuesday, January 24, 12
Tuesday, January 24, 12
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 instances


Tuesday, January 24, 12
routes manage high-level application state




Tuesday, January 24, 12
$YOURAPP/javascript/routes.js

        mulberry.page('/todos', {
          name : 'Todos',
          pageDef : 'todos'
        }, true);

        mulberry.page('/completed', {
          name : 'Completed',
          pageDef : 'completed'
        });




                                        #/todos   #/completed

Tuesday, January 24, 12
stores persist data on the device, make that
                data query-able, and return model instances




Tuesday, January 24, 12
$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
page de nitions reusable groupings
                of components and capabilities




Tuesday, January 24, 12
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
components receive and render data,
                and react to user input




Tuesday, January 24, 12
$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
$YOURAPP/javascript/components/TodoForm/TodoForm.haml

                 %form.component.todo-form
                   %input{ placeholder : 'New todo', dojoAttachPoint : 'descriptionInput' }
                   %button{ dojoAttachPoint : 'saveButton' } Add




Tuesday, January 24, 12
$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
capabilities provide data to components,
                and broker communications between them




Tuesday, January 24, 12
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) {
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) {
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) {

More Related Content

Viewers also liked

Proyectos Tecnológicos
Proyectos TecnológicosProyectos Tecnológicos
Proyectos Tecnológicosguestd0064fb
 
Tecnologia cuarto
Tecnologia cuartoTecnologia cuarto
Tecnologia cuartoLeonel47
 
Influencia de la_tecnologia_en_la_sociedad
Influencia de la_tecnologia_en_la_sociedadInfluencia de la_tecnologia_en_la_sociedad
Influencia de la_tecnologia_en_la_sociedadKagomeNekosawa
 
Introduction to Business Strategy Development & Strategy Execution
Introduction to Business Strategy Development & Strategy ExecutionIntroduction to Business Strategy Development & Strategy Execution
Introduction to Business Strategy Development & Strategy Execution
Flevy.com Best Practices
 
Proyecto Tecnologico Para 4° Y 5° De Primaria
Proyecto Tecnologico Para 4° Y 5° De PrimariaProyecto Tecnologico Para 4° Y 5° De Primaria
Proyecto Tecnologico Para 4° Y 5° De Primariaguestc14d1b
 
Proyecto Tecnologico
Proyecto TecnologicoProyecto Tecnologico
Proyecto Tecnologico
Eduardo Morales
 
Ejemplo de un proyecto de tecnología
Ejemplo de un proyecto de tecnologíaEjemplo de un proyecto de tecnología
Ejemplo de un proyecto de tecnologíaGabriel Diaz
 
Secuencia didáctica Tecnología-herramientas manuales 1º grado
Secuencia didáctica Tecnología-herramientas manuales 1º gradoSecuencia didáctica Tecnología-herramientas manuales 1º grado
Secuencia didáctica Tecnología-herramientas manuales 1º grado
Laura Soluaga
 
Proyecto Reciclaje
Proyecto ReciclajeProyecto Reciclaje
Proyecto Reciclajealetopher94
 
PROYECTO RECICLAR PARA CREAR ARTE
PROYECTO RECICLAR PARA CREAR ARTEPROYECTO RECICLAR PARA CREAR ARTE
PROYECTO RECICLAR PARA CREAR ARTE
Yudy Lizeth Valencia Romero
 

Viewers also liked (11)

Proyectos Tecnológicos
Proyectos TecnológicosProyectos Tecnológicos
Proyectos Tecnológicos
 
Tecnologia cuarto
Tecnologia cuartoTecnologia cuarto
Tecnologia cuarto
 
Influencia de la_tecnologia_en_la_sociedad
Influencia de la_tecnologia_en_la_sociedadInfluencia de la_tecnologia_en_la_sociedad
Influencia de la_tecnologia_en_la_sociedad
 
Introduction to Business Strategy Development & Strategy Execution
Introduction to Business Strategy Development & Strategy ExecutionIntroduction to Business Strategy Development & Strategy Execution
Introduction to Business Strategy Development & Strategy Execution
 
Proyecto Tecnologico Para 4° Y 5° De Primaria
Proyecto Tecnologico Para 4° Y 5° De PrimariaProyecto Tecnologico Para 4° Y 5° De Primaria
Proyecto Tecnologico Para 4° Y 5° De Primaria
 
Proyecto Tecnologico
Proyecto TecnologicoProyecto Tecnologico
Proyecto Tecnologico
 
Ejemplo de un proyecto de tecnología
Ejemplo de un proyecto de tecnologíaEjemplo de un proyecto de tecnología
Ejemplo de un proyecto de tecnología
 
Proyecto de reciclaje 2014
Proyecto de reciclaje 2014Proyecto de reciclaje 2014
Proyecto de reciclaje 2014
 
Secuencia didáctica Tecnología-herramientas manuales 1º grado
Secuencia didáctica Tecnología-herramientas manuales 1º gradoSecuencia didáctica Tecnología-herramientas manuales 1º grado
Secuencia didáctica Tecnología-herramientas manuales 1º grado
 
Proyecto Reciclaje
Proyecto ReciclajeProyecto Reciclaje
Proyecto Reciclaje
 
PROYECTO RECICLAR PARA CREAR ARTE
PROYECTO RECICLAR PARA CREAR ARTEPROYECTO RECICLAR PARA CREAR ARTE
PROYECTO RECICLAR PARA CREAR ARTE
 

Similar to Getting Started with Mulberry

jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
Guy Royse
 
JQuery In Drupal
JQuery In DrupalJQuery In Drupal
JQuery In Drupal
katbailey
 
JavaScript in Drupal 7: What developers need to know
JavaScript in Drupal 7: What developers need to knowJavaScript in Drupal 7: What developers need to know
JavaScript in Drupal 7: What developers need to know
Work at Play
 
JavaScript in Drupal 7: What developers need to know
JavaScript in Drupal 7: What developers need to knowJavaScript in Drupal 7: What developers need to know
JavaScript in Drupal 7: What developers need to know
katbailey
 
Kharkivpy#3: Javascript and Python backend
Kharkivpy#3: Javascript and Python backendKharkivpy#3: Javascript and Python backend
Kharkivpy#3: Javascript and Python backend
Max Klymyshyn
 
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
katbailey
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
James Rakich
 
Mobile Day - React Native
Mobile Day - React NativeMobile Day - React Native
Mobile Day - React Native
Software Guru
 
Web applications with Catalyst
Web applications with CatalystWeb applications with Catalyst
Web applications with Catalystsvilen.ivanov
 
Drupal & javascript
Drupal & javascriptDrupal & javascript
Drupal & javascript
Almog Baku
 
WebGL and three.js
WebGL and three.jsWebGL and three.js
WebGL and three.js
Anton Narusberg
 
Rails Model Basics
Rails Model BasicsRails Model Basics
Rails Model Basics
James Gray
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
Alive Kuo
 
Choosing a Javascript Framework
Choosing a Javascript FrameworkChoosing a Javascript Framework
Choosing a Javascript Framework
All Things Open
 
RubyEnRails2007 - Dr Nic Williams - Keynote
RubyEnRails2007 - Dr Nic Williams - KeynoteRubyEnRails2007 - Dr Nic Williams - Keynote
RubyEnRails2007 - Dr Nic Williams - Keynote
Dr Nic Williams
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
aglemann
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
David Padbury
 
Introduction To Ruby On Rails
Introduction To Ruby On RailsIntroduction To Ruby On Rails
Introduction To Ruby On Rails
Steve Keener
 
Drupal Javascript for developers
Drupal Javascript for developersDrupal Javascript for developers
Drupal Javascript for developers
Dream Production AG
 

Similar to Getting Started with Mulberry (20)

jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
 
JQuery In Drupal
JQuery In DrupalJQuery In Drupal
JQuery In Drupal
 
JavaScript in Drupal 7: What developers need to know
JavaScript in Drupal 7: What developers need to knowJavaScript in Drupal 7: What developers need to know
JavaScript in Drupal 7: What developers need to know
 
JavaScript in Drupal 7: What developers need to know
JavaScript in Drupal 7: What developers need to knowJavaScript in Drupal 7: What developers need to know
JavaScript in Drupal 7: What developers need to know
 
Kharkivpy#3: Javascript and Python backend
Kharkivpy#3: Javascript and Python backendKharkivpy#3: Javascript and Python backend
Kharkivpy#3: Javascript and Python backend
 
JavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQueryJavaScript the Smart Way - Getting Started with jQuery
JavaScript the Smart Way - Getting Started with jQuery
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
 
Mobile Day - React Native
Mobile Day - React NativeMobile Day - React Native
Mobile Day - React Native
 
Web applications with Catalyst
Web applications with CatalystWeb applications with Catalyst
Web applications with Catalyst
 
Drupal & javascript
Drupal & javascriptDrupal & javascript
Drupal & javascript
 
WebGL and three.js
WebGL and three.jsWebGL and three.js
WebGL and three.js
 
Rails Model Basics
Rails Model BasicsRails Model Basics
Rails Model Basics
 
[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC[Coscup 2012] JavascriptMVC
[Coscup 2012] JavascriptMVC
 
Choosing a Javascript Framework
Choosing a Javascript FrameworkChoosing a Javascript Framework
Choosing a Javascript Framework
 
Having Fun with Play
Having Fun with PlayHaving Fun with Play
Having Fun with Play
 
RubyEnRails2007 - Dr Nic Williams - Keynote
RubyEnRails2007 - Dr Nic Williams - KeynoteRubyEnRails2007 - Dr Nic Williams - Keynote
RubyEnRails2007 - Dr Nic Williams - Keynote
 
Beyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance JavascriptBeyond DOMReady: Ultra High-Performance Javascript
Beyond DOMReady: Ultra High-Performance Javascript
 
HTML5 for the Silverlight Guy
HTML5 for the Silverlight GuyHTML5 for the Silverlight Guy
HTML5 for the Silverlight Guy
 
Introduction To Ruby On Rails
Introduction To Ruby On RailsIntroduction To Ruby On Rails
Introduction To Ruby On Rails
 
Drupal Javascript for developers
Drupal Javascript for developersDrupal Javascript for developers
Drupal Javascript for developers
 

More from Rebecca Murphey

Beyond the DOM: Sane Structure for JS Apps
Beyond the DOM: Sane Structure for JS AppsBeyond the DOM: Sane Structure for JS Apps
Beyond the DOM: Sane Structure for JS Apps
Rebecca Murphey
 
DojoConf: Building Large Apps
DojoConf: Building Large AppsDojoConf: Building Large Apps
DojoConf: Building Large Apps
Rebecca Murphey
 
Lessons from-a-rewrite-gotham
Lessons from-a-rewrite-gothamLessons from-a-rewrite-gotham
Lessons from-a-rewrite-gothamRebecca Murphey
 
Cleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryCleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryRebecca Murphey
 
Functionality Focused Code Organization
Functionality Focused Code OrganizationFunctionality Focused Code Organization
Functionality Focused Code Organization
Rebecca Murphey
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
Rebecca Murphey
 
Delivering a Responsive UI
Delivering a Responsive UIDelivering a Responsive UI
Delivering a Responsive UIRebecca Murphey
 
Dojo Confessions
Dojo ConfessionsDojo Confessions
Dojo Confessions
Rebecca Murphey
 
Jquery Fundamentals
Jquery FundamentalsJquery Fundamentals
Jquery Fundamentals
Rebecca Murphey
 

More from Rebecca Murphey (13)

Beyond the DOM: Sane Structure for JS Apps
Beyond the DOM: Sane Structure for JS AppsBeyond the DOM: Sane Structure for JS Apps
Beyond the DOM: Sane Structure for JS Apps
 
BVJS
BVJSBVJS
BVJS
 
Introducing Mulberry
Introducing MulberryIntroducing Mulberry
Introducing Mulberry
 
DojoConf: Building Large Apps
DojoConf: Building Large AppsDojoConf: Building Large Apps
DojoConf: Building Large Apps
 
Lessons from-a-rewrite-gotham
Lessons from-a-rewrite-gothamLessons from-a-rewrite-gotham
Lessons from-a-rewrite-gotham
 
Lessons from a Rewrite
Lessons from a RewriteLessons from a Rewrite
Lessons from a Rewrite
 
Modern JavaScript
Modern JavaScriptModern JavaScript
Modern JavaScript
 
Cleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQueryCleaner, Leaner, Meaner: Refactoring your jQuery
Cleaner, Leaner, Meaner: Refactoring your jQuery
 
Functionality Focused Code Organization
Functionality Focused Code OrganizationFunctionality Focused Code Organization
Functionality Focused Code Organization
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
 
Delivering a Responsive UI
Delivering a Responsive UIDelivering a Responsive UI
Delivering a Responsive UI
 
Dojo Confessions
Dojo ConfessionsDojo Confessions
Dojo Confessions
 
Jquery Fundamentals
Jquery FundamentalsJquery Fundamentals
Jquery Fundamentals
 

Recently uploaded

Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
Pierluigi Pugliese
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
Globus
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
Vlad Stirbu
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
James Anderson
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
sonjaschweigert1
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Nexer Digital
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
Alex Pruden
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
Aftab Hussain
 
UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
UiPathCommunity
 

Recently uploaded (20)

Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
 
Quantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIsQuantum Computing: Current Landscape and the Future Role of APIs
Quantum Computing: Current Landscape and the Future Role of APIs
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
Alt. GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using ...
 
A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...A tale of scale & speed: How the US Navy is enabling software delivery from l...
A tale of scale & speed: How the US Navy is enabling software delivery from l...
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?Elizabeth Buie - Older adults: Are we really designing for our future selves?
Elizabeth Buie - Older adults: Are we really designing for our future selves?
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
 
Removing Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software FuzzingRemoving Uninteresting Bytes in Software Fuzzing
Removing Uninteresting Bytes in Software Fuzzing
 
UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
 

Getting Started with Mulberry

  • 1. A Mobile App Development Toolkit Rebecca Murphey & Dan Imal Boston Front End Developer Meetup January 2012 Tuesday, January 24, 12
  • 2. Rebecca Murphey Lead JavaScript Developer @rmurphey Dan Imal Senior User Experience Developer @mrdanimal Tuesday, January 24, 12
  • 4. linkage mulberry.toura.com bit.ly/toura-mulberry bit.ly/toura-mulberry-demos Tuesday, January 24, 12
  • 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. Callback Cordova Tuesday, January 24, 12
  • 9. $ mulberry scaffold recipes Tuesday, January 24, 12
  • 15. create content with yaml, markdown & html Tuesday, January 24, 12
  • 16. create functionality with javascript Tuesday, January 24, 12
  • 17. create styles with css & sass Tuesday, January 24, 12
  • 19. $ mulberry serve Tuesday, January 24, 12
  • 20. ohai sane development tools. Tuesday, January 24, 12
  • 21. $ mulberry test Tuesday, January 24, 12
  • 24. $ mulberry deploy Tuesday, January 24, 12
  • 25. it’s just javascript. (ok, and some haml, yaml, & sass.) Tuesday, January 24, 12
  • 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. $YOURAPP/javascript/routes.js mulberry.page('/todos', { name : 'Todos', pageDef : 'todos' }, true); mulberry.page('/completed', { name : 'Completed', pageDef : 'completed' }); #/todos #/completed Tuesday, January 24, 12
  • 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. $YOURAPP/javascript/components/TodoForm/TodoForm.haml %form.component.todo-form %input{ placeholder : 'New todo', dojoAttachPoint : 'descriptionInput' } %button{ dojoAttachPoint : 'saveButton' } Add Tuesday, January 24, 12
  • 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. $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. @touradev @rmurphey @mrdanimal mulberry.toura.com bit.ly/toura-mulberry bit.ly/toura-mulberry-demos Tuesday, January 24, 12
  • 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 instances Tuesday, January 24, 12
  • 35. routes manage high-level application state Tuesday, January 24, 12
  • 36. $YOURAPP/javascript/routes.js mulberry.page('/todos', { name : 'Todos', pageDef : 'todos' }, true); mulberry.page('/completed', { name : 'Completed', pageDef : 'completed' }); #/todos #/completed Tuesday, January 24, 12
  • 37. stores persist data on the device, make that data query-able, and return model instances Tuesday, January 24, 12
  • 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. page de nitions reusable groupings of components and capabilities Tuesday, January 24, 12
  • 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. components receive and render data, and react to user input Tuesday, January 24, 12
  • 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. $YOURAPP/javascript/components/TodoForm/TodoForm.haml %form.component.todo-form %input{ placeholder : 'New todo', dojoAttachPoint : 'descriptionInput' } %button{ dojoAttachPoint : 'saveButton' } Add Tuesday, January 24, 12
  • 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. capabilities provide data to components, and broker communications between them Tuesday, January 24, 12
  • 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. 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. 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) {