SlideShare a Scribd company logo
Alloy
MVC Framework for Titanium mobile
About Me


•   Karthi Ponnusamy
•   Mobile Developer @anubavam
•   Titanium Certified Mobile Developer(TCMD)
•   Twitter @karthi_nkl
•   Blog http://www.titaniumtutorial.com/
Agenda




   Appcelerator Titanium Mobile - Intro
   CodeStrong 2012
   Alloy
Appcelerator Titanium Mobile


   Framework for build native mobile, desktop and web
    apps
   Support multiple platform in single code base
   Develop native mobile apps using your web skills
   Open source
   Extend Titanium
   Tons of Features

Recommended for you

Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018

You’re in love with Spring Boot, but you miss your old pal AngularJS? Don’t fear, Vue.js is here! Vue is very similar to AngularJS, but much more powerful, yet slim and light for PWAs. In this session, you’ll see how to build a Spring Boot API and secure it with Spring Security. You’ll also learn how to build a Vue.js PWA, all the while enjoying a bootiful hot-code-reload experience. Lots of live coding in this one! Blog: https://developer.okta.com/blog/2018/12/03/bootiful-spring-boot-java-vue-typescript GitHub: https://github.com/oktadeveloper/spring-boot-vue-example

spring-bootvue.jsvue-cli
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018

Microservices are being deployed by many Java Hipsters. If you're working with a large team that needs different release cycles for product components, microservices can be a blessing. If you're working at your VW Restoration Shop and running its online store with your own software, having five services to manage and deploy can be a real pain. This presentation will show you how to use JHipster to create Angular + Spring Boot apps with a unified front-end. You will leave with the know-how to create your own excellent apps! Bonus: I'll show you how to use Ionic for JHipster to create native applications on mobile. It's pretty darn slick! Blog posts: * https://developer.okta.com/blog/2018/03/01/develop-microservices-jhipster-oauth * https://developer.okta.com/blog/2018/01/30/jhipster-ionic-with-oidc-authentication GitHub: https://github.com/oktadeveloper/okta-jhipster-microservices-oauth-example Download the JHipster Mini-Book v5.0 for free from InfoQ! https://www.infoq.com/minibooks/jhipster-mini-book-5 You can also watch my JHipster Microservices course on Pluralsight. https://www.pluralsight.com/courses/play-by-play-developing-microservices-mobile-apps-jhipster

spring-bootjavamicroservices
React JS
React JSReact JS
React JS

React is an open source JavaScript library for building user interfaces. It was created by Jordan Walke at Facebook in 2011 and is now maintained by Facebook, Instagram, and a community of developers. Major companies like Facebook, Netflix, Instagram, Khan Academy, and PayPal use React to build their interfaces. React uses a virtual DOM for faster rendering and makes components that manage their own state. It uses JSX syntax and a one-way data flow that is declarative and composable.

smgreactjsreact
CodeStrong



   Mobile developer conference
   Meet other mobile developers and companies
   Meet Appcelerator executives and engineers
   Boot camp for mobile developers
Moments of CodeStrong 2012


   Windows 8 Platform support
   Appc Partnership with DENSO Corporation and AT&T
   One-year anniversary of Open Marketplace
   Titanium SDK 3.0
   Alloy MVC framework
   Lanica Platino - Game engine for Titanium
What is Alloy?


   Model-View-Controller (MVC) pattern
    Model      -   Database interface
    View       -   User interface
               -   Presentation Layer
    Controller -   Interacts with data and updates the view
               -   Respond to user interaction
   Component-oriented application framework
   Create reusable components
   Open source
Why Alloy?


   Structure your Titanium applications
   Separates presentation layer
   Speed up development
   Code organization - Easy to maintain
   Code re-use

Recommended for you

What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017

JHipster is an application generator that allows you to create monoliths or microservices, based on Spring Boot and Angular. It leverages Spring Cloud for microservices and contains best-of-breed JavaScript and CSS libraries for creating your UI. In this session, you’ll learn about what’s new in JHipster. Topics include Angular 4, Progressive Web Apps, HTTP/2, JUnit 5 and Spring 5. Monolith Demo: https://github.com/mraible/jhipster4-demo/blob/master/README.adoc Microservices Demo: https://developer.okta.com/blog/2017/06/20/develop-microservices-with-jhipster

jhipsterspring-bootwebpack
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
 Bootiful Development with Spring Boot and Angular - Connect.Tech 2017 Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017

Intro to Spring Boot and Angular presentation from JHipster 4 Workshop on Connect.Tech 2017. To simplify development and deployment, you want everything in the same artifact, so you put on your Angular app "inside" and your Spring Boot app, right? But what if you could create your Angular app as a standalone app and make cross-origin requests to your API? This session shows how to develop with Java 8, Spring Boot, Angular 4, and TypeScript. You'll learn how to create REST endpoints with Spring MVC, Spring Data REST, configure Spring Boot to allow CORS, and create an Angular app to display its data.

angularspring-bootangular-cli
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks

Ionic frameworks is the new kid on the block related to Hybrid Mobile Apps created by Drifty and rapidly growth with a variety of tools like ionic lab, ionic creator, ionic view, ionic crosswalk integration and other exciting tools is coming this year like ionic PUSH. Check this presentation to have a short getting start in this amazing framework. Let's create amazing apps with Ionic. \o/

ionic hybrid mobile-apps web-development angularjs
Requirements & Supported Platform


 Titanium SDK 2.1 or greater
 Node.js 0.6.3 or greater


 Development support - OSX and Windows (Linux support in
  progress)
 Android - 2.2 (API8) or greater
 iPad - 4.2 or greater
 iPhone - 4.2 or greater
Getting Start


   Alloy Quick start Guide - http://bit.ly/alloyqs
   Alloy Google Group - http://bit.ly/alloy_group
   Alloy on Github -
    https://github.com/appcelerator/alloy
   Wiki Docs - http://bit.ly/alloy_docs
Install Alloy



   Download or update Titanium Studio to V3.0
    http://bit.ly/alloy_development


   Install from terminal
    $sudo npm install alloy -g
New Alloy Project

   In Ti Studio
    File > New > Titanium Project > Alloy



   In Terminal
    Create new Titanium Project > open the
    project in Terminal

    $alloy new

Recommended for you

ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET

Troy Miles presented on ReactJS and related technologies. He discussed React which uses a virtual DOM and one-way data flow to build user interfaces. React uses JSX syntax to generate HTML and is component-based. React Router syncs the UI with the URL. Flux and Redux are patterns for managing data flow, with Redux being a predictable state container. Components are used to build reusable UI, and props are used to pass data between components.

flux.netjsx
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework

What happens when you combine Google's AngularJS, the super cool JavaScript MVC Framework with Apache Cordova, the cross platform mobile framework using web technology? You get the Ionic Framework, the super sexy love child of two great frameworks. With Ionic you build mobile apps using the web technology you already know and love. Think the apps will be slow and clunky? Think again, Ionic comes out of the box with well design CSS3 classes to make beautiful and fluid apps. Using Cordova and jQuery Mobile already? Well, with Ionic you will learn to love mobile development again. No more write-only spaghetti code, Ionic makes it easy to create clean, testable, logical mobile apps. Need to support tablet and phone in the same app? Ionic has you covered. You can create one app which will use responsive design to change its look based on the device's screen dimensions. In this talk, I will show how easy it is to create a mobile with Ionic by building a simple but feature full app live. We will start at the command line, with one command, Ionic creates the skeleton of our app. Then using a text editor and the Chrome browser we begin building out our app. We can get it all up and running without the need for a mobile device. We will use live reload so we see our changes as soon as we make them. Once we finish, a few commands deploys our app to a simulated device. Want to get started but heard what a pain it is to install a mobile development environment? Never fear, the Vagrant Ionic Box provides a complete Android development in a virtual environment for Windows, Mac OS X, and Linux. You will be up and coding in no time.

rockncoderangularjsionic framework
Ionic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SFIonic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SF

Here are the Ionic Crash Course slides that I used for Hack-a-ton SF. Visit http://onehungrymind.com/ for videos from the talk and additional content.

angularjsmobilerealtime
Directory Structure



                       
Output Screen
views/index.xml
styles/index.tss

Recommended for you

Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps

You'll learn to build an Angular 9/8 web application from scratch and deploy it to Firebase. Check https://ahmedbouchefra.com

javascripttypescriptangular
Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native BostonPutting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston

This document discusses React Native, a library that allows developers to build mobile apps using React. It provides an overview of React Native, including how it works, its architecture, and how it can blend with native iOS and Android components. It also recommends resources for learning more about React Native, especially the official documentation.

react react-native
Creating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic FrameworkCreating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic Framework

Creating an hybrid app in minutes with Ionic Framework. * Technology presentation * Creating a ionic project * Building android/iOS apps * Debugging tools * Splashscreens and icons helper

angularjscordovaionic
controller/index.js
Create Controller


   In Ti Studio
    (Right-click on a your project > New > Alloy Controller )




   In Terminal
    $alloy generate controller [controller name]
Create Model



   In Ti Studio
    (Right-click on a your project > New > Alloy Model)



   In Terminal
    $alloy generate model todo name:string active:boolean
Platform Specific UI

   Use platform property , which can be ios, android, or
    mobileweb

Recommended for you

Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2

With the progressive growing of Web Applications in the last few years, the new version of this super framework has some awesome new things. Change detection? Syntax sugar? ES6? Native APIs?

angular 2angular
Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)

This document provides an introduction to creating hybrid mobile apps using Ionic and connecting them to IBM Domino. It discusses what hybrid apps and Ionic are, how Ionic uses AngularJS and Cordova to build cross-platform apps, and how to connect an Ionic app to Domino for data via REST. It also covers setting up an initial Ionic app, common UI components, testing and deploying Ionic apps, and additional services like push notifications. The document demonstrates building a basic Ionic app and extending it to retrieve and update real data from a Domino backend over REST.

dominoionicxpages
Intro to react native
Intro to react nativeIntro to react native
Intro to react native

This document provides an overview and introduction to React Native, including: - What React Native is and the problems it solves like enabling cross-platform development using a single JavaScript codebase. - The technologies that comprise React Native like ReactJS and how it binds to native platforms. - Getting started with a basic React Native app and examples of extending it with custom modules. - An overview of the React Native component library and APIs. - Recommendations to get familiar with related technologies like JSX, Flow, and Node.js. - Thoughts on the benefits and challenges of developing with React Native.

react nativereact-nativereactjs
require components

   Break up your application into smaller components
Shared TSS and Global function


   Declare your styles at
    [project root]/app/styles/app.tss

   Declare your global functions/variables at
    [project root]/app/alloy.js
Demo



                     Source Code:

                       https://github.com/appcelerator/
                       alloy/tree/master/test/apps/mod
                       els/todo




  Android   iPhone

More Related Content

What's hot

Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Matt Raible
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
Axway Appcelerator
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Matt Raible
 
Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018
Matt Raible
 
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Matt Raible
 
React JS
React JSReact JS
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
Matt Raible
 
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
 Bootiful Development with Spring Boot and Angular - Connect.Tech 2017 Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Matt Raible
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
Juarez Filho
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
Troy Miles
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
Troy Miles
 
Ionic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SFIonic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SF
Lukas Ruebbelke
 
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps
Ahmed Bouchefra
 
Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native BostonPutting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
stan229
 
Creating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic FrameworkCreating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic Framework
Julien Renaux
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
Dhyego Fernando
 
Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)
Mark Leusink
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
ModusJesus
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin
Ez��chiel Amen AGBLA
 
An Overview of Angular 4
An Overview of Angular 4 An Overview of Angular 4

What's hot (20)

Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
 
Titanium Mobile
Titanium MobileTitanium Mobile
Titanium Mobile
 
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
 
Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018Bootiful Development with Spring Boot and Vue - RWX 2018
Bootiful Development with Spring Boot and Vue - RWX 2018
 
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018Microservices for the Masses with Spring Boot and JHipster - RWX 2018
Microservices for the Masses with Spring Boot and JHipster - RWX 2018
 
React JS
React JSReact JS
React JS
 
What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017What's New in JHipsterLand - Devoxx Poland 2017
What's New in JHipsterLand - Devoxx Poland 2017
 
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
 Bootiful Development with Spring Boot and Angular - Connect.Tech 2017 Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
Bootiful Development with Spring Boot and Angular - Connect.Tech 2017
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
 
Cross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic FrameworkCross Platform Mobile Apps with the Ionic Framework
Cross Platform Mobile Apps with the Ionic Framework
 
Ionic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SFIonic Crash Course! Hack-a-ton SF
Ionic Crash Course! Hack-a-ton SF
 
Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps Learn Angular 9/8 In Easy Steps
Learn Angular 9/8 In Easy Steps
 
Putting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native BostonPutting the Native in React Native - React Native Boston
Putting the Native in React Native - React Native Boston
 
Creating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic FrameworkCreating an hybrid app in minutes with Ionic Framework
Creating an hybrid app in minutes with Ionic Framework
 
Introduction to angular 2
Introduction to angular 2Introduction to angular 2
Introduction to angular 2
 
Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)Creating mobile apps - an introduction to Ionic (Engage 2016)
Creating mobile apps - an introduction to Ionic (Engage 2016)
 
Intro to react native
Intro to react nativeIntro to react native
Intro to react native
 
Talk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG BéninTalk for DevFest 2021 - GDG Bénin
Talk for DevFest 2021 - GDG Bénin
 
An Overview of Angular 4
An Overview of Angular 4 An Overview of Angular 4
An Overview of Angular 4
 

Similar to Titanium Alloy Framework

Appcelerator Titanium Intro (2014)
Appcelerator Titanium Intro (2014)Appcelerator Titanium Intro (2014)
Appcelerator Titanium Intro (2014)
Nicholas Jansma
 
Native Mobile Application Using Open Source
Native Mobile Application Using Open SourceNative Mobile Application Using Open Source
Native Mobile Application Using Open Source
Axway Appcelerator
 
OSCON Titanium Tutorial
OSCON Titanium TutorialOSCON Titanium Tutorial
OSCON Titanium Tutorial
Kevin Whinnery
 
Titanium presentation
Titanium presentationTitanium presentation
Titanium presentation
aaltavas
 
Cross Platform Mobile Technologies
Cross Platform Mobile TechnologiesCross Platform Mobile Technologies
Cross Platform Mobile Technologies
Talentica Software
 
Rapid application development con titanium appcelerator
Rapid application development con titanium appceleratorRapid application development con titanium appcelerator
Rapid application development con titanium appcelerator
Giorgio Mandolini
 
Giorgio Mandolini - Rapid application development con titanium appcelerator
Giorgio Mandolini - Rapid application development con titanium appceleratorGiorgio Mandolini - Rapid application development con titanium appcelerator
Giorgio Mandolini - Rapid application development con titanium appcelerator
gdg-ancona
 
Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]
Sentinel Solutions Ltd
 
Extending Appcelerator Titanium Mobile through Native Modules
Extending Appcelerator Titanium Mobile through Native ModulesExtending Appcelerator Titanium Mobile through Native Modules
Extending Appcelerator Titanium Mobile through Native Modules
omorandi
 
Introduction to building multi platform mobile applications with javascript u...
Introduction to building multi platform mobile applications with javascript u...Introduction to building multi platform mobile applications with javascript u...
Introduction to building multi platform mobile applications with javascript u...
Shoukry Kattan
 
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
Aaron Saunders
 
Introduction to Appcelerator Titanium
Introduction to Appcelerator TitaniumIntroduction to Appcelerator Titanium
Introduction to Appcelerator Titanium
Adam Paxton
 
Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015
Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015
Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015
Adam Paxton
 
Alloy: Deep Dive, Below The Surface, and Other Nautical Metaphors
Alloy: Deep Dive, Below The Surface, and Other Nautical MetaphorsAlloy: Deep Dive, Below The Surface, and Other Nautical Metaphors
Alloy: Deep Dive, Below The Surface, and Other Nautical Metaphors
Tony Lukasavage
 
Getting Started with Titanium
Getting Started with TitaniumGetting Started with Titanium
Getting Started with Titanium
Kevin Whinnery
 
Getting Started with Titanium
Getting Started with TitaniumGetting Started with Titanium
Getting Started with Titanium
Axway Appcelerator
 
Appcelerator Titanium - An Introduction to the Titanium Ecosystem
Appcelerator Titanium - An Introduction to the Titanium EcosystemAppcelerator Titanium - An Introduction to the Titanium Ecosystem
Appcelerator Titanium - An Introduction to the Titanium Ecosystem
Boydlee Pollentine
 
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
Adam Paxton
 
Titanium Meetup Deck
Titanium Meetup DeckTitanium Meetup Deck
Titanium Meetup Deck
sschwarzhoff
 
Platform 4.0 Meetup Launch Event
Platform 4.0 Meetup Launch EventPlatform 4.0 Meetup Launch Event
Platform 4.0 Meetup Launch Event
Fokke Zandbergen
 

Similar to Titanium Alloy Framework (20)

Appcelerator Titanium Intro (2014)
Appcelerator Titanium Intro (2014)Appcelerator Titanium Intro (2014)
Appcelerator Titanium Intro (2014)
 
Native Mobile Application Using Open Source
Native Mobile Application Using Open SourceNative Mobile Application Using Open Source
Native Mobile Application Using Open Source
 
OSCON Titanium Tutorial
OSCON Titanium TutorialOSCON Titanium Tutorial
OSCON Titanium Tutorial
 
Titanium presentation
Titanium presentationTitanium presentation
Titanium presentation
 
Cross Platform Mobile Technologies
Cross Platform Mobile TechnologiesCross Platform Mobile Technologies
Cross Platform Mobile Technologies
 
Rapid application development con titanium appcelerator
Rapid application development con titanium appceleratorRapid application development con titanium appcelerator
Rapid application development con titanium appcelerator
 
Giorgio Mandolini - Rapid application development con titanium appcelerator
Giorgio Mandolini - Rapid application development con titanium appceleratorGiorgio Mandolini - Rapid application development con titanium appcelerator
Giorgio Mandolini - Rapid application development con titanium appcelerator
 
Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]
 
Extending Appcelerator Titanium Mobile through Native Modules
Extending Appcelerator Titanium Mobile through Native ModulesExtending Appcelerator Titanium Mobile through Native Modules
Extending Appcelerator Titanium Mobile through Native Modules
 
Introduction to building multi platform mobile applications with javascript u...
Introduction to building multi platform mobile applications with javascript u...Introduction to building multi platform mobile applications with javascript u...
Introduction to building multi platform mobile applications with javascript u...
 
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
 
Introduction to Appcelerator Titanium
Introduction to Appcelerator TitaniumIntroduction to Appcelerator Titanium
Introduction to Appcelerator Titanium
 
Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015
Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015
Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015
 
Alloy: Deep Dive, Below The Surface, and Other Nautical Metaphors
Alloy: Deep Dive, Below The Surface, and Other Nautical MetaphorsAlloy: Deep Dive, Below The Surface, and Other Nautical Metaphors
Alloy: Deep Dive, Below The Surface, and Other Nautical Metaphors
 
Getting Started with Titanium
Getting Started with TitaniumGetting Started with Titanium
Getting Started with Titanium
 
Getting Started with Titanium
Getting Started with TitaniumGetting Started with Titanium
Getting Started with Titanium
 
Appcelerator Titanium - An Introduction to the Titanium Ecosystem
Appcelerator Titanium - An Introduction to the Titanium EcosystemAppcelerator Titanium - An Introduction to the Titanium Ecosystem
Appcelerator Titanium - An Introduction to the Titanium Ecosystem
 
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...
 
Titanium Meetup Deck
Titanium Meetup DeckTitanium Meetup Deck
Titanium Meetup Deck
 
Platform 4.0 Meetup Launch Event
Platform 4.0 Meetup Launch EventPlatform 4.0 Meetup Launch Event
Platform 4.0 Meetup Launch Event
 

Recently uploaded

How to Configure Time Off Types in Odoo 17
How to Configure Time Off Types in Odoo 17How to Configure Time Off Types in Odoo 17
How to Configure Time Off Types in Odoo 17
Celine George
 
2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference
KlettWorldLanguages
 
How to Store Data on the Odoo 17 Website
How to Store Data on the Odoo 17 WebsiteHow to Store Data on the Odoo 17 Website
How to Store Data on the Odoo 17 Website
Celine George
 
How to Install Theme in the Odoo 17 ERP
How to  Install Theme in the Odoo 17 ERPHow to  Install Theme in the Odoo 17 ERP
How to Install Theme in the Odoo 17 ERP
Celine George
 
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptxBRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
kambal1234567890
 
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptxChapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
Brajeswar Paul
 
The membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERPThe membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERP
Celine George
 
Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17
Celine George
 
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
PECB
 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
marianell3076
 
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ..."DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
thanhluan21
 
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUMENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
HappieMontevirgenCas
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
heathfieldcps1
 
Webinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional SkillsWebinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional Skills
EduSkills OECD
 
National Learning Camp( Reading Intervention for grade1)
National Learning Camp( Reading Intervention for grade1)National Learning Camp( Reading Intervention for grade1)
National Learning Camp( Reading Intervention for grade1)
SaadaGrijaldo1
 
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Neny Isharyanti
 
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
siemaillard
 
Delegation Inheritance in Odoo 17 and Its Use Cases
Delegation Inheritance in Odoo 17 and Its Use CasesDelegation Inheritance in Odoo 17 and Its Use Cases
Delegation Inheritance in Odoo 17 and Its Use Cases
Celine George
 
AI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdfAI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdf
SrimanigandanMadurai
 

Recently uploaded (20)

How to Configure Time Off Types in Odoo 17
How to Configure Time Off Types in Odoo 17How to Configure Time Off Types in Odoo 17
How to Configure Time Off Types in Odoo 17
 
“A NOSSA CA(U)SA”. .
“A NOSSA CA(U)SA”.                      .“A NOSSA CA(U)SA”.                      .
“A NOSSA CA(U)SA”. .
 
2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference2024 KWL Back 2 School Summer Conference
2024 KWL Back 2 School Summer Conference
 
How to Store Data on the Odoo 17 Website
How to Store Data on the Odoo 17 WebsiteHow to Store Data on the Odoo 17 Website
How to Store Data on the Odoo 17 Website
 
How to Install Theme in the Odoo 17 ERP
How to  Install Theme in the Odoo 17 ERPHow to  Install Theme in the Odoo 17 ERP
How to Install Theme in the Odoo 17 ERP
 
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptxBRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
BRIGADA ESKWELA OPENING PROGRAM KICK OFF.pptx
 
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptxChapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
Chapter-2-Era-of-One-party-Dominance-Class-12-Political-Science-Notes-2 (1).pptx
 
The membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERPThe membership Module in the Odoo 17 ERP
The membership Module in the Odoo 17 ERP
 
Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17Views in Odoo - Advanced Views - Pivot View in Odoo 17
Views in Odoo - Advanced Views - Pivot View in Odoo 17
 
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
AI Risk Management: ISO/IEC 42001, the EU AI Act, and ISO/IEC 23894
 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
 
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ..."DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
"DANH SÁCH THÍ SINH XÉT TUYỂN SỚM ĐỦ ĐIỀU KIỆN TRÚNG TUYỂN ĐẠI HỌC CHÍNH QUY ...
 
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUMENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
ENGLISH-7-CURRICULUM MAP- MATATAG CURRICULUM
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
Webinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional SkillsWebinar Innovative assessments for SOcial Emotional Skills
Webinar Innovative assessments for SOcial Emotional Skills
 
National Learning Camp( Reading Intervention for grade1)
National Learning Camp( Reading Intervention for grade1)National Learning Camp( Reading Intervention for grade1)
National Learning Camp( Reading Intervention for grade1)
 
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
Understanding and Interpreting Teachers’ TPACK for Teaching Multimodalities i...
 
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
 
Delegation Inheritance in Odoo 17 and Its Use Cases
Delegation Inheritance in Odoo 17 and Its Use CasesDelegation Inheritance in Odoo 17 and Its Use Cases
Delegation Inheritance in Odoo 17 and Its Use Cases
 
AI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdfAI_in_HR_Presentation Part 1 2024 0703.pdf
AI_in_HR_Presentation Part 1 2024 0703.pdf
 

Titanium Alloy Framework

  • 1. Alloy MVC Framework for Titanium mobile
  • 2. About Me • Karthi Ponnusamy • Mobile Developer @anubavam • Titanium Certified Mobile Developer(TCMD) • Twitter @karthi_nkl • Blog http://www.titaniumtutorial.com/
  • 3. Agenda  Appcelerator Titanium Mobile - Intro  CodeStrong 2012  Alloy
  • 4. Appcelerator Titanium Mobile  Framework for build native mobile, desktop and web apps  Support multiple platform in single code base  Develop native mobile apps using your web skills  Open source  Extend Titanium  Tons of Features
  • 5. CodeStrong  Mobile developer conference  Meet other mobile developers and companies  Meet Appcelerator executives and engineers  Boot camp for mobile developers
  • 6. Moments of CodeStrong 2012  Windows 8 Platform support  Appc Partnership with DENSO Corporation and AT&T  One-year anniversary of Open Marketplace  Titanium SDK 3.0  Alloy MVC framework  Lanica Platino - Game engine for Titanium
  • 7. What is Alloy?  Model-View-Controller (MVC) pattern Model - Database interface View - User interface - Presentation Layer Controller - Interacts with data and updates the view - Respond to user interaction  Component-oriented application framework  Create reusable components  Open source
  • 8. Why Alloy?  Structure your Titanium applications  Separates presentation layer  Speed up development  Code organization - Easy to maintain  Code re-use
  • 9. Requirements & Supported Platform  Titanium SDK 2.1 or greater  Node.js 0.6.3 or greater  Development support - OSX and Windows (Linux support in progress)  Android - 2.2 (API8) or greater  iPad - 4.2 or greater  iPhone - 4.2 or greater
  • 10. Getting Start  Alloy Quick start Guide - http://bit.ly/alloyqs  Alloy Google Group - http://bit.ly/alloy_group  Alloy on Github - https://github.com/appcelerator/alloy  Wiki Docs - http://bit.ly/alloy_docs
  • 11. Install Alloy  Download or update Titanium Studio to V3.0 http://bit.ly/alloy_development  Install from terminal $sudo npm install alloy -g
  • 12. New Alloy Project  In Ti Studio File > New > Titanium Project > Alloy  In Terminal Create new Titanium Project > open the project in Terminal $alloy new
  • 18. Create Controller  In Ti Studio (Right-click on a your project > New > Alloy Controller )  In Terminal $alloy generate controller [controller name]
  • 19. Create Model  In Ti Studio (Right-click on a your project > New > Alloy Model)  In Terminal $alloy generate model todo name:string active:boolean
  • 20. Platform Specific UI  Use platform property , which can be ios, android, or mobileweb
  • 21. require components  Break up your application into smaller components
  • 22. Shared TSS and Global function  Declare your styles at [project root]/app/styles/app.tss  Declare your global functions/variables at [project root]/app/alloy.js
  • 23. Demo Source Code: https://github.com/appcelerator/ alloy/tree/master/test/apps/mod els/todo Android iPhone