DOCSLIB.ORG

Creating 'Native' Cross-Platform Apps

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Creating 'Native' Cross-Platform Apps Creating 'Native' Cross-Platform Apps Brameshmadhav S • To the Future! Agenda • React Native • Native Script • Demo To the Future PhoneGap took us this far, but is it time to move on? Understanding the Spectrum Full Capability Titanium ReactNative Cordova | Xamarin Adv. UI interaction Web Developer Skills Fast performance Native Hybrid Access to native platform App store distribution App store distribution Single Multiple Platform Platform That poor HTML5 Long time ago I thing Web Developer Skills was THE thing. Instant updates Not anymore Partial Capability App Development Approaches Web Application Hybrid Application Mixed Hybrid Application Native Application • Runs on Mobile Browser • Web code executed • Augment web code with • Developed using native • HTML/CSS/JS within native container Native SDK to create SDK Programming model • Native WebView or unique experience • Native appearance and • Dynamic Web Cordova Wrapper • Native and Web device capabilities Application or Ajax • HTML/CSS/JS components coexist • Backend integration Application or Single components are • Take advantage of best using REST JSON/XML Page Apps packaged with the app of both approaches web services • No device Feature • Backend integration • Backend integration • Distributed through Integration using REST/JSON (Not using REST JSON web appstore • Not distributed through HTML) services appstore, easier • Distributed through • Distributed through adoption appstore appstore Native Mobile Experience/Capabilities/Services/ Portability (Cross Device Reusability) Maintenance Cost (TCO) React Native The website you want to convert to an app React Native • Uses similar philosophy to React • Virtual DOM is the new playground • In brief, the application UI is simply expressed as a function of the current application state • Competes with Appcelerator Titanium • Application logic is written and runs in JavaScript, whereas your application UI is fully native. • Therefore you have none of the compromises typically associated with HTML5 UI. • Open source! Getting started with React Native . npm install -g react-native-cli . react-native init <project-name> . For iOS : • <project-name>/ios/<project-name>.xcodeproj . For Android : • react-native run-android from the project folder . This will open a terminal which will help live reload the project . Usually at : http://localhost:8081/index.ios.bundle Demo Summary – React Native • All the goodness to Titanium packaged with brand Facebook • The concept of virtual DOM driving React is so amazing • Amazing Community support and traction • React native for Android was released less than a month ago • Production ready? Yes and No • Facebook Groups app runs completely on this NativeScript Do you need to know the web to write cross platform mobile apps? != No DOM NativeScript A runtime for building != and running native iOS, Android, and (soon) Windows No cross compilation Phone apps with a single, JavaScript code base != Direct access to native APIs in JS Why NativeScript? • Skills reuse • Standards-based JavaScript, CSS, optionally TypeScript • Code reuse • npm modules, 3rd-party iOS and Android libraries • Easily use native APIs • No wrappers to access native APIs • Use native UI elements • Open source! How Does NativeScript work ? NativeScript runs JavaScript on a JavaScript VM • JavaScriptCore on iOS • V8 on Android NativeScript Modules • NativeScript-provided modules that provide cross-platform functionality. • There are dozens of them and they’re easy to write yourself. • NativeScript modules follow Node module’s conventions (CommonJS). https://www.npmjs.com/search?q=nativescript NativeScript CLI • npm install –g nativescript (https://github.com/nativescript/nativescript-cli) • System Requirements • Android : JDK, Apache Ant, Android SDK • iOS : Xcode, Xcode CLI tools, iOS SDK • tns create <project name> • cd <project name> • tns platform add ios | android • tns run ios | android --emulator • Backend-as-a-service • Push notifications, cloud data, file storage, etc. • Analytics • AppBuilder • Cloud builds (build iOS apps on Windows, Windows Phone apps on a Mac) • NativeScript debugging and tooling • Screen Builder (app scaffolding) • IDE extensions • Paid service with 30-day free trial • https://www.telerik.com/purchase/platform Demo Summary – NativeScript • The power of true native apps at your disposal! As simple as that • Hybrid mobile apps are of the past. Time to look at the Future-Past • https://www.nativescript.org/showcases shows all the apps built with Native script. It’s pretty nascent. • Backed by Telerik with their Telerik Platform model • Community support is excellent Thank you, © 2015 SAPIENT CORPORATION .
Load more

Recommended publications
  • Comparison and Evaluation of Cross Platform Mobile Application Development Tools
    International Journal of Applied Mathematics, Electronics and Computers 8(4): 273-281, 2020 INTERNATIONAL JOURNAL OF APPLIED MATHEMATICS International Open Access ELECTRONICS AND COMPUTERS Volume 08 Issue 04 www.dergipark.org.tr/ijamec e-ISSN: 2147-8228 December, 2020 Research Article Comparison and Evaluation of Cross Platform Mobile Application Development Tools Mehmet ISITAN a , Murat KOKLU b a Sakarya University, Faculty of Computer and Information Science, Department of Software Engineering b Selcuk University, Faculty of Technology, Department of Computer Engineering ARTICLE INFO ABSTRACT Article history: In order to develop a mobile application, it is necessary to develop software separately for each Received 28 November 2020 operating system to be outputted. In response to this problem, frameworks that can give application Accepted 6 December 2020 outputs for more than one operating system by developing applications on only one platform have Keywords: been developed. With the recent diversification of these systems, which are called cross platform Cross Platform, mobile application development tools, which one should be preferred has become a problem for Mobile Development, Mobile Frameworks, developers. In this study, the cross-platform mobile application development tools that have come One Code to the fore in recent years will be determined and evaluated separately based on the pros and cons of distinguishing parameters. With the help of the applications to be developed, values such as processor, memory, battery and network usage, rendering time, opening time, installation file size, application size will be measured. It is also aimed to help developers find out which framework is more suitable for their needs by comparing them on topics such as popularity, third party software support, operating systems that can be outputted, development languages and ease of use, speed - performance.
    [Show full text]
  • Lightweight Django USING REST, WEBSOCKETS & BACKBONE
    Lightweight Django USING REST, WEBSOCKETS & BACKBONE Julia Elman & Mark Lavin Lightweight Django LightweightDjango How can you take advantage of the Django framework to integrate complex “A great resource for client-side interactions and real-time features into your web applications? going beyond traditional Through a series of rapid application development projects, this hands-on book shows experienced Django developers how to include REST APIs, apps and learning how WebSockets, and client-side MVC frameworks such as Backbone.js into Django can power the new or existing projects. backend of single-page Learn how to make the most of Django’s decoupled design by choosing web applications.” the components you need to build the lightweight applications you want. —Aymeric Augustin Once you finish this book, you’ll know how to build single-page applications Django core developer, CTO, oscaro.com that respond to interactions in real time. If you’re familiar with Python and JavaScript, you’re good to go. “Such a good idea—I think this will lower the barrier ■ Learn a lightweight approach for starting a new Django project of entry for developers ■ Break reusable applications into smaller services that even more… the more communicate with one another I read, the more excited ■ Create a static, rapid prototyping site as a scaffold for websites and applications I am!” —Barbara Shaurette ■ Build a REST API with django-rest-framework Python Developer, Cox Media Group ■ Learn how to use Django with the Backbone.js MVC framework ■ Create a single-page web application on top of your REST API Lightweight ■ Integrate real-time features with WebSockets and the Tornado networking library ■ Use the book’s code-driven examples in your own projects Julia Elman, a frontend developer and tech education advocate, started learning Django in 2008 while working at World Online.
    [Show full text]
  • Native Cross-Platform Mobile Application Development
    Native Cross-platform Mobile Application Development by W. de Kraker (0815283) CMI-Program Informatics – Rotterdam University August 14, 2012 First supervisor Mr. Y. S. Tjang Second supervisor Mr. A. Chamani Abstract Nowadays mobile devices are vastly integrated into modern society. They bring us one step closer to satisfy our ever growing need to have information available anytime, anywhere. To help gain access to information on mobile devices we use software applications, so called apps. However, the fragmented nature of today’s mobile ecosystem poses a challenge for developers to develop apps which are suitable to run on all mobile devices, since there is no de facto standard in cross-platform app development. Currently there are several solutions available to solve the cross-platform challenge. Lunatech, having expressed its interest in mobile app development, would like to know which solution, if any, suits Lunatechs needs. A study has been set up in order to resolve this question, the results of which are laid out in this thesis. ii Versions Version Date Author Details 0.1 12/07/2012 W. de Kraker Intial draft 0.2 20/07/2012 W. de Kraker Improved main research structure 0.3 08/08/2012 W. de Kraker Changes based on feedback from Mr. Y.S. Tjang 0.4 12/08/2012 W. de Kraker Changes based on feedback from Mr. S. de Kaper 1.0 14/08/2012 W. de Kraker Final version Table 1: Version history iii Preface You are looking at the thesis for the graduation internship on the subject of "cross-platform mobile application development while retaining the native look and feel".
    [Show full text]
  • Learning Javascript Design Patterns
    Learning JavaScript Design Patterns Addy Osmani Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo Learning JavaScript Design Patterns by Addy Osmani Copyright © 2012 Addy Osmani. All rights reserved. Revision History for the : 2012-05-01 Early release revision 1 See http://oreilly.com/catalog/errata.csp?isbn=9781449331818 for release details. ISBN: 978-1-449-33181-8 1335906805 Table of Contents Preface ..................................................................... ix 1. Introduction ........................................................... 1 2. What is a Pattern? ...................................................... 3 We already use patterns everyday 4 3. 'Pattern'-ity Testing, Proto-Patterns & The Rule Of Three ...................... 7 4. The Structure Of A Design Pattern ......................................... 9 5. Writing Design Patterns ................................................. 11 6. Anti-Patterns ......................................................... 13 7. Categories Of Design Pattern ............................................ 15 Creational Design Patterns 15 Structural Design Patterns 16 Behavioral Design Patterns 16 8. Design Pattern Categorization ........................................... 17 A brief note on classes 17 9. JavaScript Design Patterns .............................................. 21 The Creational Pattern 22 The Constructor Pattern 23 Basic Constructors 23 Constructors With Prototypes 24 The Singleton Pattern 24 The Module Pattern 27 iii Modules 27 Object Literals 27 The Module Pattern
    [Show full text]
  • Web Age Webinar Series
    Welcome! Check that you can "raise your hand" next to your name on the left When we start I'll ask everyone to raise their hand to verify you can hear me To ask a question during the presentation type it in the “Questions” section and raise your hand to help me notice it ©WebAgeSolutions.com 1 CLASH OF THE JAVASCRIPT TITANS: BACKBONE.JS AND ANGULAR.JS A comparison and contrast between Backbone.js and Angular.js ©WebAgeSolutions.com 2 Introduction Eric W. Greene Web Application Developer [email protected] Web Age Solutions Web Age Solutions provides mentoring services and skills training to companies navigating the world of online business. ©WebAgeSolutions.com 3 Overview of Talk The Problem to be Solved Framework or Library? Differences and Benefits of Each The Big Issue: Two-Way Data Binding Browserify and Node.js Conclusion ©WebAgeSolutions.com 4 The Problem to be Solved What problem do JavaScript solutions like Backbone.js and Angular.js solve? Single Page Applications (SPAs) SPAs need the following • Structure to manage UI and application data • Method for accessing network resources such as REST services • Routing System for going from page to page without reloading the web page from the server • Template System for constructing views ©WebAgeSolutions.com 5 Framework or Library? What is the difference between a framework and library? Why is Backbone.js a library? Why is Angular.js a framework? Which are the benefits and costs of using frameworks and libraries? ©WebAgeSolutions.com 6 The Big Issue: Two-Way Data Binding Two-Way Data
    [Show full text]
  • Survey on Techniques for Cross Platform Mobile Application Development
    International Journal of Advanced Research in Computer Engineering & Technology (IJARCET) Volume 3 Issue 10, October 2014 Survey on Techniques for Cross Platform Mobile Application Development Apurva P. Pawar, Vandana S. Jagtap, Mamta S. Bhamare Abstract— Smart phone is used by most of the population. Different internal architecture of Operating System Over thousands of applications are used daily and a new becomes a reason for redevelopment of application to make it application gets launched as per need. In order to do work on run on each Operating System which in turn incurs lot of cost phones itself many desktop applications are getting converted to mobile version by developers. And it’s real challenge to market in terms of time, money, efforts. Consider example of are these applications and reach to the maximum users. From document editor software like Adobe Reader and Kingsoft developer point of view for application to reach to most of the office. People are also doing work through their Smartphone end users it need to run on max platforms, this needs too. It‘s not necessary that everyone is using windows redevelopment of application, we can solve this problem to some operating system on their Smartphone. Each mobile operating extent by developing cross platform application without system uses different programming model, developer would additional investment. Several techniques are available which will help to make it happen. Survey of these techniques could require additional overhead and troubleshooting since help application developers to make a proper choice. developer might have good hands on particular single platform. Hence, making software as cross platform Index Terms— Cross Compiled Approach, Cross Platform application can be a good option.
    [Show full text]
  • Notes - Javascript - Commonjs Modules
    Notes - JavaScript - CommonJS Modules Dr Nick Hayward A collection of notes &c. on plain JavaScript modules, in particular usage of CommonJS modules and Node.js. Contents Intro General usage Folders as modules package.json index.js require pattern Dynamic require for modules Module design Intro CommonJS is a module library and pattern popularised by Node.js. It is still in regular use for modern apps, both Node.js and client-side based apps. For client-side, we may use build tools, such as WebPack and Browserify, to bundle module dependencies for online usage in a browser-based environment. General usage In CommonJS, every file is a module. Each module has an implicit local scope, and the global scope needs to be accessed explicitly. The module code is wrapped in a function by the loading call, which provides this local scope. CommonJS modules may export a public interface for consumption in apps - dependencies are resolved using require function calls. require function calls are synchronous, returning the exposed interface for the required module. By default, functions in a module will be local to that module. We may then choose the functions, properties &c. to export in the public API for the module. e.g. // CONSTRUCTOR - create basic keyboard object for testing... function Keyboard(keyDetails) { ({ total: this.total, x: this.x, y: this.y, white: this.white, black: this.black } = keyDetails ); } module.exports = Keyboard; The function Keyboard is now available to other files (modules) by requiring the file, const keyboard = require('./basic1'); Local, relative modules may use the standard Unix path to define file access for the module relative to the application, e.g.
    [Show full text]
  • Nativescript O Architecture O Developer Experience O Future Goals • Conclusions Hybrid Approaches
    Runtime Based Hybrid Apps Ruben Smeets Kris Aerts ES&S 26/04/2016 Agenda • Hybrid Approaches • Runtime Based CPT Candidates • Comparison of Titanium / React Native / NativeScript o Architecture o Developer Experience o Future goals • Conclusions Hybrid Approaches WebView Based Runtime Based WebView Container JavaScript Runtime Web Code JavaScript HTML CSS JS Native UI + Device APIs Device APIs Hybrid Approaches WebView Based Web Code UI frameworks & libs DOM - based WebGL - based React Canvas Famo.us + Architectural frameworks Combined frameworks Hybrid Approaches WebView Based Web Code Pure Hybrid Apps Tools Properties UI frameworks & libs • Single WebView • Content & navigation DOM - based WebGL - based in HTML5 • Thin native wrapper React Canvas Famo.us + Architectural frameworks Combined frameworks Hybrid Approaches WebView Based Web Code Pure Hybrid Apps Tools Properties UI frameworks & libs • Single WebView • Content & navigation DOM - based WebGL - based in HTML5 • Thin native wrapper React Canvas Mixed hybrid Apps Pattern Tools Properties • Multiple WebViews Famo.us Blended • Native navigation • E.g.: Apple Store + • WebViews for later stages of Architectural Mullet user flow frameworks • E.g.: Walmart • WebViews for little used or frequently Combined frameworks Fallback changing content • E.g.: Instagram Hybrid Approaches Runtime Based WebView Based Runtime Based WebView Container JavaScript Runtime Web Code JavaScript HTML CSS JS Native UI + Device APIs Device APIs Hybrid Approaches Runtime Based – The “WHY” • Consistent with
    [Show full text]
  • Partitioning Web Applications Between the Server and the Client
    Journal of Web Engineering, Vol. 9, No. 3 (2010) 207–226 c Rinton Press PARTITIONING WEB APPLICATIONS BETWEEN THE SERVER AND THE CLIENT JANNE KUUSKERI Department of Software Systems, Tampere University of Technology, P.O. Box 553 Tampere, 33103, Finland janne.kuuskeri@tut.fi TOMMI MIKKONEN Department of Software Systems, Tampere University of Technology, P.O. Box 553 Tampere, 33103, Finland tommi.mikkonen@tut.fi Received June 21, 2009 Revised January 14, 2010 Web 2.0 and rich Internet application technologies are offering more and more sophis- ticated means for building compelling applications. At the same time the development of applications is becoming increasingly complex. While web applications are commonly relying on server side processing, we aim at implementing a “fat client” and running applications mostly on the client. With this in mind we derive a set of guidelines on how the applications should be partitioned between the server and the client. By following these directives and leaning on the traditional principles of good software development, we address the issues of complexity that have lately emerged in web development. Keywords: Web Application, AJAX, JavaScript, Comet 1 Introduction Web application development is in the middle of a paradigm shift. Users are getting used to web applications with dynamic content and enhanced user experience. User interfaces are no longer updated the whole screen at a time, and servers are able to feed data to them spontaneously. From the users’ point of view, web applications are thus becoming more and more like traditional desktop applications. While the user interfaces of web applications are becoming more usable, the underlying standards and protocols are not evolving at the same pace.
    [Show full text]
  • Mobile Application Development Approaches: a Comparative Analysis on the Use of Storage Space
    XXIV Congreso Argentino de Ciencias de la Computación Tandil - 8 al 12 de octubre de 2018 Mobile Application Development Approaches: A Comparative Analysis on the Use of Storage Space Juan Fernández Sosa1, Pablo Thomas1, Lisandro Delía1, Germán Cáseres1, Leonardo Corbalán1, Fernando Tesone1, Alfonso Cuitiño1, Patricia Pesado1 1 Computer Science Research Institute LIDI (III-LIDI)* School of Computer Science, National University of La Plata, La Plata, Buenos Aires, Argentina *Partner Center of the Scientific Research Agency of the Province of Buenos Aires (CICPBA) { jfernandez, pthomas, ldelia, gcaseres, corbalan, ftesone, acuitino,ppesado}@lidi.info.unlp.edu.ar Summary. The purpose of software development is meeting both functional and non-functional requirements. In mobile device applications, non-functional requirements are more relevant due to the restrictions inherent to these devices. One of these restrictions is the availability of limited storage space. Therefore, the size of a mobile application affects user preference for use. In this article, we assess how the choice of a mobile application development approach affects the final size of the application; we focus our analysis on text-, audio- and video-based applications. Keywords: Mobile devices, multi-platform mobile applications, native mobile applications, application size. 1 Introduction Application development for mobile devices poses a number of challenges specific to this activity that were not present in traditional software development [1]. The diversity of platforms, programming languages, and development tools, as well as device heterogeneity as regards computation power, storage and battery life, are just some of the aspects that Software Engineers have to consider. In many cases, the success of an application for mobile devices depends on its popularity.
    [Show full text]
  • MOBILE APPLICATION - CROSS DOMAIN DEVELOPMENT and STUDY of PHONEGAP IJCRR Section: Healthcare Sci
    Review Article MOBILE APPLICATION - CROSS DOMAIN DEVELOPMENT AND STUDY OF PHONEGAP IJCRR Section: Healthcare Sci. Journal Impact Factor Mathangi Krishnamurthi 4.016 Information Technology Department, Pune Institute of Computer Technologies, Pune, MS, India. ABSTRACT There has been a significant development in the market for smart devices and its computational power in the last decade. The combination of computational power, easy portability, inherent features and the ease with which it reaches the common man has propelled this development. The need for mobile solutions has increased exponentially due to the easy and prevalent access to these smart devices. The dilemma met by those wanting to target these consumers was mainly as to which methodology to adopt. Given the fragmented Smartphone market, native development of application was found resource wise and financially not lucrative. There came a need for a “Develop One Time, Deploy anywhere anytime” solution. So this has been solved by the cross-platform mobile application development tool. Phonegap is one such popular framework which embeds HTML5 and CSS3 to provide the needed functionality. Given its generic nature, there is still some need for consideration of its performance as op- posed to a native application. Key Words: Smart devices, Cross-platform development, Phonegap INTRODUCTION CHALLENGES IN MOBILE APPLICATION DEVEL- OPMENT There has been an immense development in the domain of mobile devices. Recent data claims 95.5% of the world pop- Universal user interface ulation have a mobile service subscription [1].The reason for Each platform that is device specific has some guidelines this may include, Smartphones rival the traditional resources to follow for the development of the user interface [3].
    [Show full text]
  • Arcgis API for Javascript Advanced Topics
    ArcGIS API for JavaScript Advanced Topics Andy Gup & John Gravois ArcGIS API for JavaScript 4.x • Modern architecture • Better control over application life-cycle • Stronger infrastructure for building larger apps Working with Modern JavaScript –2017+ • Stepping beyond plain ol’ JavaScript • ES2015, Node.js, Webpack, TypeScript, etc etc • Transpilers, module loaders, task runners, etc Getting to know modern JavaScript… Almost all modern JavaScript apps use a framework The Good News… A variety of solutions available on github! A partial list… • https://github.com/Esri/angular-esri-map • https://github.com/jwasilgeo/angular2-esri- playground • https://github.com/Esri/esri-system-js • https://github.com/lobsteropteryx/esri- webpack-typescript Two main approaches Dedicated module loader Exclude and Require What are modules? • Different types: AMD, ES6, commonjs, etc • Reusable chunk of JavaScript • Logically encapsulate functionality • Sometimes referred to as JS libraries Example: AMD Modules Module Loaders Dojo uses an AMD module loader Other frameworks use a variety of module loaders: e.g. webpack, SystemJS, RequireJS… Dedicated module loader Example usage: Angular + webpack • Use esriLoader or angular2-esri-loader • Inject ArcGIS JS API as a <script> • Thin wrapper around global require() • Allows for lazy loading ArcGIS modules Dedicated Module Loader Examples • https://github.com/Esri/angular-esri-map • https://github.com/tomwayson/esri-loader Dedicated module loader Advantages: - Sandboxes ArcGIS module dependencies - Only load ArcGIS
    [Show full text]