Cross platform Native apps with JavaScript - Helsinki 2018-04

Apr 24, 20180 likes110 views

- The document discusses using Titanium and Alloy for cross-platform native app development with JavaScript. - Titanium is a JavaScript SDK that allows building native iOS and Android apps. It generates true native code instead of wrapping webviews. - Alloy is a MVC framework built on top of Titanium that makes apps easily styleable, extendable, and shareable across components. - While cross-platform development shares around 90-95% of code, there are still platform differences like navigation patterns that require some platform-specific code or filters.

Using Titanium & Alloy
Rene Pot
Cross platform Native
apps with JavaScript

© 2018 Axway
About me
• Rene Pot
• 29 years old
• Developer Evangelist at Axway Appcelerator
• From Hilversum, Netherlands
• Started developing in 2000
• Fulltime developer since 2008
• Mobile developer since 2011
Wraldpyk
Topener
Wraldpyk
tislack.org

© 2018 Axway
Agenda
• What is Titanium
• What is Alloy
• Cross Platform !== Write once, run everywhere
• Work in Progress
• Noteworthy examples
• Demo
• Workshop

© 2018 Axway
What is Titanium?
• JavaScript SDK

Cross platform Native apps with JavaScript - Helsinki 2018-04

© 2018 Axway
What is Titanium?
• JavaScript SDK
• Run on iOS & Android

© 2018 Axway
What is Titanium?
• JavaScript SDK
• Run on iOS & Android
• It's not hybrid, it's native!

© 2018 Axway
What is Titanium?
• JavaScript SDK
• Run on iOS & Android
• It's not hybrid, it's native!
• Stable and mature platform
• Easily extendable using modules & Hyperloop
• Has MVC framework built in....

© 2018 Axway
What is Alloy?
• MVC framework on top of Titanium SDK

© 2018 Axway
What is Alloy?
• MVC framework on top of Titanium SDK
• Very easily style-able

© 2018 Axway
What is Alloy?
• MVC framework on top of Titanium SDK
• Very easily style-able
• Very easily extendable

© 2018 Axway
What is Alloy?
• MVC framework on top of Titanium SDK
• Very easily style-able
• Very easily extendable
• Theme-able
• Shareable widgets
• Data-binding using backboneJS
• Built-in garbage collection (mostly)

© 2018 Axway
Cross
Platform
!== Write once,
run everywhere

© 2018 Axway
Cross Platform !== Write once, run everywhere
• About 90-95% of the code can be shared
• iOS has a NavigationWindow element

© 2018 Axway
Cross Platform !== Write once, run everywhere
• About 90-95% of the code can be shared
• iOS has a NavigationWindow elemement
• Which can have nested windows

© 2018 Axway
Cross Platform !== Write once, run everywhere
• About 90-95% of the code can be shared
• iOS has a NavigationWindow element
• Which can have nested windows
• Android has ActionBar and MenuItems
• Platform specific won't run on other platforms
• But they can be mixed with platform specific filters
• Or custom and 3rd party modules/libraries.

© 2018 Axway
Work in progress
• Angular Support
• Fully open source
• Passed 10k PR's on
Github

Thanks!
Wraldpyk
Topener
Wraldpyk
tislack.org
rpot@axway.com

This document provides an overview of TypeScript, including what it is, why it was created, its key features and benefits. It begins by explaining what JavaScript is and some of its limitations like dynamic typing and lack of modularity. It then introduces TypeScript as a superset of JavaScript that adds optional static typing and class-based object-oriented programming. The document discusses how TypeScript works with existing JavaScript frameworks and libraries, and highlights features like strong typing, better tooling and explicit intent. It provides details on TypeScript's development environment and open source status before concluding with a demonstration and mentioning some alternative languages.

NativescriptSoftware Infrastructure

NativeScript is a framework that allows building native iOS and Android apps using JavaScript and CSS. It provides a runtime for creating apps with a single JavaScript codebase that can run natively on each platform. Key features include using existing JavaScript and CSS skills, two-way binding, support for Angular 2, and a low learning curve. The document then discusses the NativeScript runtime, popular IDEs and CLI commands, components and layouts, CSS support, debugging, and example apps built with NativeScript.

NativeScript + Push NotificationsLohith Goudagere Nagaraj

Introduction to NativeScript - BuildTruly Native Apps using JavaScriptLohith Goudagere Nagaraj

NativeScript - Open source framework for building truly native mobile apps wi...Dan Wilson

NativeScript is an open source framework that allows developers to use web development skills like JavaScript, TypeScript, and Angular to build fully native mobile applications for iOS and Android. Unlike frameworks like PhoneGap, Ionic, Xamarin, and React Native, NativeScript provides direct access to native mobile APIs and components, allowing developers to build truly native user interfaces and experiences without compromising on performance. NativeScript supports building apps natively for iOS and Android in JavaScript or TypeScript and offers features like cross-platform code sharing, native UI layouts, plugins, and access to native APIs and components.

Native Script by Sebastian WitalecSimone Basso

This document introduces NativeScript, an open source framework that allows developers to build native mobile applications for Android and iOS using JavaScript and TypeScript. It summarizes the current state and roadmap for NativeScript, including plans to release a public beta in February with open sourced code, debugging support, and Windows Universal platform preview. The document encourages developers to get involved in the NativeScript Insiders group and upcoming London meetup.

Novidades do ASP.NET e do Visual Studio 2013Jiéverson Maissiat

The document discusses new features in ASP.NET and Visual Studio 2013, including CodeLens for method return value inspection, a new unified approach to ASP.NET projects allowing use of Web Forms, MVC, and Web API frameworks together, and social login and Bootstrap template support. Key release dates are noted, with ASP.NET 4.5 and Visual Studio 2012 in September 2012 and ASP.NET and Web Tools 2012.2 in February 2013, leading up to the release of Visual Studio 2013 in June 2013.

Scaffolding in One Asp.NetLohith Goudagere Nagaraj

Building APIs the serverless wayTessa Mero

This document is a presentation about building APIs using serverless technologies. It introduces serverless computing and discusses how serverless can be used to create an API with no servers to manage. The presentation demonstrates building an API using the Serverless framework, AWS services like IAM, DynamoDB, and API Gateway. It shows the file structure, serverless.yml configuration file, and code for the API routes. Resources are provided for learning more about serverless and JAMstack development.

ng-conf NativeScript and Angular 2 Workshoptjvantoll

Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015Adam Paxton

NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin

Do you want to build native mobile apps for iOS and Android? Are you a web developer? Then NativeScript is the perfect framework for you. NativeScript is an open source framework for creating native mobile apps using the skills of the web developer: JavaScript, CSS and simple tag-based markup. Create rich, high-performance iOS and Android apps with 100% native UI using many of the skills you already have. Topics covered include: NativeScript framework core concepts and getting started Accessing native device capabilities with JavaScript Building native mobile apps with Angular 2 Common app patterns (login, settings, data bound list and more) Styling NativeScript with CSS Targeting specific devices and screens Debugging and deploying to devices There has never been a better (and easier) way for web developers to create native mobile apps.

[Cordova] Empezando con IonicMoises Alexander Salazar Vila

Ionic es un framework muy popular para el desarrollo de aplicaciones móviles híbridas multi-plataforma usando Cordova. Recursos Internos: [Cordova] Empezando con Ionic https://www.youtube.com/watch?v=-dV_f_IT3uU [Cordova] Empezando con aplicaciones Ionic en Visual Studio http://epicalsoft.blogspot.pe/2016/06/cordova-empezando-con-aplicaciones.html Recursos Externos: Ionic Framework http://ionicframework.com Sass http://sass-lang.com AngularJS https://angularjs.org NodeJS https://nodejs.org npm https://www.npmjs.com Apache Cordova https://cordova.apache.org

Creating Custom HTML Helpers in ASP.NET MVCLohith Goudagere Nagaraj

This document discusses custom HTML helpers in ASP.NET MVC. It begins by explaining what HTML helpers are and how they avoid tedious HTML tagging. It then outlines some standard helpers like label, textbox, and dropdown list helpers. The document demonstrates how to create custom helpers using @helper, static methods, and extension methods. It concludes by thanking the audience and providing contact information.

Xamarin - Victim of Phonegap’s horrible reputationGabor Wnuk

The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...Adam Paxton

Apache Cordova - State of the Union 2014Shazron Abdullah

IONIC - Hybrid Mobile App DevelopmentSwapnil Tripathi ( Looking for new challenges )

Ionic is an open source SDK for building hybrid mobile apps using web technologies like HTML5, CSS, and AngularJS. It provides UI components and tools to develop apps that can be deployed for Android, iOS, and the web. Ionic has over 26,000 GitHub stars and its apps are installed over 200,000 times per month. It uses Angular for its framework and includes features like CLI tools, UI components, and integration with Cordova plugins for native device functionality. Developers can get started by installing Ionic using NPM, generating a new project, and using the CLI to add platforms, pages, and more to build their hybrid mobile apps.

Why choose Angular 6?Priyanka Verma

Web Application Intro for RailsGirls Berlin May 2013Tobias Pfeiffer

Moving Beyond WordPress At Tech in AsiaLester Chan

Ionic intro + tipsTony May

The document discusses the workflow for building mobile apps using Ionic, including prototyping apps without coding using Ionic Creator, iterating on the codebase using live reloading, and deploying apps. It provides demonstrations of Ionic Creator for prototyping app structure and menus, live reloading for debugging, and techniques for optimizing apps such as using Sass and compressing files. The document recommends Ionic for building mobile apps without needing native code skills but notes some limitations may require native code knowledge.

Don't Repeat Yourself, Be AgileVardot

Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6Fabio Biondi

This document discusses AngularDay2018, an event focused on Angular and related technologies. It promotes opportunities for Italian developers, including jobs, collaborations, training, and more. It highlights many features of Angular like TypeScript, components, dependency injection, forms, routing, internationalization, and performance. It also discusses tools like Angular CLI, libraries, Angular Universal for server-side rendering, and long term support.

Draper - Visnupriya - spriteXchangeSPRITLE SOFTWARE PRIVATE LIMIT ED

Draper is an object-oriented layer that sits between view templates and models in Rails applications. It uses decorator objects to clean up complex view logic, provide a more object-oriented way to bundle view code, and make view code easier to test and maintain. The decorator pattern allows adding behavior to individual objects without affecting other objects, and Draper generators can be used to easily create decorators for models.

Introduction to AngularJSJamal Sinclair O'Garro

This document outlines an introductory course on AngularJS taught over two days. Day one covers JavaScript review, Angular basics, and building a sample app. Day two focuses on best practices, using Firebase and the MEAN stack, and advanced topics. The course expects students to have a basic knowledge of JavaScript, HTML, CSS, and the MVC design pattern. It introduces key Angular concepts like directives, data binding, services and controllers. Students will learn to build a single-page application with Angular.

iOS & Android apps using Parse and XamarinCraig Dunn

High performance apps with TitaniumRene Pot

Totally Build Apps for Free! (not really)Tony Hillerson

More Related Content

What's hot (20)

Scaffolding in One Asp.NetLohith Goudagere Nagaraj

Building APIs the serverless wayTessa Mero

ng-conf NativeScript and Angular 2 Workshoptjvantoll

Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015Adam Paxton

NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin

[Cordova] Empezando con IonicMoises Alexander Salazar Vila

Creating Custom HTML Helpers in ASP.NET MVCLohith Goudagere Nagaraj

Xamarin - Victim of Phonegap’s horrible reputationGabor Wnuk

The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...Adam Paxton

Apache Cordova - State of the Union 2014Shazron Abdullah

IONIC - Hybrid Mobile App DevelopmentSwapnil Tripathi ( Looking for new challenges )

Why choose Angular 6?Priyanka Verma

Web Application Intro for RailsGirls Berlin May 2013Tobias Pfeiffer

Moving Beyond WordPress At Tech in AsiaLester Chan

Ionic intro + tipsTony May

Don't Repeat Yourself, Be AgileVardot

Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6Fabio Biondi

Draper - Visnupriya - spriteXchangeSPRITLE SOFTWARE PRIVATE LIMIT ED

Introduction to AngularJSJamal Sinclair O'Garro

iOS & Android apps using Parse and XamarinCraig Dunn

Scaffolding in One Asp.NetLohith Goudagere Nagaraj

Building APIs the serverless wayTessa Mero

ng-conf NativeScript and Angular 2 Workshoptjvantoll

Intro to Appcelerator Titanium - Code for Fort Lauderdale 2015Adam Paxton

NativeScript: Cross-Platform Mobile Apps with JavaScript and AngularTodd Anglin

[Cordova] Empezando con IonicMoises Alexander Salazar Vila

Creating Custom HTML Helpers in ASP.NET MVCLohith Goudagere Nagaraj

Xamarin - Victim of Phonegap’s horrible reputationGabor Wnuk

The Big Easy: Native Mobile App Development with Appcelerator Titanium and Ja...Adam Paxton

Apache Cordova - State of the Union 2014Shazron Abdullah

IONIC - Hybrid Mobile App DevelopmentSwapnil Tripathi ( Looking for new challenges )

Why choose Angular 6?Priyanka Verma

Web Application Intro for RailsGirls Berlin May 2013Tobias Pfeiffer

Moving Beyond WordPress At Tech in AsiaLester Chan

Ionic intro + tipsTony May

Don't Repeat Yourself, Be AgileVardot

Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6Fabio Biondi

Draper - Visnupriya - spriteXchangeSPRITLE SOFTWARE PRIVATE LIMIT ED

Introduction to AngularJSJamal Sinclair O'Garro

iOS & Android apps using Parse and XamarinCraig Dunn

Similar to Cross platform Native apps with JavaScript - Helsinki 2018-04 (20)

High performance apps with TitaniumRene Pot

Totally Build Apps for Free! (not really)Tony Hillerson

Native - Hybrid - Web Mobile ArchitecturesPhong Le Duy

BudapestJS meetup: Cross platform with Titanium and AlloyRene Pot

Rene Pot gave a presentation about Titanium, a cross-platform JavaScript SDK for building mobile apps. Some key points: - Titanium allows building apps that run natively on iOS and Android from one codebase. - It is a stable, enterprise-backed platform that is independent and easy to learn compared to alternatives. - The Alloy MVC framework simplifies app structure and includes features like data binding and theme support. - Future plans include beta support for VueJS and Angular frameworks.

Developing a native mobile apps using Ionic&CordovaDamir Beylkhanov

- Hybrid mobile apps are built using web technologies like HTML, CSS, and JavaScript but wrapped in a native container using frameworks like Cordova or Apache Cordova. This allows them to work as native apps and access device capabilities. - Ionic is a popular framework for developing interactive hybrid mobile apps that uses Angular and supports mobile-specific components. Apps are developed using web technologies and published using Cordova. - The architecture involves a client-side single page app interacting via RESTful services with a server-side backend for business logic and data storage. Cordova tools provide access to native device features.

Mobile Fest 2018. Илья Иванов. Как React-Native перевернул наше представление...MobileFest2018

Как вообще возможно писать по-настоящему нативные мобильные приложения на JavaScript? Мы разберем почему React-Native отличается от гибридных и нативных методов разработки и как в результате получается нативное приложение. Работая уже два года с React-Native, я покажу не только общие концепции, но и так-же как эта технология работает изнутри.

BelTech 2017 - Building Quality in the BrowserEamonn Boyle

The document provides recommendations for building quality JavaScript applications. It recommends adopting a single page architecture with a front-end JavaScript application communicating with backend services via RESTful APIs. It suggests using modern frameworks like Angular and React that are supported by large companies. It also recommends using static typing with TypeScript to catch errors earlier. Finally, it emphasizes applying software best practices like separation of concerns, modular design, and testing to JavaScript development.

Cross-Platform Native Apps with JavaScriptFokke Zandbergen

Building Cross Platform Mobile AppsShailendra Chauhan

Tools For Mobile Web Design and App CreationCarli Spina

Hybrid Mobile Development with Apache Cordova and Ryan Cuprak

Apache Cordova is used to wrap HTML5 applications into native mobile applications that can access device capabilities. A demo application was shown that used Cordova for the mobile portion and Java EE 7 on the server side. Key technologies discussed included Cordova plugins, RESTful web services, Java API for JSON, and Java API for WebSockets for bidirectional communication between the mobile app and server. jQuery Mobile was also mentioned as a potential UI framework.

Your choices for building a mobile app in 2016Jad Salhani

Web goes Native - iOS und Android Apps mit dem Ionic & Capacitor Frameworkssuserd5b22d

Hybrid App Development | Build Cross-Platform Apps EfficientlyDigital Hub Solution

I knew there had to be a better way to build mobile appsAlius Petraška

The time has never been better to learn mobile application development. For many app ideas, you don’t even need any prior native development knowledge. You can get started today with knowledge of HTML, CSS and JavaScript. Unlike native mobile development, mobile applications using web technologies can support many mobile platforms. I shared my own experience on building hybrid applications based on PhoneGap also explained why I suddenly changed my own opinion about native apps and switched back to Xamarin.

Xamarin介紹Proaben Sherlock

Xamarin enables developers to write native mobile apps in C# that can run on iOS, Android, and other platforms. It allows for sharing of significant code across these platforms while still providing native user interfaces and performance. Developers can leverage existing .NET skills and libraries and write less platform-specific code through approaches like Xamarin.Forms. Xamarin apps can be distributed through standard mobile app stores and access the full APIs of each platform for full feature parity. It aims to improve developer productivity over traditional cross-platform approaches through increased code reuse capabilities.

Shifting landscape of mobile automation, and the future of Appium - Jonathan ...Applitools

The document summarizes the shifting landscape of mobile test automation over the past 5 years. It discusses the major open source and proprietary frameworks for iOS and Android testing, including Appium, Espresso, XCUITest, EarlGrey, Detox, and others. It provides an overview of each framework's capabilities and adoption. It also envisions where mobile automation may be headed in the next 5 years, such as supporting new form factors, platforms, and types of testing beyond functional testing.

Emulators as an Emerging Best Practice for API ProvidersCisco DevNet

The document discusses API emulators as an emerging best practice for API providers. It describes Stève Sfartz's background and role at Cisco developing tools for developers. It then discusses how emulators can enhance the developer experience by allowing local testing and debugging of APIs without access to production services. Specific examples of emulators created for Cisco's Tropo and Webex APIs are presented, along with lessons learned around their development and use cases. The presentation concludes by advocating for API providers to consider adding emulators to better support their developer communities.

Build Your First iPhone or Android App with Telerik AppBuilderJeffrey T. Fritz

This document introduces Telerik Platform, which allows developers to build hybrid mobile applications using HTML, CSS, and JavaScript that run as native apps. It provides tools like AppBuilder, a cloud-based IDE, compiler, and simulator/debugger. Apps can be deployed to iOS and Android through QR codes or app stores. Additional Telerik services like Kendo UI, Backend Services, and Analytics can enhance apps. Developers are encouraged to sign up for a Platform account and try the tools through various SDKs and extensions.

Cross platform mobile application developmentwebprogr.com

High performance Cross Platform PhoneGap application development framework is a perfect complement to Adobe’s broad family of developer solutions, and will allow all of us to continue to provide content publishers and developers with the best, cutting-edge solutions for creating innovative applications across platforms and devices.It is a real rapid application development tool. Developing Phonegap apps are best suited for Enterprise apps and Enterprise mobile solutions

High performance apps with TitaniumRene Pot

Totally Build Apps for Free! (not really)Tony Hillerson

Native - Hybrid - Web Mobile ArchitecturesPhong Le Duy

BudapestJS meetup: Cross platform with Titanium and AlloyRene Pot

Developing a native mobile apps using Ionic&CordovaDamir Beylkhanov

Mobile Fest 2018. Илья Иванов. Как React-Native перевернул наше представление...MobileFest2018

BelTech 2017 - Building Quality in the BrowserEamonn Boyle

Cross-Platform Native Apps with JavaScriptFokke Zandbergen

Building Cross Platform Mobile AppsShailendra Chauhan

Tools For Mobile Web Design and App CreationCarli Spina

Hybrid Mobile Development with Apache Cordova and Ryan Cuprak

Your choices for building a mobile app in 2016Jad Salhani

Web goes Native - iOS und Android Apps mit dem Ionic & Capacitor Frameworkssuserd5b22d

Hybrid App Development | Build Cross-Platform Apps EfficientlyDigital Hub Solution

I knew there had to be a better way to build mobile appsAlius Petraška

Xamarin介紹Proaben Sherlock

Shifting landscape of mobile automation, and the future of Appium - Jonathan ...Applitools

Emulators as an Emerging Best Practice for API ProvidersCisco DevNet

Build Your First iPhone or Android App with Telerik AppBuilderJeffrey T. Fritz

Cross platform mobile application developmentwebprogr.com

Cross platform Native apps with JavaScript - Helsinki 2018-04

1. Using Titanium & Alloy Rene Pot Cross platform Native apps with JavaScript

2. © 2018 Axway About me • Rene Pot • 29 years old • Developer Evangelist at Axway Appcelerator • From Hilversum, Netherlands • Started developing in 2000 • Fulltime developer since 2008 • Mobile developer since 2011 Wraldpyk Topener Wraldpyk tislack.org

11. © 2018 Axway What is Titanium? • JavaScript SDK • Run on iOS & Android • It's not hybrid, it's native! • Stable and mature platform • Easily extendable using modules & Hyperloop • Has MVC framework built in....

19. © 2018 Axway What is Alloy? • MVC framework on top of Titanium SDK • Very easily style-able • Very easily extendable • Theme-able • Shareable widgets • Data-binding using backboneJS • Built-in garbage collection (mostly)

25. © 2018 Axway Cross Platform !== Write once, run everywhere • About 90-95% of the code can be shared • iOS has a NavigationWindow elemement • Which can have nested windows • Android has ActionBar and MenuItems

27. © 2018 Axway Cross Platform !== Write once, run everywhere • About 90-95% of the code can be shared • iOS has a NavigationWindow elemement • Which can have nested windows • Android has ActionBar and MenuItems • Platform specific won't run on other platforms

29. © 2018 Axway Cross Platform !== Write once, run everywhere • About 90-95% of the code can be shared • iOS has a NavigationWindow elemement • Which can have nested windows • Android has ActionBar and MenuItems • Platform specific won't run on other platforms • But they can be mixed with platform specific filters

31. © 2018 Axway Cross Platform !== Write once, run everywhere • About 90-95% of the code can be shared • iOS has a NavigationWindow element • Which can have nested windows • Android has ActionBar and MenuItems • Platform specific won't run on other platforms • But they can be mixed with platform specific filters • Or custom and 3rd party modules/libraries.

45. Thanks! Wraldpyk Topener Wraldpyk tislack.org [email protected]

Cross platform Native apps with JavaScript - Helsinki 2018-04

Recommended

More Related Content

What's hot (20)

Similar to Cross platform Native apps with JavaScript - Helsinki 2018-04 (20)

Cross platform Native apps with JavaScript - Helsinki 2018-04