Appcelerator Alloy Deep Dive - tiTokyo 2013


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Appcelerator Alloy Deep Dive - tiTokyo 2013

  1. 1. Appcelerator® Deep Dive tiTokyo February 16, 2013 Ricardo Alcocer Platform Evangelist @ Appcelerator, Inc. @ricardoalcocer
  2. 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. 3. Download Titanium Studio• Download Titanium Studio from• Make sure you install and configure the necessary SDKs from Apple and Android
  4. 4. Two flavors of Titanium?
  5. 5. Very simple App in Titanium Classic
  6. 6. Files organized by directories
  7. 7. App.JS
  8. 8. Different versions ofApplicationWindow.js
  9. 9. FirstView.js
  10. 10. Enter the MVC Pattern Business logic, data Model manipulation, etcWhat the user Routing, decisionsees View Controller making .XML + .TSS Files .JS Files User
  11. 11. What is Appcelerator® Alloy™?• Official MVC Framework for Titanium• Free and Open Source• Declarative UI• Widgets• Themes
  12. 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. 13. Same App built on Alloy
  14. 14. Dramatic reduction of required files
  15. 15. Write less code!
  16. 16. Alloy provides advanced ways of interacting with XML from Javascript
  17. 17. Basic Folder Structure App Logic App styling (colors, positioning, etc) User Interface Definition
  18. 18. User Interface Definition
  19. 19. User Interface Definition Menu Definition
  20. 20. User Interface Definition Main View Definition
  21. 21. User Interface Definition Main View Definition
  22. 22. Open and Close the menu using Javascript : index.js
  23. 23. Live Demo
  24. 24. Change the look-and-feel andlayout of your App using Themes Let’s add Themes to our App
  25. 25. Themes
  26. 26. Live Demo
  27. 27. Reuse code by creating Widgets Let’s build a Widget for the Menu functionality
  28. 28. Widgets are like “mini-apps”• Similar folder structure• Instead of an “index” file, you have a “widget” file
  29. 29. Widget.json• Contains meta-data about the Widget
  30. 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. 31. Live Demo
  32. 32. Adding data to your app
  33. 33. With Alloy you can use backbone.js to create data-bound controls• Model creation is built into Titanium Studio
  34. 34. The “model file”• The generated “model file” defines a data structure and a data store
  35. 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. 36. Data can be added dynamically• Reference data elements from within your XML
  37. 37. Live Demo
  38. 38. There’s much more!• Sync Adapters• Migrations• Underscore.js functionalities• Command-Line Interface (CLI)• Appcelerator Cloud Services (ACS)
  39. 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. 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. 41. Code• All code samples in this presentation can be found at:
  42. 42. Thank you Ricardo Alcocer ralcocer@appcelerator.comFollow me on Twitter @ricardoalcocer