Alloy Framework Overview         Mads Møller       Head of Development           Napp CMS           @nappdev          mm@n...
What is Alloy?                 • MVC Framework                 • XML based UI markup                 • Highly customizable...
Titanium App
Alloy App  $.index.open();
Structure            • Primary               • views               • controllers               • styles               • mo...
Views        • IDs and classes        • Platform and form          factor specific markup        • Inline events        • ...
Styles         • TSS format            • Titanium constants            • Localization            • Alloy configuration ite...
Controllers              • Element access via $              • Public interface via exports              • Compiler direct...
Models         • Backbone Models &           Collections         • Persistence adapters         • Migration support
Widgets          • Self-contained UI and logic          • Work in any Alloy app          • Cross-platform          • Simpl...
Compilation              • Generates CommonJS                controller modules              • builtins              • Opt...
Error output               • Faster development iterations               • Surfaces potential errors
Getting Started                  • Quick Start: bit.ly/alloyqs                  • Ti SDK 2.1 or later                  • M...
Showcase           • Lets see some code
Scaffolding
github.com/appcelerator/Codestrong
Mads Møller @nappdevmm@napp.dk
Upcoming SlideShare
Loading in …5
×

Alloy Framework

1,625 views
1,527 views

Published on

General overview of the Alloy Framework.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,625
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • MVC FrameworkCommon, uniform development patternSeparation of concernsViews, controllers, models… also styles, migrations, and a few other powerful featuresDeclarative UIXML-based representation of Ti APIMakes API usage much easierIncreased readability and scalabilityFree and open sourceAvailable on githubLots of contributions already (50+ forks, 250+ stars)Project transparencyHighly customizableOpen sourceWidgetsAdaptersawesome- No “why” slide, because it’s obvious- Will change the way you write Titanium apps forever
  • Hard to identify the overall structure of the UIComments are essentially making this readableRepetitive assignments of stylesNecessary to understand how certain APIs interact (addTab() or window as a creation time property)
  • UI very clearSeparation of view hierarchy and styleAPI level styling, less repetitionNo JS code yet
  • Brief overview of each folder in the structure.
  • Alloy.CFGGenerated from your config.jsonGlobally available values based on deployment type and OSBuiltinsUseful JS libraries integrated with AlloyBackbone & underscoreGrowing list, string operations, titanium animations, social networkingOptimizationsUglifyjsEliminate dead codeCompiler directives (platform, deploy type)Errors- Catch all view, style, and JS errorsTabGroup will tell you if you aren’t adding tabs to it, or if you forget to add a window to the tabSame with navGroup
  • Surfaces potential errors- We’ll be able to catch errors that would occur under only certain circumstances at runtime at compile time instead. Think of the case of a Window that opens from a button click and that Window has invalid code/markup.
  • 175 lines of code Doesn’t even account for how you would interface with the widget (creating tables, handling the returned book data)You need to carry it aroundIt also wouldn’t manage the dependency on the loading widget
  • Alloy Framework

    1. 1. Alloy Framework Overview Mads Møller Head of Development Napp CMS @nappdev mm@napp.dk
    2. 2. What is Alloy? • MVC Framework • XML based UI markup • Highly customizable • Run by Appcelerator • Awesome. Yes, awesome.
    3. 3. Titanium App
    4. 4. Alloy App $.index.open();
    5. 5. Structure • Primary • views • controllers • styles • models • assets • Optional • lib • migrations • widgets • Platform-specific folders
    6. 6. Views • IDs and classes • Platform and form factor specific markup • Inline events • API parsers
    7. 7. Styles • TSS format • Titanium constants • Localization • Alloy configuration items • Group by ID, class, or Ti API • Device queries • Global style
    8. 8. Controllers • Element access via $ • Public interface via exports • Compiler directives • Backbone eventing • Underscore and builtins • Anything Titanium can do
    9. 9. Models • Backbone Models & Collections • Persistence adapters • Migration support
    10. 10. Widgets • Self-contained UI and logic • Work in any Alloy app • Cross-platform • Simple to complex
    11. 11. Compilation • Generates CommonJS controller modules • builtins • Optimizations • Catch errors before runtime
    12. 12. Error output • Faster development iterations • Surfaces potential errors
    13. 13. Getting Started • Quick Start: bit.ly/alloyqs • Ti SDK 2.1 or later • More Information • Wiki docs: http://bit.ly/RzU6Ra • Google Groups: bit.ly/alloy_group • Github: github.com/appcelerator/alloy
    14. 14. Showcase • Lets see some code
    15. 15. Scaffolding
    16. 16. github.com/appcelerator/Codestrong
    17. 17. Mads Møller @nappdevmm@napp.dk

    ×