Using React Native to Create a Reusable Mobile App Architecture

Jul 17, 20170 likes768 views

We have recently adopted React Native for our client mobile projects. This talk will cover some of the challenges faced and the choices made, from choosing ‘the best’ routing library to deploying and updating their apps. I also include a comparison of React Native and alternative mobile solutions and the relative merits of each.

RICHARDMCMENAMINFULLSTACK2017
USINGREACTNATIVETOCREATEA
REUSABLEMOBILEARCHITECTURE

RICHARD MCMENAMIN 
UI and Mobile Lead 
@RICHMCM

OUR STORY
GOOD
An existing codebase can be
wrapped in Cordova and exported.
Can build a responsive desktop
app and get a mobile app for free.
There are a number of Cordova
plugins to take advantage of native
features.
BAD
Performance intensive applications
may be noticeably slower.
Past a certain point, you will spend a
lot of time trying to emulate native
animations and experience.
The feel is more of a web app, less
smooth animations and transitions.

Body Level One
Body Level Two
Body Level Three
Body Level Four
Body Level Five
Title Text
NotiﬁcationsLatest
news
Commenting Feedback
React Native
User
Proﬁles
DIGITAL TRANSFORMATION PROGRAM

What we liked:
• Declarative style
• Component-based composition
• Hot module reloading
DEVELOPER EXPERIENCE

NavigationExperimental
ARCHITECTURE
Redux
React Navigation

CREATE-REACT-NATIVE APP
DEVELOPMENT ACCELERATORS
Expo

BETA DISTRIBUTION
Features:
Distribution
Version tracking
User management
Release notes
Crashlytics
Feedback 
Code push
As HockeyApp plus:
Automated device testing 
Push notiﬁcations

#Upload and notify
hockey
slack
versio
n
version cert
sigh
gym
versio
n
versio
n
FASTLANE
# Building and signing
cert #code signing
sigh #provisioning proﬁle
gym #build and sign
# Version Increment
increment_version_number
commit_version_bump
push_to_git_remote
Conﬁg
# Version Increment
increment_version_number
commit_version_bump
push_to_git_remote
# Building and signing
cert
sigh
gym
#Upload and notify
hockey
slack

• HockeyApp analytics
• Surface data through CMS
MEASURING SUCCESS & FEEDBACK

• Bridging required in cases
• Maturity - particular for people coming from native world
• Regular breaking changes requiring frequent updates to stay in sync
GOTCHAS

WebWorks allows web developers to build BlackBerry applications using HTML5, CSS, and JavaScript. Some key capabilities include building apps with native functionality, integrating with BlackBerry services like BBM and Push, and distributing apps through the BlackBerry World app store. The process involves setting up a development environment with the WebWorks SDK, emulating apps using Ripple, and packaging and signing apps for testing on devices.

The Mobile ToolChain with Fastlane - Code Red Talk at RedBlackTreeRedBlackTree

Fastlane is a tool that automates beta deployments and releases for iOS & Android apps. It generates screenshots, takes care of code signing, and uses simple commands. To install Fastlane, use Homebrew to install and then run fastlane init in your project directory. This will create a Fastfile and other files in a fastlane folder to configure build scripts. Typical Fastlane scripts contain lanes for different build processes, like incrementing build numbers, building with gym, uploading to Testflight with testflight, and uploading screenshots to iTunes Connect with deliver. These scripts can be run with commands like fastlane beta or fastlane appstore to streamline the deployment process compared to using Xcode alone.

IonicMike Hartington

This document discusses building mobile apps using HTML, CSS, and JavaScript with frameworks like Cordova and Ionic. It outlines some of the downsides of native mobile development like requiring separate code bases for each platform. Frameworks like Cordova and Ionic allow using web technologies to build apps that can be deployed to mobile devices and access device features. Ionic in particular provides UI components and tools to simplify development of Angular apps for mobile. The document encourages trying out Ionic by installing it globally and generating a starter project.

Pepperoni – A framework for spicing up your mobile apps with React NativeFuturice

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

Native vs. Hybrid AppsVisual Net Design

Universal Windows PlatformSoftware Infrastructure

This document discusses the Universal Windows Platform (UWP). It defines a UWP app as an application that runs on the UWP and targets device families rather than a specific OS. Key points are that UWP apps are packaged using the .AppX format, there is a common API across devices, and they can be adapted for different screen sizes using responsive design techniques. The document also covers how to develop UWP apps in Visual Studio 2015, how to convert existing apps to the UWP format, and considerations for porting a specific app called BranchApp.

Reimagining Cordova: Building Cross-Platform Web Apps with CapacitorIonic Framework

This document discusses Capacitor, a new cross-platform runtime for building web apps that addresses some limitations of Cordova. Capacitor allows building apps once that can run on iOS, Android, desktop and web using modern native tools. It is inspired by Cordova, React Native and Turbolinks and aims to provide full control over native platforms while maintaining backwards compatibility with Cordova plugins. The document demonstrates Capacitor's camera, notifications and toast plugins working across platforms and encourages developers to try it out from the source code and GitHub page listed. It concludes with a Q&A with the CEO of Ionic, the company behind Capacitor.

Ionic frameworkSoftware Infrastructure

Enterprise Hybrid Feasibility AnalysisLawrence Nyakiso

Introduction to Mobile DevelopmentUniversity of Central Lancashire

This document provides an overview of the topics that will be covered in a lecture on mobile development for Android. The lecture will discuss mobile devices, operating systems like Android, how mobile apps differ from mobile web apps, cross-platform development, using XML for layouts and Java for programming, device sensors like the camera and GPS, considerations for user experience and interaction design, and the requirements for a group project to build an Android application.

Flutter workshopNarayan Vyas

This document provides an introduction to mobile app development using Flutter. It discusses different approaches to app development like native, hybrid and cross-platform. It then describes Flutter as an open-source SDK created by Google to build apps for multiple platforms from a single codebase using Dart programming language. It explains some important Flutter widgets like MaterialApp, Scaffold, AppBar, Container, Row, Column for building app UI. It also discusses using packages, Firebase and databases in Flutter app development.

XamarinSoftware Infrastructure

The document discusses developing cross-platform mobile applications using Xamarin. It introduces Xamarin, which allows developers to build native iOS and Android apps using C# and .NET. It highlights that Xamarin apps look and feel native while sharing code across platforms. The document also covers architecting mobile apps with Xamarin, using Xamarin.Forms to build user interfaces with shared code, and includes a demo section.

Hybrid application developmentKnoldus Inc.

Hybrid App Development with PhoneGapDotitude

This document discusses hybrid app development with PhoneGap. It begins with an overview comparing native, web, and hybrid apps. It then provides an introduction to PhoneGap/Cordova, describing it as an open-source framework that allows using standard web technologies for cross-platform development. The document demonstrates PhoneGap CLI and plugin APIs, and shows demos of Adobe Cloud Build and automating builds with Jenkins.

Top Cordova Challenges and How to Tackle ThemIonic Framework

One of the best things about hybrid development is the ability to develop native-powered apps without being a native mobile expert. Thanks to the open source Cordova project, we can access native device features like Camera, GPS, and more, with basic JavaScript. But, Cordova can also be one of the most challenging. In this webinar, Matt Netkow and special guest Bryant Plano (Ionic Customer Success team) cover the top Cordova challenges and the best strategies to overcome them. Learn how to tackle dependency management, address failed builds, craft ongoing maintenance strategies, and more. https://ionicpro.wistia.com/medias/74n19v7ods

Silverlight 2 with Visual Studio 2008 and Expression BlendCaleb Jenkins

This document provides an overview of Silverlight including its capabilities, development tools, and resources for learning more. It discusses features like media playback, animation, data binding, isolated storage, and networking. Examples of tools mentioned include Visual Studio, Expression Blend, and libraries like WCF and LINQ. Resources recommended for learning Silverlight include tutorials on silverlight.net, books, and developer tools for debugging.

Hybrid mobile appsErik Paulsson

This document discusses hybrid mobile apps, which are native apps that use an embedded browser to run some or all of their user interface. Hybrid apps combine the advantages of native apps like being downloaded from app stores with the advantages of web apps like being able to write code once and deploy to multiple platforms. Frameworks exist that allow hybrid apps to access native device capabilities like the camera from JavaScript. The document argues that with frameworks, hybrid apps can provide rich experiences comparable to native apps.

Mapping and Geolocation on the Flash PlatformRyan Stewart

Top five reasons you should prefer flutter app developmentSolution Analysts

Capacitor 1.0 launchIonic Framework

The document summarizes the launch of Capacitor 1.0, a new way to build native mobile apps with Ionic. It introduces Capacitor as the spiritual successor to Cordova, highlighting key differences like using modern native tools on iOS and Android. The presentation demonstrates migrating an existing Ionic app to use Capacitor APIs through adding them to the project. Resources provided include the Capacitor documentation, GitHub repositories, and enterprise support options.

Why react native has become the winning choice for cross platform developmentShelly Megan

Developing and Designing Native Mobile Apps in Xamarin StudioXamarin

With an inspired development environment comprised of powerful code completion, support for TestFlight and a dynamic, modern debugger, Xamarin Studio allows developers to build better apps for iOS, Android and Mac. Join Xamarin Developer Evangelist Mike Bluestein as he gives a demo and in-depth look at some of our favorite Xamarin Studio features, including full support for NuGet packages, extensive documentation for the .NET Base Class Libraries (BCL), F# support, and the ability to build native user interfaces with our iOS and Android designers.

Telerik AppBuilder 101Sam Basu

The document discusses hybrid mobile development using Telerik AppBuilder and Xamarin. Telerik AppBuilder allows developing cross-platform mobile apps using HTML5, CSS3, and JavaScript that can be deployed natively to iOS and Android. It integrates simulators and live syncing. Apps can be published directly to app stores without needing a Mac. Xamarin allows developing cross-platform apps using C# that are compiled to native packages, maximizing code reuse. Both tools address the challenges of developing for multiple mobile platforms but require perfecting the user experience for each.

DroidCon 2011: Developing HTML5 and hybrid Android apps using PhonegapAyushman Jain

Phonegap allows developing hybrid mobile apps using HTML5, CSS, and JavaScript that can be deployed across various platforms like Android and iOS. It provides APIs to access native device functionality like contacts and sensors from webviews. The presentation demonstrated building basic and advanced Phonegap apps for Android using tools like Phonegap Build, Dojo Mobile, Sencha Touch, Maqetta, and Ripple. It promotes Phonegap for developing cross-platform mobile apps more easily than purely native or web approaches.

Flutter vs React Native 2019Rockers Technology

Getting started with flutterrihannakedy

Flutter is an open-source UI software development kit created by Google that allows developers to build mobile, web, and desktop applications from a single codebase. It uses widgets to build applications and provides tools for compiling code to native code. Flutter includes a rich set of widgets, support for plugins, and capabilities for hot reloading and running applications during development. Apps built with Flutter are high performance, can run on multiple platforms, and Flutter provides free and open tools for getting started with development.

How much would it cost to hire developers in indiaYour Dedicated Developers

Have you ever wondered that how much would it cost you for hiring developers?? Well the cost of hiring a web or mobile app developer primarily relies on the platform on which the website or the mobile app is to be built. If the developer has working experience on advanced technologies like AI, IoT, and Blockchain, the cost may increase. In this blog you'll be able to calculate, how different technologies/platforms could cost you and will get to know the cost of hiring developers in India.

Why Businesses Should Hire React Native Developers to Build the Best Mobile A...Noman Shaikh

Rho mobile v4 - DroidCon Paris 18 june 2013Paris Android User Group

The document summarizes Mark Kirstein's presentation at the 2011 APAC Developer Conference about RhoMobile Suite. It provides an overview of RhoMobile Suite which allows developing cross-platform native mobile applications using HTML5, discusses key features like cross-platform portability and exploiting device capabilities, and previews new features of RhoMobile Suite 4.0 like expanded device support and improvements to RhoElements, RhoStudio, and RhoConnect. It also promotes the RhoMobile developer community and resources for getting started with RhoMobile development.

More Related Content

What's hot (20)

Ionic frameworkSoftware Infrastructure

Enterprise Hybrid Feasibility AnalysisLawrence Nyakiso

Introduction to Mobile DevelopmentUniversity of Central Lancashire

Flutter workshopNarayan Vyas

XamarinSoftware Infrastructure

Hybrid application developmentKnoldus Inc.

Hybrid App Development with PhoneGapDotitude

Top Cordova Challenges and How to Tackle ThemIonic Framework

Silverlight 2 with Visual Studio 2008 and Expression BlendCaleb Jenkins

Hybrid mobile appsErik Paulsson

Mapping and Geolocation on the Flash PlatformRyan Stewart

Top five reasons you should prefer flutter app developmentSolution Analysts

Capacitor 1.0 launchIonic Framework

Why react native has become the winning choice for cross platform developmentShelly Megan

Developing and Designing Native Mobile Apps in Xamarin StudioXamarin

Telerik AppBuilder 101Sam Basu

DroidCon 2011: Developing HTML5 and hybrid Android apps using PhonegapAyushman Jain

Flutter vs React Native 2019Rockers Technology

Getting started with flutterrihannakedy

How much would it cost to hire developers in indiaYour Dedicated Developers

Ionic frameworkSoftware Infrastructure

Enterprise Hybrid Feasibility AnalysisLawrence Nyakiso

Introduction to Mobile DevelopmentUniversity of Central Lancashire

Flutter workshopNarayan Vyas

XamarinSoftware Infrastructure

Hybrid application developmentKnoldus Inc.

Hybrid App Development with PhoneGapDotitude

Top Cordova Challenges and How to Tackle ThemIonic Framework

Silverlight 2 with Visual Studio 2008 and Expression BlendCaleb Jenkins

Hybrid mobile appsErik Paulsson

Mapping and Geolocation on the Flash PlatformRyan Stewart

Top five reasons you should prefer flutter app developmentSolution Analysts

Capacitor 1.0 launchIonic Framework

Why react native has become the winning choice for cross platform developmentShelly Megan

Developing and Designing Native Mobile Apps in Xamarin StudioXamarin

Telerik AppBuilder 101Sam Basu

DroidCon 2011: Developing HTML5 and hybrid Android apps using PhonegapAyushman Jain

Flutter vs React Native 2019Rockers Technology

Getting started with flutterrihannakedy

How much would it cost to hire developers in indiaYour Dedicated Developers

Similar to Using React Native to Create a Reusable Mobile App Architecture (20)

Why Businesses Should Hire React Native Developers to Build the Best Mobile A...Noman Shaikh

Rho mobile v4 - DroidCon Paris 18 june 2013Paris Android User Group

6 Best JavaScript Framework for Mobile Apps Trending in 2023.pdfBaek Yongsun

React Native - Build Native Mobile AppMobio Solutions

Why big organizations like tesla, facebook, walmart, skype are using react na...MoonTechnolabsPvtLtd

The creators of Facebook laid the foundation of React Native – an astonishingly powerful and effective system that developers all over the world swear by. It gave brands like Instagram, Airbnb, Skype, Walmart, Wix, Tesla, SoundCloud, and many others the wings they needed to fly. These brands released world-renowned apps that everyone is using these days. React Native is an exciting open-source framework that’s the most favored choice for the development of both Android and iOS applications.

Reasons to Choose React Native for building Social Media/Networking Apps!Shelly Megan

Multiple social media applications like Facebook, Pinterest, Discord, Skype, Instagram, etc. have leveraged the benefits of React Native app development services to attain popularity and success. The advantages associated with building a social media app in React Native are cross-platform app development, highly reusable code and components, the availability of ready-to-use libraries, a rich UI/UX, native capabilities, improved Google search indexing, reduced time-to-market, and cost-effective development.

Getting Started With React Native PresntationKnoldus Inc.

Why is React Native the Best Choice for Mobile App Development.pdfTechugo

React Native Guide A Hybrid Framework for Mobile AppsInexture Solutions

Reactjs Vs React Native – Key Difference, Advantages, And DisadvantagesAndolasoft Inc

React vs angular what to choose for your appConcetto Labs

Advantages of building Social Media Apps in React Native Shelly Megan

What is React Native and When to Choose It For Your Project.pdfNarola Infotech

React vs React Native - Know the DifferenceQuokka Labs

React is a JavaScript library used for building user interfaces on the web, while React Native is a framework that allows developers to build native mobile apps using JavaScript. React focuses on web development, while React Native is specifically designed for mobile app development, utilizing native components for better performance. Visit our website to know more detailed information about this.

What is React Native and Why Should You Choose It For Mobile AppNicole Khoo

The Ultimate Guide to React Native App Development Services | iTechnolabsiTechnolabs

iTechnolabs is a leading mobile and react native app development company. The company employs a team of top app developers, designers, and strategists who are dedicated to creating bleeding-edge mobile applications for start-ups and enterprise clients that are featured in app stores. The team at iTechnolabs builds experiences rather than merely apps. The company creates multi-level software solutions such as iOS app development, Android app development, Web app development, IoT, Wearables, and latest technologies app and web development. Visit our site: https://itechnolabs.ca/react-native-app-development-company/

From mobile browser to mobile appRyan Stewart

Hire React Native Developer | Baseline IT DevelopmentBaselineit Development

Why react native is the best choice for app development processOrange Mantra

What to choose for Mobile app development- React Native vs Native.Techugo

React Native has been at the forefront of the mobile app development world for quite some time now. It has taken the tech world by storm by allowing developers to create native mobile apps for both iOS and Android using a single codebase. Although React Native app development has proven successful for businesses, it’s important to know how it works and why it’s the best fit for your mobile project over other native technologies. In this blog post, we’ll go over some of the known pros and cons of React Native, as well as discuss other alternatives.

Why Businesses Should Hire React Native Developers to Build the Best Mobile A...Noman Shaikh

Rho mobile v4 - DroidCon Paris 18 june 2013Paris Android User Group

6 Best JavaScript Framework for Mobile Apps Trending in 2023.pdfBaek Yongsun

React Native - Build Native Mobile AppMobio Solutions

Why big organizations like tesla, facebook, walmart, skype are using react na...MoonTechnolabsPvtLtd

Reasons to Choose React Native for building Social Media/Networking Apps!Shelly Megan

Getting Started With React Native PresntationKnoldus Inc.

Why is React Native the Best Choice for Mobile App Development.pdfTechugo

React Native Guide A Hybrid Framework for Mobile AppsInexture Solutions

Reactjs Vs React Native – Key Difference, Advantages, And DisadvantagesAndolasoft Inc

React vs angular what to choose for your appConcetto Labs

Advantages of building Social Media Apps in React Native Shelly Megan

What is React Native and When to Choose It For Your Project.pdfNarola Infotech

React vs React Native - Know the DifferenceQuokka Labs

What is React Native and Why Should You Choose It For Mobile AppNicole Khoo

The Ultimate Guide to React Native App Development Services | iTechnolabsiTechnolabs

From mobile browser to mobile appRyan Stewart

Hire React Native Developer | Baseline IT DevelopmentBaselineit Development

Why react native is the best choice for app development processOrange Mantra

What to choose for Mobile app development- React Native vs Native.Techugo

Using React Native to Create a Reusable Mobile App Architecture

1. RICHARDMCMENAMINFULLSTACK2017 USINGREACTNATIVETOCREATEA REUSABLEMOBILEARCHITECTURE

2. RICHARD MCMENAMIN  UI and Mobile Lead  @RICHMCM

3. OUR STORY GOOD An existing codebase can be wrapped in Cordova and exported. Can build a responsive desktop app and get a mobile app for free. There are a number of Cordova plugins to take advantage of native features. BAD Performance intensive applications may be noticeably slower. Past a certain point, you will spend a lot of time trying to emulate native animations and experience. The feel is more of a web app, less smooth animations and transitions.

4. Body Level One Body Level Two Body Level Three Body Level Four Body Level Five Title Text NotiﬁcationsLatest news Commenting Feedback React Native User Proﬁles DIGITAL TRANSFORMATION PROGRAM

5. DIGITAL TRANSFORMATION PROGRAM

6. What we liked: • Declarative style • Component-based composition • Hot module reloading DEVELOPER EXPERIENCE

7. NavigationExperimental ARCHITECTURE Redux React Navigation

8. CREATE-REACT-NATIVE APP DEVELOPMENT ACCELERATORS Expo

9. BETA DISTRIBUTION Features: Distribution Version tracking User management Release notes Crashlytics Feedback  Code push As HockeyApp plus: Automated device testing  Push notiﬁcations

10. #Upload and notify hockey slack versio n version cert sigh gym versio n versio n FASTLANE # Building and signing cert #code signing sigh #provisioning proﬁle gym #build and sign # Version Increment increment_version_number commit_version_bump push_to_git_remote Conﬁg # Version Increment increment_version_number commit_version_bump push_to_git_remote # Building and signing cert sigh gym #Upload and notify hockey slack

11. • HockeyApp analytics • Surface data through CMS MEASURING SUCCESS & FEEDBACK

12. • Bridging required in cases • Maturity - particular for people coming from native world • Regular breaking changes requiring frequent updates to stay in sync GOTCHAS

13. MOBILE LANDSCAPE TITANIUM

14. THANKS! @RICHMCM Expo

Using React Native to Create a Reusable Mobile App Architecture

Recommended

More Related Content

What's hot (20)

Similar to Using React Native to Create a Reusable Mobile App Architecture (20)

Using React Native to Create a Reusable Mobile App Architecture