Developing, building, testing and deploying react native apps

Oct 5, 20174 likes1,283 views

React Native is gaining maturity as a cross-platform mobile app development solution. With a strong community around the ecosystem, mobile app development is all set to become simpler and enjoyable. This talk is about various techniques and tools that are available for building, testing and deploying React Native apps for Android and iOS platforms.

Developing, building,
testing and deploying
By @leenasn
React Native Apps

Developing, building, testing and deploying react native apps

Learn once, write anywhere: Build mobile apps with
React

Cross Platform Native Apps
using Javascript

Design Principles
https://reactjs.org/contributing/design-principles.html

Composition of
components
Single Responsibility Principle

● Separate Build Process for iOS and Android
● Configuring Push Notifications
● Managing React Native updates
● Configuring Instant Updates
Common Issues

Easily build and share React Native apps

How expo works https://docs.expo.io/versions/latest/guides/how-expo-works.html

● No Custom Native modules
● No Background Execution
Why not Expo

Detaching to ExpoKit
Objective-C and Java library that allows you to use the Expo platform with a
native iOS/Android project.

CRNA [Create React Native App]
https://github.com/react-community/create-react-native-app
Work with all of the Components and APIs in React Native, as well as the
JavaScript APIs that the Expo provides.

● Fast feedback
● Zero Configuration
● Powerful mocking
● Built by Facebook
● Maintained by React Native Community
https://facebook.github.io/jest/

Enzyme
Testing utilities
https://github.com/airbnb/enzyme/

Jest Snapshot Testing
https://facebook.github.io/jest/docs/en/snapshot-testing.html#content

Storybook
Interactive development & testing environment
https://storybook.js.org/

https://www.youtube.com/watch?v=IgicDSNkhkI

Visual Regression Testing for Storybook
https://loki.js.org/

https://www.youtube.com/watch?v=Fz2J6NDYSbI

Expo Publish
https://docs.expo.io/versions/latest/guides/publishing.html

https://fastlane.tools/

Lottie - Animations using Adobe After Effects
https://github.com/airbnb/lottie-react-native/

Expo Snack https://snack.expo.io/

Detox https://github.com/wix/detox

https://applitools.com/

https://openstf.io/

Electrode Native: The Platform For Integrating React Native Into Your Apps

Expo
CRNA
[Create React Native App]
Developing

Cross Device Testing https://www.browserstack.com/test-on-the-right-mobile-devices

Testing Pyramid Just Say No to More End-to-End Tests

https://fastlane.tools/
Building and Deploying

Leena S N
@leenasn / leena.sn@multunus.com
https://medium.com/@leenasn
https://medium.com/continuousdelivery

This document provides an introduction to React and React Native. It begins with an overview of ReactJS, including its motivation as a library for building user interfaces and key concepts like components, the virtual DOM, JSX, immutability, and one-way data flow. It then covers React Native, explaining how it uses native components to render interfaces for mobile rather than HTML/CSS. The document concludes with exercises for creating basic React and React Native apps.

React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptKobkrit Viriyayudhakorn

React Native is a new technology that allows building real mobile apps using only JavaScript. It is a JavaScript framework for writing, debugging, and deploying both iOS and Android mobile applications with native experience. React-Native allows developers to share about 80% of code between iOS and Android which make the development is 5x faster than traditional means. React-Native libraries are created by Facebook released in March 2015. It was proven by many world-class mobile applications, such as Facebook, Facebook Ads Manager, TaskRabbit, QQ, Discord, SoundCloud, etc.

React nativeMohammed El Rafie Tarabay

React Native allows developers to build mobile apps using React with native platform capabilities. It uses native components instead of web views, making apps feel and perform like native ones. The document discusses what React Native is, how to set up a development environment, build a basic app, add libraries, handle common errors, and React Native fundamentals like components, styles, layout, events, and touch handling.

React js basicsMaulik Shah

This document provides an introduction to ReactJS, including what it is, why people use it, and some basic concepts. It discusses how React is a declarative, efficient JavaScript library for building user interfaces. It also highlights some common use cases for React like building presentations, virtual reality experiences, shopping carts, online editors, and mobile apps. The document then covers prerequisites for learning React and introduces some of the main components that make up the React ecosystem like JSX, Babel, and module bundlers. It concludes with a quick "Hello World" example and outlines further topics to explore like components, state management, and other advanced React patterns.

React + Redux for Web DevelopersJamal Sinclair O'Garro

I've been working a lot with React lately and thought it would be a good idea to share what I've learned with the group. During this talk we'll take a look at Facebook's React library while drawing comparisons to frameworks like Angular. We'll see how we can use React and friends to create a fast and efficient single page app. Attendees are expected to have some familiarity with ES6/ES7 since we the codebase we will be looking at leverages features from the spec. What we'll be taking a look at: • React • React Router • Redux • Redux Sagas • Webpack • Babel

An Overview of the React EcosystemFITC

An Overview of the React Ecosystem with Rami Sayar OVERVIEW React has been named the front-end library to learn in 2016 however few people talk about the React without mentioning Flux (or Redux or React Native or Relay). In this talk, we will explore the ecosystem of tools and libraries that surround React. We will look at the various Flux implementations (including a short explanation of Flux) like Redux, at some of the React routing libraries, at some of the reactive database or reactive API libraries and finally at everyday tools and techniques that make the React developer happy. By the end of this talk, you will have a greater grasp of the ecosystem and leave with new tools in your developer arsenal. OBJECTIVE Learn about the React Ecosystem TARGET AUDIENCE Front-End Developers with knowledge of JavaScript, React Beginners ASSUMED AUDIENCE KNOWLEDGE JavaScript, Front-End Dev, Beginner React FIVE THINGS AUDIENCE MEMBERS WILL LEARN What is Flux? What is Redux What is React Native What is Relay (and other Reactive Databases/APIs) Useful React Dev Tools

Modern javascriptKevin Ball

The document provides an overview of the modern JavaScript ecosystem. It discusses the main execution environments (browsers, Node.js, io.js), web servers (Express, Hapi, Koa), package managers (NPM, Bower), task runners (Grunt, Gulp, Broccoli), front-end frameworks (jQuery, Backbone, Angular, Ember, React), module systems (AMD, CommonJS, ES6 modules), and JavaScript flavors/transpilers (CoffeeScript, TypeScript, Dart, ES6). It also outlines the typical development workflow from writing code to compilation/packaging to deployment on a web server to usage in a browser.

How NOT to get lost in the current JavaScript landscapeRadosław Scheibinger

This document discusses how to avoid getting lost in the current JavaScript landscape. It begins by looking at modern web development trends like HTML5, CSS3, ES6, and expectations of fast page loads. It then examines traditional page lifecycles versus single page applications and various JavaScript frameworks. The document advocates for progressive enhancement and outlines strategies like "Hijax" and using the HTML5 History API to improve traditional approaches. It also discusses issues like code duplication, the benefits of isomorphic JavaScript, and tools for frontend development including Grunt, Gulp, asset bundlers, and test runners. It concludes by providing recommendations on technologies to adopt, consider, or stop using to develop with a progressive enhancement approach.

Flexible UI Components for a Multi-Framework WorldKevin Ball

Ryan Christiani I Heard React Was GoodFITC

I Heard React Was Good with Ryan Christiani There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concepts of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in! OBJECTIVE Break down the concepts behind React and make it easy for people to start building with it. TARGET AUDIENCE JavaScript developers or project mangers looking to get a better understanding of React. ASSUMED AUDIENCE KNOWLEDGE Intermediate understanding of JavaScript. FIVE THINGS AUDIENCE MEMBERS WILL LEARN Why do we have react, what problems does it solve React components Component life cycles Common terminology Where React falls short

[React Native Tutorial] Lecture 6: Component, Props, and NetworkKobkrit Viriyayudhakorn

This document outlines the steps to build a stock tracking mobile app using React Native. It describes initializing the project, building the UI with split header and footer sections, creating reusable StockButton components, fetching stock data from the Google Finance API, and handling state updates on button presses. Key aspects covered include using props for communication between parent and child components, chaining promises with .then and error handling with .catch, and conditionally updating the display with red or green text based on stock changes. The homework is to expand the app to fetch and display data for 5 US tech company stocks.

JOSA TechTalks - Better Web Apps with React and ReduxJordan Open Source Association

As applications grow in complexity, web developers and front-end developers all suffer the hassle of building and maintaining complex web applications; managing and maintaining consistency of application state. This presentation goes through what's special about React and Redux. This was part of JOSA TechTalks project within Jordan Open Source Association, presented by Ali Sa'o and Omar Abdelhafith.

React.js - The Dawn of Virtual DOMJimit Shah

React is a JavaScript library for building user interfaces that uses a virtual DOM for improved performance. It uses a one-way data flow and declarative components. The virtual DOM allows React to efficiently update the real DOM by only making necessary changes. Components in React encapsulate elements and can have state and props. JSX is recommended for writing React components and compiles to plain JavaScript.

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBoxKobkrit Viriyayudhakorn

This document provides information and instructions for setting up a React Native development environment and building a basic flexbox layout application. It includes links to source code and tutorials for setting up React Native on Windows and Mac systems. The document then explains key React Native concepts like JSX syntax, basic elements, styles, and Flexbox layout properties. It provides code examples and instructions for exercises to build out a flexbox application.

React introductionKashyap Parmar

React is a JavaScript library for building user interfaces and applications. It uses components rather than templates, implements a one-way data flow downwards and re-renders components on data changes rather than mutating them directly. The virtual DOM in React allows for simple and fast re-rendering. Key aspects of React include components, one-way data flow, re-rendering without mutation, the virtual DOM, JSX syntax and React Native for building mobile apps. Flux is an architecture pattern used for state management in React, implementing unidirectional data flow through actions, a dispatcher, stores and views.

React Native - WorkshopFellipe Chagas

Workshop sobre React Native realizado pela Vizir Software Studio (http://www.vizir.com.br) para Natura. OVERVIEW Desenvolvimento nativo Desenvolvimento híbrido Frameworks disponíveis Ionic NativeScript Xamarin React Native REACT & REACT NATIVE Componentes React Components Lifecycle Tudo pode ser Javascript JSX CSS em JSON Virtual DOM Benefícios Futuro REACT NATIVE Componentes & APIs Comunidade Utilizando bibliotecas nativas Comportamentos específicos de cada plataforma Ferramentas Code Push RNPM BOAS PRÁTICAS Fluxo de dados da aplicação Testando seus componentes Como estruturamos as aplicações GITHUB SAMPLE APP https://github.com/Vizir/ReactNativeWorkshop

React js Online TrainingLearntek1

http://www.learntek.org/product/react-js-training/ http://www.learntek.org Learntek is global online training provider on Big Data Analytics, Hadoop, Machine Learning, Deep Learning, IOT, AI, Cloud Technology, DEVOPS, Digital Marketing and other IT and Management courses. We are dedicated to designing, developing and implementing training programs for students, corporate employees and business professional.

React NativeArtyom Trityak

How to React NativeDmitry Ulyanov

React JSSoftware Infrastructure

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.

From zero to hero with React Native!Commit University

Building Modern Web Applications using React and ReduxMaxime Najim

React JS: A Secret Previewvaluebound

In this presentation, Prashant Sharma of Valuebound has talked about ReactJS - a JavaScript library for building user interfaces. Check out the agendas to know what is there for you. ---------------------------------------------------------- Get Socialistic Our website: http://valuebound.com/ LinkedIn: http://bit.ly/2eKgdux Facebook: https://www.facebook.com/valuebound/ Twitter: http://bit.ly/2gFPTi8

20171108 PDN HOL React BasicsRich Ross

This document provides an overview and introduction to React basics including: - Details about upcoming React lab series events on topics like routing, styles, testing, and Flux architecture - Information on installing and using create-react-app for scaffolding React projects - An explanation of core React concepts like components, JSX, properties, state, lifecycle methods, and the virtual DOM - Examples of building a minimal React app with components, properties, and state

Crash Course in AngularJS + Ionic (Deep dive)ColdFusionConference

Ionic is a great tool for building hybrid mobile apps and AngularJS is a great JavaScript framework that plays very nicely with Ionic. In this talk we'll go over the basics of getting started with AngularJS+Ionic. We'll look at some real code from each of the 2 libraries and see what all is involved in building a hybrid mobile application. We will finish our journey with a real-life Ionic app presentation powered by RESTFul services. Target Audience: People that want to see where to start with AngularJS and how it fits into Ionic. This talk assumes no prior knowledge with either library. If you've built a PhoneGap mobile app but felt lost when adding MVC-style structure or Bootstrap-esque UI components, this is the talk for you. Assumed Knowledge: Attendees should be comfortable with "modern JavaScript". A basic understanding of classes and objects and variable scopes will be helpful. Some basic prior exposure to PhoneGap/Cordova and a UI-framework such as Bootstrap will also be helpful.

React Tech SalonChenguang ZHANG

React is a JavaScript library for building user interfaces that aims to solve issues with data changing over time in large web applications. It introduces components, re-rendering on data changes rather than mutating data, and a virtual DOM for efficient re-rendering. React uses a unidirectional data flow and one-way data binding that improves design architecture and code reusability. Related technologies like JSX, Flux, GraphQL, Relay, and React Native further enhance React's capabilities.

React Native Workshop - React AlicanteIgnacio Martín

Vue.jsをはじめるReo Mori

Lecture 1 Introduction to React Native.pptxGevitaChinnaiah

This document provides an introduction and overview of React Native, including what it is, its prerequisites, core components, and how to set up the development environment. Specifically: - React Native is a framework for building mobile apps for iOS and Android using React. It allows writing apps once in JavaScript and deploying to both platforms. - Basic JavaScript and React knowledge are prerequisites. Core components include common mobile components with built-in native implementations. - The entry point file initializes the app and renders the root component. Setting up the environment involves installing Node, Expo, and creating a new project.

React nativeVikrant Negi

React Native is an open source framework for building mobile apps using React and JavaScript. It uses native components and allows building real mobile apps for Android and iOS. It works by using a virtual DOM layer that maps React components to native mobile components using Objective-C and Java APIs. Developers can get started using Expo or React Native CLI. Expo is easier for beginners while CLI allows more customization and third party libraries. Core concepts include components, JSX, state, props, and unidirectional data flow. React Native also includes tools like live reloading and hot reloading for faster development.

More Related Content

What's hot (20)

Flexible UI Components for a Multi-Framework WorldKevin Ball

Ryan Christiani I Heard React Was GoodFITC

[React Native Tutorial] Lecture 6: Component, Props, and NetworkKobkrit Viriyayudhakorn

JOSA TechTalks - Better Web Apps with React and ReduxJordan Open Source Association

React.js - The Dawn of Virtual DOMJimit Shah

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBoxKobkrit Viriyayudhakorn

React introductionKashyap Parmar

React Native - WorkshopFellipe Chagas

React js Online TrainingLearntek1

React NativeArtyom Trityak

How to React NativeDmitry Ulyanov

React JSSoftware Infrastructure

From zero to hero with React Native!Commit University

Building Modern Web Applications using React and ReduxMaxime Najim

React JS: A Secret Previewvaluebound

20171108 PDN HOL React BasicsRich Ross

Crash Course in AngularJS + Ionic (Deep dive)ColdFusionConference

React Tech SalonChenguang ZHANG

React Native Workshop - React AlicanteIgnacio Martín

Vue.jsをはじめるReo Mori

Flexible UI Components for a Multi-Framework WorldKevin Ball

Ryan Christiani I Heard React Was GoodFITC

[React Native Tutorial] Lecture 6: Component, Props, and NetworkKobkrit Viriyayudhakorn

JOSA TechTalks - Better Web Apps with React and ReduxJordan Open Source Association

React.js - The Dawn of Virtual DOMJimit Shah

[React Native] Lecture 4: Basic Elements and UI Layout by using FlexBoxKobkrit Viriyayudhakorn

React introductionKashyap Parmar

React Native - WorkshopFellipe Chagas

React js Online TrainingLearntek1

React NativeArtyom Trityak

How to React NativeDmitry Ulyanov

React JSSoftware Infrastructure

From zero to hero with React Native!Commit University

Building Modern Web Applications using React and ReduxMaxime Najim

React JS: A Secret Previewvaluebound

20171108 PDN HOL React BasicsRich Ross

Crash Course in AngularJS + Ionic (Deep dive)ColdFusionConference

React Tech SalonChenguang ZHANG

React Native Workshop - React AlicanteIgnacio Martín

Vue.jsをはじめるReo Mori

Similar to Developing, building, testing and deploying react native apps (20)

Lecture 1 Introduction to React Native.pptxGevitaChinnaiah

React nativeVikrant Negi

React nativeNexThoughts Technologies

This document provides an overview of ReactJS and React Native. It defines ReactJS as a JavaScript library for building user interfaces and explains concepts like components, virtual DOM, JSX, props, states, and one-way data flow. It also covers React Native and how it allows building native mobile apps using JavaScript and React. Key differences between Ionic and React Native are outlined. Examples of companies that use ReactJS and React Native are given. Setup and installation instructions for React Native are provided.

React Native - Build Native Mobile AppMobio Solutions

From React to React Native - Things I wish I knew when I startedsparkfabrik

Introduction to react native @ TIC NUSTWaqqas Jabbar

This document provides an introduction to React-Native, including: - An overview of key React-Native concepts like components, props, and state - Details on how React-Native allows building native mobile apps using JavaScript and reusing code across platforms - Prerequisites for React-Native development and recommended tools, libraries, and resources - Common questions about React-Native development and their answers - Examples of companies using React-Native in production apps

ReactNative.pptxMaria Dawson

Getting Started With React Native PresntationKnoldus Inc.

[DevDay2018] React Native – Hello World - By: Trung Pham & React Native team ...DevDay Da Nang

Expo - Zero to App.pptx😎 Anthony Kariuki

React Native and the future of web technology (Mark Wilcox) - GreeceJS #15GreeceJS

How React Native Can Reduce App Development Cost ForceBolt

React Native is a Facebook-created open-source framework with the motto "Learn Once, Run Anywhere." React Native is used to creating native mobile applications for Android and iOS using React JS. React Native has become the choice of tech giants such as Tesla, Facebook, and Skype due to its amazing features such as a shorter learning curve, fast reload, a third-party React Native component library and faster development. for know more visit - https://www.forcebolt.com/

20180518 QNAP Seminar - Introduction to React NativeEric Deng

Introduction to React NativeWaqqas Jabbar

This document provides an introduction to React Native, including prerequisites, key concepts, architecture, libraries, and demos. React Native allows building mobile apps using React that work on both iOS and Android. It provides a native experience while allowing code reuse between platforms. Popular libraries that complement React Native development include React Navigation, React Redux, and NativeBase. The document demonstrates building a simple "Hello World" app and a production app with features like custom fonts and REST API integration. It discusses challenges like frequent React Native updates and debugging tools like Chrome and Reactotron.

Why is React Native the Best Choice for Cross-Platform Mobile App Development...Techugo

React Native is a popular framework for cross-platform mobile app development. Its ability to allow developers to write code once and deploy it across multiple platforms, including iOS and Android, makes it a time and cost-effective solution for businesses. React Native also offers great performance, a large developer community, and a wide range of pre-built components, making it the go-to choice for many mobile app projects.

Android programming-basicsAravindharamanan S

The document discusses different approaches for building the basic program structure and layout of an Android application. It describes the Java-based, XML-based, and hybrid approaches. The Java-based approach uses Java code to define all layout and user interface elements rather than separate XML files. Examples are provided of the basic template for each approach, including creating buttons, assigning click handlers, and setting the main application layout.

React Native - CirebonDevAyat Maulana

This document provides an overview of React Native, including how it works, its components, props, state, lifecycle methods, and differences from React.js. It discusses state management in React Native and popular starter kits, libraries, and UI components. It also compares React Native to other mobile development frameworks like Flutter and Ionic, noting React Native compiles to native code using JavaScript and is maintained by Facebook. The document ends with instructions on setting up a new React Native project using Create React Native App.

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

How create react app help in creating a new react applications Concetto Labs

React Native - Framework For Mobile App (Seminar)Jaise P Jose

This document introduces React Native, an open-source framework for building mobile applications using React. It allows developers to build mobile apps using only JavaScript. The document discusses what React and React Native are, who developed them, their advantages over traditional mobile development like cross-platform capability and hot reloading. It also covers how React Native works, integrating native components while keeping the UI layer consistent across platforms, and provides a simple sample React Native code.

Lecture 1 Introduction to React Native.pptxGevitaChinnaiah

React nativeVikrant Negi

React nativeNexThoughts Technologies

React Native - Build Native Mobile AppMobio Solutions

From React to React Native - Things I wish I knew when I startedsparkfabrik

Introduction to react native @ TIC NUSTWaqqas Jabbar

ReactNative.pptxMaria Dawson

Getting Started With React Native PresntationKnoldus Inc.

[DevDay2018] React Native – Hello World - By: Trung Pham & React Native team ...DevDay Da Nang

Expo - Zero to App.pptx😎 Anthony Kariuki

React Native and the future of web technology (Mark Wilcox) - GreeceJS #15GreeceJS

How React Native Can Reduce App Development Cost ForceBolt

20180518 QNAP Seminar - Introduction to React NativeEric Deng

Introduction to React NativeWaqqas Jabbar

Why is React Native the Best Choice for Cross-Platform Mobile App Development...Techugo

Android programming-basicsAravindharamanan S

React Native - CirebonDevAyat Maulana

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

How create react app help in creating a new react applications Concetto Labs

React Native - Framework For Mobile App (Seminar)Jaise P Jose

More from Leena N (20)

The last mile problemLeena N

Have you ever asked a programmer how much longer “this” is going to take? Here goes another typical answer. I am done with most of the tasks, need extra time to finish the last few ones. And the “last few tasks” never ends or takes enormous amounts of time. On the one hand, we all know that estimates always go wrong. But there is another aspect to this too, i.e. the last mile problem. It can be because of the “fear or shipping” or not applying the guideline “done is better than perfect”. This talk is about a few tricks I tried not to get into the “perfection” mode; instead, get into the habit of “shipping”. Surprisingly, that helped me to avoid providing estimates :)

Expand Contract Pattern for Continuous Delivery of DatabasesLeena N

This document discusses techniques for continuously delivering database changes, including database refactoring. It describes strategies like splitting tables and columns, adding transition periods, using versioning, automation with testing, and making changes incrementally and reversibly. Database refactoring includes structural, data quality, referential integrity, and transformation changes. Tools, strategies for low risk releases, and patterns like branch by abstraction and strangler are recommended to support evolutionary development and continuous delivery of database changes.

Sprinkle javascript using stimulus jsLeena N

n this world of Microservices, I am building a Monolith app. In this world of React and Vue, am building a server-side rendered app. However, I need Javascript. I can’t avoid that. I need some parts of the page updated dynamically. I need to show/hide certain parts of the page depending upon user actions. I don’t want JQuery for the obvious reasons. Slow.., Heavy and then, of course, it can easily create spaghetti code. That is when I came across Stimulus JS - a modest Javascript framework. It sprinkles Javascript to add behaviour to your HTML. It has a controller, action and targets (i.e. the HTML elements). Moreover, it pairs well with Turbolinks. So I don’t need to do the circus of converting JSON to DOM. I’ve been using Stimulus for over a year and its been quite good. This talk is about my experiences with Stimulus with a few examples. I will share recommendations on where it might be useful and where it is not.

Patterns and practices for evolvability - the key for technical agilityLeena N

Evolvability refers to the ability to adapt to market needs and the changing environment. Mainly two kinds of evolvability are needed: Product evolving as per the market needs to avoid Building something that nobody wants The architecture and the design of the software evolving to allow the team to make faster changes to the product without breaking things That is why it is crucial to build the right product and build it in the right way.

Expand contract pattern - Continuous Delivery for Databases - DevOpsDays SeattleLeena N

Modifying the schema of a production database is *hard*. If something goes wrong, the impact on both customers and the team can be enormous. And it can be hard or even impossible to rollback a database schema change if things go wrong. And the same is true for any architectural change for a production application. The Branch by Abstraction and Strangler Pattern makes significant application changes easier. Are there any similar patterns we can use to make production database changes less risky? Indeed, there are. The Expand/Contract pattern is a blueprint for making the database migration. It makes the remodelling both reversible and safe. By *expanding* the application to accommodate both the old and the new schemas in parallel, we can give ourselves time to: - Migrate any downstream dependencies on the old database schema - Gain confidence that the migration is safe We *contract* the application to the new version, once we’ve satisfied that the old schema is no longer needed. The pattern helps to make significant, but necessary refactorings to your data model in a **continuous delivery way**. Most importantly, without threatening the robustness of your production applications.

Expand contract pattern continuous delivery and databasesLeena N

Modifying the schema of a production database is hard. If something goes wrong, the impact on both customers and the team can be enormous. And it can be hard or even impossible to rollback a database schema change if things go wrong. And the same is true for any architectural change for a production application. The Branch by Abstraction and Strangler Pattern makes significant application changes easier. Are there any similar patterns we can use to make production database changes less risky? Indeed, there are. The Expand/Collapse pattern is a blueprint for making the database migration and makes the remodelling both reversible and safe. By expanding the application to accommodate both the old and the new schemas in parallel, we can give ourselves time to: - Migrate any downstream dependencies on the old database schema; - Gain confidence that the migration is safe. We contract the application to the new version, once we’ve satisfied that the old schema is no longer needed. The pattern helps to make significant, but necessary refactorings to your data model in a continuous delivery way. Most importantly, without threatening the robustness of your production applications.

Expand contract pattern - Continuous Delivery and DatabasesLeena N

Importance of Showing UpLeena N

GrowthLeena N

What does career growth mean? How does one grow in their career? How do you choose an organisation which allows one to grow? One grows when the environment allows growing. I am not talking about the std. the corporate ladder. One can climb those automatically as the time passes. But all of us agree that it doesn't mean "growth". The key ingredients for the actual growth is the following: * Purpose - the intention to contribute to the well-being of others * Practice - Consistent and deliberate practice * Perseverance - Persistence to try out hard things The talk is about examples and stories about these ingredients and what makes those who have these ingredients and those who don't.

TDD, Refactoring - WorkshopLeena N

This document discusses test-driven development (TDD) and refactoring using the Gilded Rose kata exercise. It provides rules for TDD, such as only writing production code with a failing test and refactoring code after each test. Simple design principles are outlined, like revealing intention and avoiding duplication. Extreme object-oriented programming rules are also listed, like limiting indentation and properties. The goal is to practice TDD and refactoring skills through the Gilded Rose kata.

Merge hells!! feature toggles to the rescue - Presented @ Agile TorontoLeena N

Have you ever wondered how Amazon does deployments in every 11 seconds? Have you ever wondered how frequently Google Chrome updates? Compare that with an enterprise product you are using or the banking application that you use, it takes weeks or even months for an update. The assumption is that frequent releases are possible for Googles or Amazons or Unicorns. It is not for others. This talk is about why that assumption is wrong. It can be done anywhere, with enough focus and investment for the Continuous Delivery pipeline to make sure that every commit is releasable or deployable. And fundamental to Continuous Delivery is Continuous Integration. Continuous Integration guarantees every change committed to the repository is tested and reported about production readiness. And Feature Toggle is for turning features on/off depending upon certain conditions. This opens the opportunity to test certain features quickly with few users for experimentation and learning. Feature branching has been popular for long, but everyone knows about the “code merge hell”, a common issue because of long-lived branches or infrequent integration. If the team is spending time in fixing the merge hells and checking what part of the code needs to be merged, then it is not the efficient use of human talent.

Merge hells!! Feature toggles to the rescue - DevOpsDays MadisonLeena N

This document discusses using feature toggles to help manage merge conflicts and allow for continuous delivery of code changes. It notes that building features nobody wants is a waste of resources. Feature toggles allow code to be deployed without being released, avoiding rollback issues. They also enable options like A/B testing and canary releasing. The document recommends managing feature toggles through configuration files and designing systems to be failure-tolerant using circuit breakers. It suggests architectures like branch by abstraction and strangler patterns to help manage feature toggles. Overall, it advocates taking a lean approach by working in small batches to integrate changes continuously.

Technical debt a catch all phrase--Leena N

Merge hells!! feature toggles to the rescueLeena N

Introducing Continuous Delivery practices to a team in trouble can be daunting. Where do you start ? What do you do first ? Which battle do you pick first ? I’ll share my experience of guiding a team to achieve a higher degree of delivery maturity. This is a journey from a troublesome, struggling start of chaotic manual deployments, merge hell, regular production roll backs and lost code, to deliver a single commit to trunk automatically and reliably, under an hour, many times a day.

Continuous delivery from the trenchesLeena N

This document discusses two companies' journeys to continuous delivery of software. The first story describes automating a loan processing platform that now processes close to $4 million in loans with a small team. The second story automated a mobile device management solution for healthcare. The document then outlines the continuous delivery process used, including practices like continuous integration, deployment pipelines and emphasizing delivering business value. Challenges discussed include balancing speed and quality while improving processes through retrospectives.

Continuous delivery for AndroidLeena N

Continuous delivery is a software development discipline where you build software in such a way that the software can be released to production at any time. The idea is to make your software releasable at any moment of time by integrating it continuously and releasing it frequently to get early and frequent feedback. Because of the approval process that exists in the release process of Android apps, Continuous Delivery is not easy for Android apps as compared to web application deployments. And it's also assumed that not much tools are available to enable Continuous Delivery. Yes, its still not instant update to the app, but still things are better than how it has been in the past. This talk gives an overview of tools and techniques that can help us to create a pipeline to get fast and frequent feedback through continuous delivery.

Introduction to continuous deliveryLeena N

Continuous delivery is a software development practice where software can be released to production at any time by building software in a way that enables frequent, automated releases. It involves practices like continuous integration, where code is automatically merged and tested frequently, automated testing and deployment, and using deployment pipelines and tools to streamline the release process. Many large tech companies practice continuous delivery, with some deploying new code in minutes or every 11 seconds to get changes to users quickly.

Merge hells - Feature Toggles to the rescueLeena N

The document discusses how feature toggles can help address "merge hells" that can occur with continuous integration. Feature toggles allow incomplete features to be deployed without being released, avoiding the need to rollback deployments. They enable options like A/B testing, canary releasing, and managing experimental and operations toggles. To manage feature toggles, teams should follow mainline development practices, use feature toggle tools, set expiry dates for toggles, and consider toggles as a first step towards continuous delivery.

Deliver with impactLeena N

This document discusses impact mapping as a technique for delivering projects with impact. It provides an example of impact mapping for an MDM (mobile device management) product. The key steps of impact mapping include: defining goals and who they impact; identifying desired behaviors and how to enable them; establishing metrics to measure impact; and planning milestones to test assumptions. Impact mapping focuses on creating actual behavioral change rather than just shipping software.

Learnings while building Mobile Device Management [MDM] Leena N

The last mile problemLeena N

Expand Contract Pattern for Continuous Delivery of DatabasesLeena N

Sprinkle javascript using stimulus jsLeena N

Patterns and practices for evolvability - the key for technical agilityLeena N

Expand contract pattern - Continuous Delivery for Databases - DevOpsDays SeattleLeena N

Expand contract pattern continuous delivery and databasesLeena N

Expand contract pattern - Continuous Delivery and DatabasesLeena N

Importance of Showing UpLeena N

GrowthLeena N

TDD, Refactoring - WorkshopLeena N

Merge hells!! feature toggles to the rescue - Presented @ Agile TorontoLeena N

Merge hells!! Feature toggles to the rescue - DevOpsDays MadisonLeena N

Technical debt a catch all phrase--Leena N

Merge hells!! feature toggles to the rescueLeena N

Continuous delivery from the trenchesLeena N

Continuous delivery for AndroidLeena N

Introduction to continuous deliveryLeena N

Merge hells - Feature Toggles to the rescueLeena N

Deliver with impactLeena N

Learnings while building Mobile Device Management [MDM] Leena N

Recently uploaded (16)

Seminar.MAJor presentation for final project vivadaditya2501

Organizing_Data_Grade4 how to organize.pptxAllanGuevarra1

Top Vancouver Green Business Ideas for 2025 Powered by 4GoodHostingsteve198109

Vancouver in 2025 is more than scenic views, yoga studios, and oat milk lattes—it’s a thriving hub for eco-conscious entrepreneurs looking to make a real difference. If you’ve ever dreamed of launching a purpose-driven business, now is the time. Whether it’s urban mushroom farming, upcycled furniture sales, or vegan skincare sold online, your green idea deserves a strong digital foundation. The 2025 Canadian eCommerce landscape is being shaped by trends like sustainability, local innovation, and consumer trust. To stay ahead, eco-startups need reliable hosting that aligns with their values. That’s where 4GoodHosting.com comes in—one of the top-rated Vancouver web hosting providers of 2025. Offering secure, sustainable, and Canadian-based hosting solutions, they help green entrepreneurs build their brand with confidence and conscience. As eCommerce in Canada embraces localism and environmental responsibility, choosing a hosting provider that shares your vision is essential. 4GoodHosting goes beyond just hosting websites—they champion Canadian businesses, sustainable practices, and meaningful growth. So go ahead—start that eco-friendly venture. With Vancouver web hosting from 4GoodHosting, your green business and your values are in perfect sync.

5-Ways-To-Future-Proof-Your-SIEM-Securonix[1].pdfAndrHenrique77

Reliable Vancouver Web Hosting with Local Servers & 24/7 Supportsteve198109

Looking for powerful and affordable web hosting in Vancouver? 4GoodHosting offers premium Canadian web hosting solutions designed specifically for individuals, startups, and businesses across British Columbia. With local data centers in Vancouver and Toronto, we ensure blazing-fast website speeds, superior uptime, and enhanced data privacy—all critical for your business success in today’s competitive digital landscape. Our Vancouver web hosting plans are packed with value—starting as low as $2.95/month—and include secure cPanel management, free domain transfer, one-click WordPress installs, and robust email support with anti-spam protection. Whether you're hosting a personal blog, business website, or eCommerce store, our scalable cloud hosting packages are built to grow with you. Enjoy enterprise-grade features like daily backups, DDoS protection, free SSL certificates, and unlimited bandwidth on select plans. Plus, our expert Canadian support team is available 24/7 to help you every step of the way. At 4GoodHosting, we understand the needs of local Vancouver businesses. That’s why we focus on speed, security, and service—all hosted on Canadian soil. Start your online journey today with a reliable hosting partner trusted by thousands across Canada.

highend-srxseries-services-gateways-customer-presentation.pptxelhadjcheikhdiop

(Hosting PHising Sites) for Cryptography and network securityaluacharya169

project_based_laaaaaaaaaaearning,kelompok 10.pptxredzuriel13

Best web hosting Vancouver 2025 for you businesssteve198109

Breaching The Perimeter - Our Most Impactful Bug Bounty Findings.pdfNirmalthapa24

Cyber Safety: security measure about navegating on internet.manugodinhogentil

OSI TCP IP Protocol Layers description fcbr49917

Grade 7 Google_Sites_Lesson creating website.pptxAllanGuevarra1

AI Days 2025_GM1 : Interface in theage of AIPrashant Singh

Determining Glass is mechanical textileAzizul Hakim

cxbcxfzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz7.pdfssuser060b2e1

Seminar.MAJor presentation for final project vivadaditya2501

Organizing_Data_Grade4 how to organize.pptxAllanGuevarra1

Top Vancouver Green Business Ideas for 2025 Powered by 4GoodHostingsteve198109

5-Ways-To-Future-Proof-Your-SIEM-Securonix[1].pdfAndrHenrique77

Reliable Vancouver Web Hosting with Local Servers & 24/7 Supportsteve198109

highend-srxseries-services-gateways-customer-presentation.pptxelhadjcheikhdiop

(Hosting PHising Sites) for Cryptography and network securityaluacharya169

project_based_laaaaaaaaaaearning,kelompok 10.pptxredzuriel13

Best web hosting Vancouver 2025 for you businesssteve198109

Breaching The Perimeter - Our Most Impactful Bug Bounty Findings.pdfNirmalthapa24

Cyber Safety: security measure about navegating on internet.manugodinhogentil

OSI TCP IP Protocol Layers description fcbr49917

Grade 7 Google_Sites_Lesson creating website.pptxAllanGuevarra1

AI Days 2025_GM1 : Interface in theage of AIPrashant Singh

Determining Glass is mechanical textileAzizul Hakim

cxbcxfzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz7.pdfssuser060b2e1

Developing, building, testing and deploying react native apps

1. Developing, building, testing and deploying By @leenasn React Native Apps

3. Learn once, write anywhere: Build mobile apps with React

4. Cross Platform Native Apps using Javascript

6. Design Principles https://reactjs.org/contributing/design-principles.html

7. Composition of components Single Responsibility Principle

8. Developer Experience Eg: Hot Reloading

9. Dogfooding

10. Who uses React Native

11. React Native Community

12. Getting started is still difficult

13. ● Separate Build Process for iOS and Android ● Configuring Push Notifications ● Managing React Native updates ● Configuring Instant Updates Common Issues

16. Easily build and share React Native apps

17. Selected set of tools

19. How expo works - development

20. How expo works https://docs.expo.io/versions/latest/guides/how-expo-works.html

21. ● No Custom Native modules ● No Background Execution Why not Expo

22. Detaching to ExpoKit Objective-C and Java library that allows you to use the Expo platform with a native iOS/Android project.

23. CRNA [Create React Native App] https://github.com/react-community/create-react-native-app Work with all of the Components and APIs in React Native, as well as the JavaScript APIs that the Expo provides.

25. Testing

26. Painless Javascript Testing

27. ● Fast feedback ● Zero Configuration ● Powerful mocking ● Built by Facebook ● Maintained by React Native Community https://facebook.github.io/jest/

28. Enzyme Testing utilities https://github.com/airbnb/enzyme/

29. Jest Snapshot Testing https://facebook.github.io/jest/docs/en/snapshot-testing.html#content

32. Storybook Interactive development & testing environment https://storybook.js.org/

33. https://www.youtube.com/watch?v=IgicDSNkhkI

34. Visual Regression Testing for Storybook https://loki.js.org/

35. https://www.youtube.com/watch?v=Fz2J6NDYSbI

36. Cross Device Testing?

38. Remote Access

39. Appium Tests

40. Monkeyrunner tests

42. Build & Deploy

43. Expo Publish https://docs.expo.io/versions/latest/guides/publishing.html

45. https://fastlane.tools/

49. Other tools

51. Lottie - Animations using Adobe After Effects https://github.com/airbnb/lottie-react-native/

52. Expo Snack https://snack.expo.io/

53. Detox https://github.com/wix/detox

54. https://applitools.com/

55. https://openstf.io/

57. Electrode Native: The Platform For Integrating React Native Into Your Apps

58. Summary

59. Expo CRNA [Create React Native App] Developing

60. Testing

61. Cross Device Testing https://www.browserstack.com/test-on-the-right-mobile-devices

62. Testing Pyramid Just Say No to More End-to-End Tests

63. https://fastlane.tools/ Building and Deploying

64. Error monitoring

65. Optimise for happiness

66. Leena S N @leenasn / [email protected] https://medium.com/@leenasn https://medium.com/continuousdelivery

Developing, building, testing and deploying react native apps

Recommended

More Related Content

What's hot (20)

Similar to Developing, building, testing and deploying react native apps (20)

More from Leena N (20)

Recently uploaded (16)

Developing, building, testing and deploying react native apps