Appcelerator Alloy Deep Dive - tiTokyo 2013

Slides for my presentation at tiTokyo 2013

Transcript

1. Ricardo Alcocer Platform Evangelist @ Appcelerator, Inc. @ricardoalcocer ralcocer@appcelerator.com Appcelerator® Deep Dive tiTokyo February 16, 2013
2. About me •  Currently work as Appcelerator Platform Evangelist in the Silicon Valley Area •  Have been developing Apps with Titanium since 2009 •  Former Titanium trainer in the Caribbean and Latin America •  Hacker in constant training
3. Download Titanium Studio •  Download Titanium Studio from appcelerator.com •  Make sure you install and configure the necessary SDKs from Apple and Android
4. Two flavors of Titanium?
5. Very simple App in Titanium Classic
6. Files organized by directories
7. App.JS
8. Different versions of ApplicationWindow.js
9. FirstView.js
10. Enter the MVC Pattern Model   Controller   View   User   Routing, decision making Business logic, data manipulation, etc What the user sees .JS Files .XML + .TSS Files
11. What is Appcelerator® Alloy™? •  Official MVC Framework for Titanium •  Free and Open Source •  Declarative UI •  Widgets •  Themes
12. Why build an MVC Framework? •  Help developers build scalable apps •  Provide a basis for best practices on Titanium development •  Simplify development of Titanium apps •  Make Titanium more approachable to web developers and designers (use of XML, CSS) •  Reduce the amount of code written •  Set the foundation for widget/ component/ sample libraries
13. Same App built on Alloy
14. Dramatic reduction of required files
15. Write less code!
16. Alloy provides advanced ways of interacting with XML from Javascript
17. Basic Folder Structure App  Logic   User  Interface  Defini7on   App  styling  (colors,  posi7oning,  etc)  
18. User Interface Definition
19. User Interface Definition Menu  Defini7on  
20. User Interface Definition Main  View  Defini7on  
21. User Interface Definition Main  View  Defini7on  
22. Open and Close the menu using Javascript : index.js
23. Live Demo
24. Change the look-and-feel and layout of your App using emes Let’s add Themes to our App
25. emes
26. Live Demo
27. Reuse code by creating Widgets Let’s build a Widget for the Menu functionality
28. Widgets are like “mini-apps” •  Similar folder structure •  Instead of an “index” file, you have a “widget” file
29. Widget.json •  Contains meta-data about the Widget
30. To use the Widget •  Define it as a dependency on your “config.json” file •  Use the “Require” tag to include it in your XML file
31. Live Demo
32. Adding data to your app
33. With Alloy you can use backbone.js to create data-bound controls •  Model creation is built into Titanium Studio
34. e “model file” •  The generated “model file” defines a data structure and a data store
35. Bind your model to a UI control •  The “Collection” Tag allows you to define a data collection based on your model, and bind it to your TableView
36. Data can be added dynamically •  Reference data elements from within your XML
37. Live Demo
38. ere’s much more! •  Sync Adapters •  Migrations •  Underscore.js functionalities •  Command-Line Interface (CLI) •  Appcelerator Cloud Services (ACS)
39. Alloy 1.0 is out! Here’s what new: •  Only works with Ti SDK 3.0 and later •  Android fastdev •  New SQL Adapter inline with our updated adapter model •  Content Assist in Studio: it will be officially released in 3.1.0 but it is already available in the nightly stream
40. What’s next with Alloy? •  Debugging of Alloy apps in Studio (coming in 3.1.0) •  Dynamic Styling of Apps •  Adapter framework •  Widget models and themes •  Finalizing model-view binding
41. Code •  All code samples in this presentation can be found at: http://github.com/ricardoalcocer
42. Thank you Ricardo Alcocer ralcocer@appcelerator.com Follow me on Twitter @ricardoalcocer