Alloy

 Alloy

An in-depth look at the new Alloy MVC-framework for Appcelerator's Titanium platform.

Check the demo source code and links to resources to get you started on Alloy at: http://fokkezb.nl/alloy

C056051a062fb1054cb45d98177384aa?s=128

Fokke Zandbergen

January 28, 2013
Tweet

Transcript

  1. Fokke Zandbergen app imagineer

  2. im·ag·i·neer “to both imagine and create something that is new”

  3. None
  4. ALLOY 28 januari 2012

  5. Where’s alloy? JavaScript Native Titanium Alloy

  6. “An alloy is a mixture or metallic solid solution composed

    of two or more elements” “Alloys usually have different properties from those of the component elements.” What’s an alloy?
  7. What’s in Alloy?

  8. TSS XML Views + = Libs Widgets JS definition =

    Models Controllers Alloy.CFG config.json How does Alloy work?
  9. Views Libs Widgets JS definition = Models Controllers Alloy.CFG config.json

    How does Alloy work?
  10. Libs Widgets JS definition = Models Controllers CommonJS Alloy.CFG config.json

    How does Alloy work?
  11. Libs Widgets JS definition = Models Controllers CommonJS Alloy.CFG How

    does Alloy work?
  12. Collections syncs Stores Libs Widgets Models Controllers CommonJS Alloy.CFG How

    does Alloy work?
  13. optimization Collections syncs Stores Libs Widgets Models Controllers CommonJS Alloy.CFG

    How does Alloy work?
  14. Alloy Views · Markup • XML elements corresponds to Ti.UI

    objects • Require other views and widgets • id for access from controller • platform and formFactor conditions • platform specific folders • bind events to controller methods • bind markup to models via generated controller code DEMO
  15. Alloy Controllers • $.someID to access view elements • exports.baseController

    to inherit a parent controller • platform (OS_) and environment (ENV_) constants • Passing arguments: var args = arguments[0] || {}; • Alloy.Globals namespace • Require libraries from ‘lib’ folder DEMO
  16. Alloy Models • Abstracted BackboneJS, but still a must-read •

    “Collections keep models in memory & synced to a store” • Database > Connection > Result > Row • Easily extend BackboneJS classes • SQL, properties and localStorage sync adapters • Migrations • Model-View binding DEMO
  17. Alloy Views · Styles • CSS like JSON style •

    #ID over .class over element • Titanium constants like Ti.UI.TEXT_ALIGNMENT_LEFT • Alloy.Globals and Alloy.CFG for expressions etc. • platform and formFactor conditions • platform specific folders DEMO
  18. Alloy Views · Themes • Overwrite assets • Overrule styles

    • Global app.tss • platform and density specific (asset) folders • config.json environment/platform dependent selection DEMO
  19. Alloy Widgets • Self-contained Alloy components almost like mini-apps •

    controllers, views, styles, assets, libs • models and theming coming • Require like views or use <Widget> • Use widgets in widgets • Marketplace and NPM-like distribution coming DEMO
  20. Alloy Optimization • From app to Resources folder • Platform

    specific folders, conditional styles, conditional JS unused libraries and builtins all stripped out! • UglifyJS for optimal speed and compactness • Build configuration file for pre and post compile tasks DEMO
  21. How to get started with Alloy? • Get Titanium Studio

    3.x from www.appcelerator.com • Follow me @FokkeZB or fokkezb.nl for upcoming: • Slides • Code shown today • Alloy Quick Start and links to various resources
  22. Q&A

  23. Fokke Zandbergen app imagineer www.fokkezb.nl mail@fokkezb.nl @fokkezb