Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Fokke Zandbergen

January 28, 2013
Tweet

More Decks by Fokke Zandbergen

Other Decks in Programming

Transcript

  1. “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?
  2. TSS XML Views + = Libs Widgets JS definition =

    Models Controllers Alloy.CFG config.json How does Alloy work?
  3. 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
  4. 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
  5. 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
  6. 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
  7. Alloy Views · Themes • Overwrite assets • Overrule styles

    • Global app.tss • platform and density specific (asset) folders • config.json environment/platform dependent selection DEMO
  8. 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
  9. 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
  10. 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
  11. Q&A