SlideShare une entreprise Scribd logo
1  sur  42
Appcelerator® Deep Dive
                tiTokyo
                February 16, 2013
                   Ricardo Alcocer
        Platform Evangelist @ Appcelerator, Inc.

    @ricardoalcocer      ralcocer@appcelerator.com
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
Download Titanium Studio
• Download Titanium Studio from
 appcelerator.com
• Make sure you install and configure the
  necessary SDKs from Apple and Android
Two flavors of Titanium?
Very simple App in Titanium
          Classic
Files organized by directories
App.JS
Different versions of
ApplicationWindow.js
FirstView.js
Enter the MVC Pattern

                                    Business logic, data
                            Model   manipulation, etc




What the user                                     Routing, decision
sees
                     View           Controller    making



 .XML + .TSS Files                          .JS Files


                             User
What is Appcelerator® Alloy™?
•   Official MVC Framework for Titanium
•   Free and Open Source
•   Declarative UI
•   Widgets
•   Themes
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
Same App built on Alloy
Dramatic reduction of required
            files
Write less code!
Alloy provides advanced ways of
    interacting with XML from
            Javascript
Basic Folder Structure

             App Logic



             App styling (colors, positioning, etc)


             User Interface Definition
User Interface Definition
User Interface Definition


                    Menu Definition
User Interface Definition




                  Main View Definition
User Interface Definition




                  Main View Definition
Open and Close the menu using
     Javascript : index.js
Live Demo
Change the look-and-feel and
layout of your App using Themes
        Let’s add Themes to our App
Themes
Live Demo
Reuse code by creating
       Widgets
 Let’s build a Widget for the Menu functionality
Widgets are like “mini-apps”

• Similar folder structure
• Instead of an “index”
  file, you have a “widget”
  file
Widget.json

• Contains meta-data about the Widget
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
Live Demo
Adding data to your app
With Alloy you can use backbone.js
   to create data-bound controls
• Model creation is built into Titanium Studio
The “model file”
• The generated
  “model file” defines
  a data structure and
  a data store
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
Data can be added dynamically
• Reference data elements from within your
  XML
Live Demo
There’s much more!
•   Sync Adapters
•   Migrations
•   Underscore.js functionalities
•   Command-Line Interface (CLI)
•   Appcelerator Cloud Services (ACS)
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
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
Code
• All code samples in this presentation can
  be found at:

     http://github.com/ricardoalcocer
Thank you
        Ricardo Alcocer
     ralcocer@appcelerator.com

Follow me on Twitter @ricardoalcocer

Contenu connexe

Tendances

Chapter1 introduction to asp.net
Chapter1  introduction to asp.netChapter1  introduction to asp.net
Chapter1 introduction to asp.net
mentorrbuddy
 

Tendances (19)

Introduction to asp.net
Introduction to asp.netIntroduction to asp.net
Introduction to asp.net
 
Lightning web components
Lightning web components Lightning web components
Lightning web components
 
SPUnite17 Timer Jobs Event Handlers
SPUnite17 Timer Jobs Event HandlersSPUnite17 Timer Jobs Event Handlers
SPUnite17 Timer Jobs Event Handlers
 
O365Con18 - SharePoint Framework for Administrators - Waldek Mastykarz
O365Con18 - SharePoint Framework for Administrators - Waldek MastykarzO365Con18 - SharePoint Framework for Administrators - Waldek Mastykarz
O365Con18 - SharePoint Framework for Administrators - Waldek Mastykarz
 
Rails api + JS app
Rails api + JS appRails api + JS app
Rails api + JS app
 
Value of share point add ins
Value of share point add insValue of share point add ins
Value of share point add ins
 
Chapter1 introduction to asp.net
Chapter1  introduction to asp.netChapter1  introduction to asp.net
Chapter1 introduction to asp.net
 
Introduction to Lightning Web Component
Introduction to Lightning Web Component Introduction to Lightning Web Component
Introduction to Lightning Web Component
 
Lwc presentation
Lwc presentationLwc presentation
Lwc presentation
 
Architecting Lightning Components for Community Builder
Architecting Lightning Components for Community BuilderArchitecting Lightning Components for Community Builder
Architecting Lightning Components for Community Builder
 
Mvc summary
Mvc summaryMvc summary
Mvc summary
 
Lightning web components
Lightning web componentsLightning web components
Lightning web components
 
Tips and Tricks for Building Visual Studio Workflows
Tips and Tricks for Building Visual Studio WorkflowsTips and Tricks for Building Visual Studio Workflows
Tips and Tricks for Building Visual Studio Workflows
 
SPUnite17 Introduction to the Office Dev PnP Core Libraries
SPUnite17 Introduction to the Office Dev PnP Core LibrariesSPUnite17 Introduction to the Office Dev PnP Core Libraries
SPUnite17 Introduction to the Office Dev PnP Core Libraries
 
ECS19 - Nik Charlebois - Automate the Deployment & Monitoring of SharePoint w...
ECS19 - Nik Charlebois - Automate the Deployment & Monitoring of SharePoint w...ECS19 - Nik Charlebois - Automate the Deployment & Monitoring of SharePoint w...
ECS19 - Nik Charlebois - Automate the Deployment & Monitoring of SharePoint w...
 
Implementing Vanilla Web Components
Implementing Vanilla Web ComponentsImplementing Vanilla Web Components
Implementing Vanilla Web Components
 
ECS19 - Michael Greth - Best Practice with Company Video on Microsoft Stream
ECS19 - Michael Greth - Best Practice with Company Video on Microsoft StreamECS19 - Michael Greth - Best Practice with Company Video on Microsoft Stream
ECS19 - Michael Greth - Best Practice with Company Video on Microsoft Stream
 
Creating Custom HTML Helpers in ASP.NET MVC
Creating Custom HTML Helpers in ASP.NET MVCCreating Custom HTML Helpers in ASP.NET MVC
Creating Custom HTML Helpers in ASP.NET MVC
 
ASP.NET MVC 5 and SignalR 2
ASP.NET MVC 5 and SignalR 2ASP.NET MVC 5 and SignalR 2
ASP.NET MVC 5 and SignalR 2
 

Similaire à Appcelerator Alloy Deep Dive - tiTokyo 2013

TiAppCamp Atlanta 2013: Alloy Overview
TiAppCamp Atlanta 2013: Alloy OverviewTiAppCamp Atlanta 2013: Alloy Overview
TiAppCamp Atlanta 2013: Alloy Overview
Jamil Spain
 

Similaire à Appcelerator Alloy Deep Dive - tiTokyo 2013 (20)

modeveast 2012 Appcelerator Alloy & Cloud Services Presentation
modeveast 2012 Appcelerator Alloy & Cloud Services Presentationmodeveast 2012 Appcelerator Alloy & Cloud Services Presentation
modeveast 2012 Appcelerator Alloy & Cloud Services Presentation
 
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
DC Titanium User Group Meetup: Appcelerator Titanium Alloy jan2013
 
TiAppCamp Atlanta 2013: Alloy Overview
TiAppCamp Atlanta 2013: Alloy OverviewTiAppCamp Atlanta 2013: Alloy Overview
TiAppCamp Atlanta 2013: Alloy Overview
 
Angular - Chapter 1 - Introduction
 Angular - Chapter 1 - Introduction Angular - Chapter 1 - Introduction
Angular - Chapter 1 - Introduction
 
Getting started with Appcelerator Titanium
Getting started with Appcelerator TitaniumGetting started with Appcelerator Titanium
Getting started with Appcelerator Titanium
 
Introduction to Appcelerator Titanium
Introduction to Appcelerator TitaniumIntroduction to Appcelerator Titanium
Introduction to Appcelerator Titanium
 
Getting started with titanium
Getting started with titaniumGetting started with titanium
Getting started with titanium
 
Connector API Apps
Connector API AppsConnector API Apps
Connector API Apps
 
IBM Social Business Toolkit
IBM Social Business ToolkitIBM Social Business Toolkit
IBM Social Business Toolkit
 
Introduction to j2 ee frameworks
Introduction to j2 ee frameworksIntroduction to j2 ee frameworks
Introduction to j2 ee frameworks
 
Innovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and FrameworkInnovations in Sencha Tooling and Framework
Innovations in Sencha Tooling and Framework
 
Application Insights for Integration Developers
Application Insights for Integration DevelopersApplication Insights for Integration Developers
Application Insights for Integration Developers
 
Build 2017 - Whats new for Xamarin Devs
Build 2017 - Whats new for Xamarin DevsBuild 2017 - Whats new for Xamarin Devs
Build 2017 - Whats new for Xamarin Devs
 
Sergii Bielskyi "Azure Logic App and building modern cloud native apps"
Sergii Bielskyi "Azure Logic App and building modern cloud native apps"Sergii Bielskyi "Azure Logic App and building modern cloud native apps"
Sergii Bielskyi "Azure Logic App and building modern cloud native apps"
 
Alloy #DMC13
Alloy #DMC13Alloy #DMC13
Alloy #DMC13
 
Angular JS, A dive to concepts
Angular JS, A dive to conceptsAngular JS, A dive to concepts
Angular JS, A dive to concepts
 
AWS Summit London 2014 | Deployment Done Right (300)
AWS Summit London 2014 | Deployment Done Right (300)AWS Summit London 2014 | Deployment Done Right (300)
AWS Summit London 2014 | Deployment Done Right (300)
 
Valentine with Angular js - Introduction
Valentine with Angular js - IntroductionValentine with Angular js - Introduction
Valentine with Angular js - Introduction
 
The future of web development write once, run everywhere with angular js an...
The future of web development   write once, run everywhere with angular js an...The future of web development   write once, run everywhere with angular js an...
The future of web development write once, run everywhere with angular js an...
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 

Plus de ralcocer

Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and AndroidDevelop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android
ralcocer
 
Slides for tiTokyo 2013 - Japanese version
Slides for tiTokyo 2013 - Japanese versionSlides for tiTokyo 2013 - Japanese version
Slides for tiTokyo 2013 - Japanese version
ralcocer
 

Plus de ralcocer (15)

Multi platform development using titanium + alloy
Multi platform development using titanium + alloyMulti platform development using titanium + alloy
Multi platform development using titanium + alloy
 
Building websites with Node.ACS
Building websites with Node.ACSBuilding websites with Node.ACS
Building websites with Node.ACS
 
Develop your first mobile App for iOS and Android
Develop your first mobile App for iOS and AndroidDevelop your first mobile App for iOS and Android
Develop your first mobile App for iOS and Android
 
Slides for tiTokyo 2013 - Japanese version
Slides for tiTokyo 2013 - Japanese versionSlides for tiTokyo 2013 - Japanese version
Slides for tiTokyo 2013 - Japanese version
 
Learning Appcelerator® Alloy™
Learning Appcelerator® Alloy™Learning Appcelerator® Alloy™
Learning Appcelerator® Alloy™
 
De Wordpress.com a Wordpress.org
De Wordpress.com a Wordpress.orgDe Wordpress.com a Wordpress.org
De Wordpress.com a Wordpress.org
 
Barcamp Mayaguez 2012
Barcamp Mayaguez 2012Barcamp Mayaguez 2012
Barcamp Mayaguez 2012
 
Cómo crear plugins para Wordpress
Cómo crear plugins para WordpressCómo crear plugins para Wordpress
Cómo crear plugins para Wordpress
 
Open Source, estándares y arquitecturas Web 2.0
Open Source, estándares y arquitecturas Web 2.0Open Source, estándares y arquitecturas Web 2.0
Open Source, estándares y arquitecturas Web 2.0
 
El pensamiento crítico y el uso de tecnología
El pensamiento crítico y el uso de tecnologíaEl pensamiento crítico y el uso de tecnología
El pensamiento crítico y el uso de tecnología
 
El OpenSource en la educación
El OpenSource en la educaciónEl OpenSource en la educación
El OpenSource en la educación
 
El valor educativo del Open Source
El valor educativo del Open SourceEl valor educativo del Open Source
El valor educativo del Open Source
 
Presentación APH
Presentación APHPresentación APH
Presentación APH
 
Educapr Oct2010
Educapr Oct2010Educapr Oct2010
Educapr Oct2010
 
The Future is Open - Pechakucha@SeriouslyCreative - August 26, 2010
The Future is Open - Pechakucha@SeriouslyCreative - August 26, 2010The Future is Open - Pechakucha@SeriouslyCreative - August 26, 2010
The Future is Open - Pechakucha@SeriouslyCreative - August 26, 2010
 

Dernier

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Dernier (20)

Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 

Appcelerator Alloy Deep Dive - tiTokyo 2013