Academy PRO: React native - publish

Jun 20, 2017Download as PPTX, PDF1 like140 views

This document provides an overview of React Native including building initial scenes, navigation, animations, performance optimization, building APKs, and publishing to app stores. It discusses key aspects like the main UI thread frame rate, tools for profiling performance, avoiding performance killers like console logs, and using the Animated API. It also covers building a release key, generating a signed APK, and integrating third-party libraries like Expo and CodePush.

React Native
Show your application to public

Contents
1. Introduction
2. Building first scenes
3. Navigation/Swiping
4. Sockets/Animations/Push notifications etc.
5. Performance/Building application/Send to market

JS Frame rate
- Business logic
- SetState
- Animations
- Touches

Main UI thread frame rate
Who’s there?
- ScrollView
- iOSNavigator

Performance killers
- Console.logs
- Dev mode
- Navigator transition (each frame)

Transition
componentDidMount() {
InteractionManager.runAfterInteractions(() => {
this.setState({renderPlaceholderOnly: false});
});
}

How to improve performance more?
- Draw something before (rectangles like in facebook)
- Spinner

Animated API
- Notifies Interaction manager
- Works with interactions
- Still calculates each frame on demand of JS thread

Use layout animation
- But for static only

renderToHardwareTextureAndroid
On Android, this is useful for animations and interactions that only modify opacity, rotation, translation,
and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re-
executed.
- Memory expensive

Animating size
- Width and height
- Transform scale

Touches
handleOnPress() {
// Always use TimerMixin with requestAnimationFrame, setTimeout and
// setInterval
this.requestAnimationFrame(() => {
this.doExpensiveAction();
});
}

React-addons-perf
Perf.start()
// ...
Perf.stop()

Methods
printInclusive()
printExclusive()
printWasted()

Profiler
$ <path_to_android_sdk>/platform-tools/systrace/systrace.py -
-time=10 -o trace.html sched gfx view -a <your_package_name>

Key
$ keytool -genkey -v -keystore my-release-key.keystore -alias
my-key-alias -keyalg RSA -keysize 2048 -validity 10000

./gradle.properties
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

$Build.gradle signingConfigs { release { if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) { storeFile file(MYAPP_RELEASE_STORE_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } }$

android {
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
Build.gradle

Build apk file
$ cd android && ./gradlew assembleRelease
android/app/build/outputs/apk/app-release.apk

Command
Product → Scheme → Edit Scheme (cmd + <)

Built-in components
import React from 'react';
import { Components } from 'expo';
export default class App extends React.Component {
render() {
return (
<Components.MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
/>
);
}
}

Code
let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
class MyApp extends Component {
onButtonPress() {
codePush.sync({
updateDialog: true,
installMode: codePush.InstallMode.IMMEDIATE
});
}
render() {
<View>
<TouchableOpacity onPress={this.onButtonPress}>
<Text>Check for updates</Text>
</TouchableOpacity>
</View>
}
}
MyApp = codePush(codePushOptions)(MyApp);

This document discusses various topics in React Native including animations, notifications, storage, and push notifications. It provides code examples for using pan responders and gestures to handle touches, creating websockets using Socket.io or native code, different types of animations like timing and spring, and accessing async storage on Android and iOS. It also covers using AppState to detect app state changes and sending local and scheduled push notifications.

Academy PRO: React native - building first scenesBinary Studio

This document provides an overview of building initial scenes in React Native, including setting up components, styles, state, props, file structure, and networking. It discusses common React Native components like View, Text, Image, ScrollView, ListView, and interaction components. It also covers more advanced topics such as maps, dates pickers, geolocation, cameras, and working with native iOS and Android modules.

Academy PRO: React native - navigationBinary Studio

This document provides an overview of navigation options and best practices for React Native applications. It discusses the Navigator API, common navigation libraries like React Navigation and React Native Router Flux, and how to structure navigation within a React/Redux project using components, actions, and reducers. It also covers animations, drawer navigation, and common caveats to consider with lists and preserving internal state.

Standford 2015 week5: 1.View Controller Lifecycle, Autolayout 2. Scroll View ...彼得潘 Pan

This document summarizes key points about view controller lifecycles, autolayout, and scroll views in iOS development. It discusses when view controller methods like viewDidLoad and viewWillAppear are called, and best practices for performing tasks in each method. It also provides an overview of using autolayout constraints to layout user interfaces, and examples of setting up and configuring scroll views.

Workshop 27: Isomorphic web apps with ReactJSVisual Engineering

Workshop Isomorphic Web Apps with ReactJS: - Universal web apps - Isomorphic - Server Side Rendering (SSR) with ReactJS - Server Side Rendering with Redux - Server Side Rendering with React Router - Server Side Rendering: server.js - Main Entry Point - Server Side Rendering: server.js - HTML Template - Client main entry point: client.js - Webpack bundles - Avoiding FOUC - Webpack ExtractTextPlugin - Webpack code splitting - React Router - Configuration with Plain Routes - React Router - Dynamic Routing & WebPack - Dynamic Routing with new Reducers - Combining new Reducers - ReducerRegistry - Data fetching before rendering - React Router + Redux + Redial: Server Side - React Router + Redux + Redial: provideHooks - React Router + Redux + Redial: Client Side - SEO friendly universal web apps - React-Helmet - React-Helmet - Server Side Rendering Presentado por ingeniero: Marc Torrent

Workshop 13: AngularJS Parte IIVisual Engineering

Firefox OS Web APIs, taking it to the next levelFrédéric Harper

The document discusses various types of web APIs available in Firefox OS, including regular APIs that provide access to device sensors and capabilities, privileged APIs that require additional permissions, and certified APIs for features like SMS and phone calls. Regular APIs described include the ambient light sensor, battery status, device light, network information, notifications, proximity sensor, screen orientation, and vibration. Privileged APIs discussed are the browser and contacts APIs. Certified APIs covered are the WebSMS and WebTelephony APIs. The document provides code examples for accessing many of these APIs and notes that some require adding permissions to the app manifest.

How to Build SPA with Vue Router 2.0Takuya Tejima

Heroku pop-behind-the-senseBen Lin

The document discusses software architecture for node.js applications. It covers using a home-brewed MVC framework called COKE, implementing RESTful routing and validation, separating concerns between controllers, models, and views, using libraries to extract reusable code, and scaling node.js applications from a single server to multiple distributed services. It also discusses deployment strategies from single server with downtime to zero downtime across multiple instances.

Webrender 1.0Daosheng Mu

Animating angular applicationsTomek Sułkowski

Introduction on animations for Angular applications + heads ups for some tricky bits. Don't forget to visit the included links: - https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc - https://medium.com/frontend-coach/angular-in-motion-4-approaches-to-animation-1aa7426aae5a - https://medium.com/frontend-coach/angular-router-animations-what-they-dont-tell-you-3d2737a7f20b ... and follow me on twitter https://twitter.com/sulco for more on Angular, TypeScript and frontend in general.

Angular 2.0 Routing and NavigationEyal Vardi

Ui perfomanceCleveroad

Getting touchy - an introduction to touch events / Web Standards Days / Mosco...Patrick Lauke

This document discusses touch events and how to handle touch interactions in web applications. It begins by explaining how touch events are simulated using mouse events and the limitations of this approach. It then introduces the native touch events of touchstart, touchmove, and touchend. The document covers handling both single and multiple touch points, touch gestures, and implementing touch-friendly interfaces. It also discusses touch event support across browsers and future pointer event standards.

JSLab. Алексей Волков. "React на практике"GeeksLab Odessa

28.03.15. Одесса. Impact Hub Odessa. Конференция JSLab. Алексей Волков. "React на практике" Доклад освещает практические аспекты использования React.js в различном окружении. React и модели Backbone. React и таблицы стилей, а также React в мобильном вебе. Будет полезно как и тем, кто только интересуется этой библиотекой, а также опытным разработчикам. Подробнее: http://geekslab.co/ https://www.facebook.com/GeeksLab.co https://www.youtube.com/user/GeeksLabVideo

Using Renderless Components in Vue.js during your software development.tothepointIT

Promises are so passé - Tim Perry - Codemotion Milan 2016Codemotion

The document discusses asynchronous programming in JavaScript and how it has evolved over time. It covers callbacks, promises, generators, and the new async/await syntax. Callbacks were difficult to read and handle errors across steps. Promises provided a better model but still had ceremony and didn't play nicely with other constructs. Generators allowed writing async code that looked synchronous but required wrapping in a promise. Async/await builds on promises and generators by providing syntax that looks like synchronous code while still being asynchronous under the hood. It addresses issues with previous approaches but developers still need to handle errors and can overuse await. Async/await is available in modern browsers and makes asynchronous JavaScript much cleaner.

Workshop 24: React Native IntroductionVisual Engineering

Arquitetura de Front-end em Aplicações de Larga EscalaEduardo Shiota Yasuda

Para desenvolver um site institucional simples ou um hotsite pequeno, não é preciso muito mais que um pouco de HTML, um ou dois arquivos de CSS, alguns arquivos de JavaScript, e um sistema de CMS. No entanto, à medida que a complexidade de um site aumenta, o código passa a se tornar cada vez mais extenso, complexo, difícil de ser organizado, e projeto acaba virando um grande "code spaghetti". Para garantir que isso não aconteça, é necessário implementar uma estrutura sólida para o HTML, CSS e JavaScript, de modo que os componentes da aplicação funcionem independentemente e sejam facilmente mantidos e modificados. Nesta palestra, mostrei como elaborar uma arquitetura de front-end que sustente uma aplicação de larga escala.

VuexAsaquzzaman Mishu

Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion

Since we started to see JS on the server side, the dream of developers has been to reduce the gap and the cost of switch between frontend/backend. Today with Node.js, React and a whole ecosystem of tools, this dream is becoming true! In this talk I am going to discuss about Universal (a.k.a. Isomorphic) JS and present some practical example regarding the major patterns related to routing, data retrieval and rendering. I will use Node, React, Webpack, Babel and React Router and give you a series of example to get you started easily with this new technology trend.

Workshop 12: AngularJS Parte IVisual Engineering

ILUG 2010 - Deploying plug-ins to the enterpriseRené Winkelmeyer

Modular and Event-Driven JavaScriptEduardo Shiota Yasuda

Ever wondered how to get rid of that spaghetti, single-filed JavaScript code? Wouldn't it be nice if you could write maintainable modules, easily test them, port them to different projects, handle its library dependencies, and have them decoupled from other modules? In this talk, we'll see how using the AMD API and an event-driven design will help taming an application's JavaScript code and scaling it to the future and beyond.

UIAutomation + Mechanic.jsjaykz52

Angular JS blog tutorialClaude Tech

Backbone/Marionette recap [2015]Andrii Lundiak

The document summarizes the author's experience using Backbone and Marionette frameworks on several projects at SoftServe. It describes the technology stacks used, including versions of Backbone, Marionette, and other libraries. It then reviews three projects (SCM, DMG, EWQ) and discusses how Backbone and Marionette were implemented in each, including use of models, views, controllers, and modules. The outcomes section notes best practices and strengths of MV* patterns and modularization with Marionette.

jQuery Bay Area Conference 2010mennovanslooten

It works on your computer... but does it render fast enough?Diogo Antunes

Most of us devs have a nice machine and/or a pretty fancy phone. The sites you develop always look smooth and sweet on your devices but... Do your users have the kind of experience you wish? In this talk I will review, on a high level, how the browser rendering works, how your HTML, CSS and/or js impacts on page rendering/loading and share techniques to minimize the impact. presented @ codebits VI (2012) in Lisbon

Creating books app with react nativeAli Sa'o

Ali Hussein Al-Sa'o is a senior front end developer with 10 years of experience in web development. The session will cover an introduction to React and React Native, including what they are, their key characteristics, and an installation guide. It will also discuss debugging in React Native and provide an overview of coding and additional resources. React Native allows building mobile apps using only JavaScript and aims to provide a faster development cycle than alternatives like Cordova through features like live reloading and over-the-air updates.

More Related Content

What's hot (20)

Heroku pop-behind-the-senseBen Lin

Webrender 1.0Daosheng Mu

Animating angular applicationsTomek Sułkowski

Angular 2.0 Routing and NavigationEyal Vardi

Ui perfomanceCleveroad

Getting touchy - an introduction to touch events / Web Standards Days / Mosco...Patrick Lauke

JSLab. Алексей Волков. "React на практике"GeeksLab Odessa

Using Renderless Components in Vue.js during your software development.tothepointIT

Promises are so passé - Tim Perry - Codemotion Milan 2016Codemotion

Workshop 24: React Native IntroductionVisual Engineering

Arquitetura de Front-end em Aplicações de Larga EscalaEduardo Shiota Yasuda

VuexAsaquzzaman Mishu

Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion

Workshop 12: AngularJS Parte IVisual Engineering

ILUG 2010 - Deploying plug-ins to the enterpriseRené Winkelmeyer

Modular and Event-Driven JavaScriptEduardo Shiota Yasuda

UIAutomation + Mechanic.jsjaykz52

Angular JS blog tutorialClaude Tech

Backbone/Marionette recap [2015]Andrii Lundiak

jQuery Bay Area Conference 2010mennovanslooten

Heroku pop-behind-the-senseBen Lin

Webrender 1.0Daosheng Mu

Animating angular applicationsTomek Sułkowski

Angular 2.0 Routing and NavigationEyal Vardi

Ui perfomanceCleveroad

Getting touchy - an introduction to touch events / Web Standards Days / Mosco...Patrick Lauke

JSLab. Алексей Волков. "React на практике"GeeksLab Odessa

Using Renderless Components in Vue.js during your software development.tothepointIT

Promises are so passé - Tim Perry - Codemotion Milan 2016Codemotion

Workshop 24: React Native IntroductionVisual Engineering

Arquitetura de Front-end em Aplicações de Larga EscalaEduardo Shiota Yasuda

VuexAsaquzzaman Mishu

Universal JavaScript Web Applications with React - Luciano Mammino - Codemoti...Codemotion

Workshop 12: AngularJS Parte IVisual Engineering

ILUG 2010 - Deploying plug-ins to the enterpriseRené Winkelmeyer

Modular and Event-Driven JavaScriptEduardo Shiota Yasuda

UIAutomation + Mechanic.jsjaykz52

Angular JS blog tutorialClaude Tech

Backbone/Marionette recap [2015]Andrii Lundiak

jQuery Bay Area Conference 2010mennovanslooten

Similar to Academy PRO: React native - publish (20)

It works on your computer... but does it render fast enough?Diogo Antunes

Creating books app with react nativeAli Sa'o

Js foo - Sept 8 uploadDebnath Sinha

The document discusses the evolution of MVC patterns and the rise of HTML5 for building mobile apps. It describes how JavaScript performance issues were really due to DOM inefficiency rather than the language itself. The document introduces Famo.us, a JavaScript library that uses transformation matrices from computer graphics to improve rendering performance on mobile. It explains how Famo.us implements an MVC pattern with Backbone.js to separate concerns for building responsive mobile apps with a common codebase.

Running HTML5 Mobile Web Games at 60fpsApoorv Saxena

HalfStack fast but not furiousAnna Migas

This document discusses debugging user interaction performance issues in web pages. It begins by explaining how the browser renders frames and what happens during each step of the rendering process. It then covers the different types of changes that can trigger layout, paint, or compositing updates. Potentially problematic UI patterns like animations, parallax effects, scrolling events and appending elements are described. The document provides tips on using tools like the Performance tab to test for interaction issues and recommends techniques like using will-change to avoid unnecessary repaints and reflows.

Catan world and ChurchillGrant Goodale

Advanced #4 GPU & AnimationsVitali Pekelis

[143]Inside fuse deview 2016NAVER D2

Fuse is a mobile app development platform that allows building native mobile apps using JavaScript. It uses an asynchronous architecture where JavaScript runs on a background thread, while the native UI runs on the main thread. This avoids performance issues from blocking the UI thread. Communication between JavaScript and the UI happens through Observables, which allow precise and minimal UI updates from asynchronous data changes. Developers can optionally use Angular 2 on top of Fuse, and Fuse's asynchronous architecture ensures UI performance is not affected by the framework.

WebGL visualization of a shipping terminalJosh Staples

Philip Shurpik "Architecting React Native app"Fwdays

React Native становится все более зрелым фреймворком для создания кросс платформенных мобильных приложений. Доклад основан на нашем опыте создания production приложения - от архитектуры до тестирования и CI. Рассмотрим вопрос переиспользования кода при разработке для разных платформ- что и сколько процентов можно переиспользовать и как этого достичь. Поговорим о том, как можно очень просто сделать offline-first приложение для чтения и создания данных. И чем нам в этом могут помочь Redux и Redux persist. Разберем, как максимально просто сделать навигацию в приложении. И, конечно же, какое production приложение без тестирования и continuous integration? Рассмотрим компонентное тестирование с Enzyme и интеграционное с Appium. А также, как максимально приблизить процесс deploy к тому, чему мы привыкли в web, с помощью CodePush.

Isomorphic JavaScript: #DevBeat Master ClassSpike Brehm

1) Isomorphic JavaScript allows code to run on both the client and server by being environment-agnostic or shimmed for different environments. 2) It improves performance by enabling faster initial page loads and improves SEO by allowing search engines to crawl single page apps. 3) Popular libraries like Underscore, Backbone, Handlebars, and React can be used isomorphically, and isomorphic applications exist on a spectrum from sharing small parts of code to entire applications.

Die Qual der Wahl bei den Single Page Application FrameworksJonas Bandi

Dieser Vortrag gibt einen Überblick über die aktuellen Single Page Applikation Frameworks und versucht diese zu vergleichen. Der Fokus liegt dabei auf den aktuellen "Top 3" der SPA Frameworks: Angular, React und Vue.js. Der Vortrag schaut aber auch über den Tellerrand und beleuchtet aktuelle Trends und Entwicklungen. Dabei werden die neueren Ansätze von Balzor, Vaadin und Flutter den traditionellen SPA Frameworks gegenübergestellt.

ReactiveCocoa - Functional Reactive Programming concepts in iOSAndrei Popa

What's new in ios 7.0CocoaHeads France

iOS 7 introduced many new features including a flat UI design, improved animations, dynamic behaviors for views using UIKit dynamics, enhanced text handling with TextKit, improved background downloading capabilities, a new networking class called NSURLSession, peer-to-peer connectivity with Multipeer Connectivity, an updated Map Kit, inter-app communication through AirDrop, and expanded audio, image, and web capabilities. Game development was also enhanced with the new Sprite Kit framework.

Android Starter KitFajar Ulin Nuha

This document provides an introduction and overview of Android development. It discusses why everybody should learn to program computers, and lists the requirements and components needed for mobile app development, including programming languages, XML, services, and activities. It then demonstrates basic Java and XML syntax for creating an activity and integrating XML layouts with Java code. Finally, it provides learning resources for developing Android skills at different levels, ranging from official developer sites to online courses and tutorials.

Catching-up web technologies - an endless storyCleber Jorge Amaral

Deep dive into Android async operationsMateusz Grzechociński

Building cross-platform mobile apps with React Native (Jfokus 2017)Maarten Mulders

There's nothing more expensive than building the same thing twice. Yet that is what a lot of companies do when they publish a mobile app: they build one for Android and one for iOS. But wait, you don't have to! Using React Native, you can build one mobile app for both platforms from one code base using a language you're probably already familiar with - JavaScript. In this session, we'll discuss building a simple word game app for both iOS and Android. First, we'll dive into how React Native works and how to build a basic application. Then, we'll dive into the Redux framework, which helps us building predictable state and allows for great testability of our application. Finally, we look at how the two integrate and how the game is built.

End to end todo list app with NestJs - Angular - Redux & Redux SagaBabacar NIANG

The document discusses building a todo list application using NestJS for the backend API, Angular for the frontend, and Redux/Redux Saga for state management. It provides an overview of setting up the NestJS API including creating modules, services, and connecting to MongoDB. It then covers generating the initial Angular application and importing Redux libraries. Finally, it details how to manage application state with Redux including creating actions, reducers, effects, and selectors and integrating them with the Angular application and NestJS services.

$resume2016_EdwardChened Chen

It works on your computer... but does it render fast enough?Diogo Antunes

Creating books app with react nativeAli Sa'o

Js foo - Sept 8 uploadDebnath Sinha

Running HTML5 Mobile Web Games at 60fpsApoorv Saxena

HalfStack fast but not furiousAnna Migas

Catan world and ChurchillGrant Goodale

Advanced #4 GPU & AnimationsVitali Pekelis

[143]Inside fuse deview 2016NAVER D2

WebGL visualization of a shipping terminalJosh Staples

Philip Shurpik "Architecting React Native app"Fwdays

Isomorphic JavaScript: #DevBeat Master ClassSpike Brehm

Die Qual der Wahl bei den Single Page Application FrameworksJonas Bandi

ReactiveCocoa - Functional Reactive Programming concepts in iOSAndrei Popa

What's new in ios 7.0CocoaHeads France

Android Starter KitFajar Ulin Nuha

Catching-up web technologies - an endless storyCleber Jorge Amaral

Deep dive into Android async operationsMateusz Grzechociński

Building cross-platform mobile apps with React Native (Jfokus 2017)Maarten Mulders

End to end todo list app with NestJs - Angular - Redux & Redux SagaBabacar NIANG

$resume2016_EdwardChened Chen

More from Binary Studio (20)

Academy PRO: D3, part 3Binary Studio

This document discusses using HTML5 Canvas with D3.js for data visualization. It provides an overview of Canvas, noting that it is lower level but more performant than SVG for drawing many objects on a small surface like data visualizations. It then lists 3 ways D3.js can be used with Canvas, including using D3.js for data transformation and repainting Canvas on data changes or animations. The document provides examples of drawing, data binding, axes, transitions, interactivity, and drag and drop on Canvas using D3.js and links to additional Canvas tutorials.

Academy PRO: D3, part 1Binary Studio

Data visualization is the presentation of data in a graphical format. Visuals are processed faster by the brain and help reveal patterns, trends, and correlations in the data. D3 is a popular JavaScript library for visualizing data using web standards like SVG, Canvas, and HTML. It allows powerful data-driven transformations of documents by binding data to elements. Scales map abstract data dimensions to visual representations.

Academy PRO: Cryptography 3Binary Studio

The document discusses various cryptographic concepts such as MACs, hashes, key derivation functions, and authenticated encryption. It describes techniques for constructing secure MACs like ECBC-MAC and PMAC, and explains attacks like length-extension attacks and collision attacks. The document also covers standards for authenticated encryption like GCM, CCM, and EAX that combine encryption and message authentication codes.

Academy PRO: Cryptography 1Binary Studio

Cryptography is used in many applications including data encryption, digital communications, digital signatures, and content protection. It relies on principles of number theory and concepts like primes and one-way functions. The one-time pad provides perfect secrecy but requires a truly random key of the same length as the message. Stream ciphers expand a small key into a pseudorandom stream using a pseudorandom generator, allowing encryption and decryption at high speeds though perfect secrecy is not achieved. Semantic security provides protection against chosen plaintext attacks by ensuring an adversary cannot determine which of two messages was encrypted.

Academy PRO: Advanced React Ecosystem. MobXBinary Studio

MobX is a library that uses functional reactive programming to simplify state management in applications. It uses decorators like @observable, @computed, and @action to transparently observe state changes and automatically update dependent views. MobX ensures state and views remain consistent by deriving all values and automatically running reactions when the source data changes. MobX also includes tools for debugging observable state and integrating with React applications.

Academy PRO: Docker. Part 4Binary Studio

The document discusses Docker and container orchestration tools. It begins with an agenda on multi-machine Docker swarms and alternatives like Kubernetes and Mesos. It then covers setting up a multi-node Docker swarm across two virtual machines, deploying an application to the swarm, and accessing the clustered application. Moby Project is introduced as the new name for Docker's open source components to distinguish them from commercial Docker products. Tools like Kitematic, Docker's Universal Control Plane, and Panamax are also briefly mentioned.

Academy PRO: Docker. Part 2Binary Studio

The document provides an overview of containerization basics using Docker. It defines key Docker terminology like images, containers, daemon, client, and Docker Hub. It explains how to run a static website in a container, view running containers and images, build and push custom images to a private registry. It also covers container logging and setting up a private Docker registry using the registry image.

Academy PRO: Docker. Part 1Binary Studio

This document provides an agenda for a Docker Academy PRO course. It introduces containers and containerization basics. It discusses how Docker works and the evolution of IT that led to its development. It compares containers to virtual machines and the advantages of containers. Key Docker concepts are explained like images, the Docker daemon, and official Docker images. The document concludes by asking if there are any questions.

Binary Studio Academy 2017: JS team project - OrderlyBinary Studio

Binary Studio Academy 2017: .NET team project - UnicornBinary Studio

Academy PRO: React Native - introductionBinary Studio

The document provides an overview of React Native, including its history and timeline, components, styles, performance, debugging tools, and how to set up a React Native application. Some key points covered include: - React Native allows building native mobile apps using JavaScript and React by rendering UI components to native platform views. - It uses the same fundamental UI building blocks as regular iOS and Android apps like Views, Text, Image, ScrollView etc. but they are implemented using JavaScript and React. - Styles are defined using JavaScript objects with the StyleSheet.create method, allowing flexible styling similar to CSS but optimized for mobile. - Under the hood, React Native combines the fundamental native platform APIs with

Academy PRO: Push notifications. Denis BeketskyBinary Studio

Academy PRO: Docker. Lecture 4Binary Studio

The document discusses Docker and container orchestration tools. It begins with an agenda on multi-machine Docker swarms and alternatives like Kubernetes and Mesos. It then provides step-by-step instructions for setting up a multi-node Docker swarm cluster on VirtualBox machines and deploying an application. The document also discusses the Moby Project for separating Docker's open source and commercial components, as well as other Docker tools for developers.

Academy PRO: Docker. Lecture 3Binary Studio

This document provides a summary of key concepts in Docker orchestration and networking: - It describes the default Docker networks (bridge, none, host) and how to create custom networks for containers to communicate. - Docker Compose is introduced as a tool to define and run multi-container applications using a compose file to configure services. - Docker Swarm mode allows deploying containers across multiple Docker hosts as a cluster, with services that can be scaled out and updated on the swarm. Managers and workers are node types in a swarm. - Key features for swarm deployments using Docker Compose files are discussed, including resources, update configurations, and restart policies.

Academy PRO: Docker. Lecture 2Binary Studio

Academy PRO: Docker. Lecture 1Binary Studio

This document provides an agenda for a Docker Academy PRO course. It introduces Docker and containerization basics, including what containers are, how they work, and the challenges they solve compared to traditional virtual machines. It discusses Docker specifically, how it helps build and deploy applications, and how the Docker ecosystem works with components like Containerd and runC. Overall it serves as an introduction and overview to Docker and containerization concepts.

Academy PRO: Node.js - miscellaneous. Lecture 5Binary Studio

Academy PRO: Node.js in production. lecture 4Binary Studio

Academy PRO: Node.js alternative stacks. Lecture 3Binary Studio

Academy PRO: Node.js default stack. Lecture 2Binary Studio

Academy PRO: D3, part 3Binary Studio

Academy PRO: D3, part 1Binary Studio

Academy PRO: Cryptography 3Binary Studio

Academy PRO: Cryptography 1Binary Studio

Academy PRO: Advanced React Ecosystem. MobXBinary Studio

Academy PRO: Docker. Part 4Binary Studio

Academy PRO: Docker. Part 2Binary Studio

Academy PRO: Docker. Part 1Binary Studio

Binary Studio Academy 2017: JS team project - OrderlyBinary Studio

Binary Studio Academy 2017: .NET team project - UnicornBinary Studio

Academy PRO: React Native - introductionBinary Studio

Academy PRO: Push notifications. Denis BeketskyBinary Studio

Academy PRO: Docker. Lecture 4Binary Studio

Academy PRO: Docker. Lecture 3Binary Studio

Academy PRO: Docker. Lecture 2Binary Studio

Academy PRO: Docker. Lecture 1Binary Studio

Academy PRO: Node.js - miscellaneous. Lecture 5Binary Studio

Academy PRO: Node.js in production. lecture 4Binary Studio

Academy PRO: Node.js alternative stacks. Lecture 3Binary Studio

Academy PRO: Node.js default stack. Lecture 2Binary Studio

Recently uploaded (20)

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Artificial intelligence is changing how businesses operate. Companies are using AI agents to automate tasks, reduce time spent on repetitive work, and focus more on high-value activities. Noah Loul, an AI strategist and entrepreneur, has helped dozens of companies streamline their operations using smart automation. He believes AI agents aren't just tools—they're workers that take on repeatable tasks so your human team can focus on what matters. If you want to reduce time waste and increase output, AI agents are the next move.

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, presentation slides, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Hybrid Growth Mandate Model with TrsLabs Strategic Investments, Inorganic Growth, Business Model Pivoting are critical activities that business don't do/change everyday. In cases like this, it may benefit your business to choose a temporary external consultant. An unbiased plan driven by clearcut deliverables, market dynamics and without the influence of your internal office equations empower business leaders to make right choices. Getting things done within a budget within a timeframe is key to Growing Business - No matter whether you are a start-up or a big company Talk to us & Unlock the competitive advantage

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, transcript, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

How Can I use the AI Hype in my Business Context?Daniel Lehner

𝙄𝙨 𝘼𝙄 𝙟𝙪𝙨𝙩 𝙝𝙮𝙥𝙚? 𝙊𝙧 𝙞𝙨 𝙞𝙩 𝙩𝙝𝙚 𝙜𝙖𝙢𝙚 𝙘𝙝𝙖𝙣𝙜𝙚𝙧 𝙮𝙤𝙪𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙣𝙚𝙚𝙙𝙨? Everyone’s talking about AI but is anyone really using it to create real value? Most companies want to leverage AI. Few know 𝗵𝗼𝘄. ✅ What exactly should you ask to find real AI opportunities? ✅ Which AI techniques actually fit your business? ✅ Is your data even ready for AI? If you’re not sure, you’re not alone. This is a condensed version of the slides I presented at a Linkedin webinar for Tecnovy on 28.04.2025.

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Toradex brings robust Linux support to SMARC (Smart Mobility Architecture), ensuring high performance and long-term reliability for embedded applications. Here’s how: • Optimized Torizon OS & Yocto Support – Toradex provides Torizon OS, a Debian-based easy-to-use platform, and Yocto BSPs for customized Linux images on SMARC modules. • Seamless Integration with i.MX 8M Plus and i.MX 95 – Toradex SMARC solutions leverage NXP’s i.MX 8 M Plus and i.MX 95 SoCs, delivering power efficiency and AI-ready performance. • Secure and Reliable – With Secure Boot, over-the-air (OTA) updates, and LTS kernel support, Toradex ensures industrial-grade security and longevity. • Containerized Workflows for AI & IoT – Support for Docker, ROS, and real-time Linux enables scalable AI, ML, and IoT applications. • Strong Ecosystem & Developer Support – Toradex offers comprehensive documentation, developer tools, and dedicated support, accelerating time-to-market. With Toradex’s Linux support for SMARC, developers get a scalable, secure, and high-performance solution for industrial, medical, and AI-driven applications. Do you have a specific project or application in mind where you're considering SMARC? We can help with Free Compatibility Check and help you with quick time-to-market For more information: https://www.toradex.com/computer-on-modules/smarc-arm-family

Mobile App Development Company in Saudi ArabiaSteve Jonas

EmizenTech is a globally recognized software development company, proudly serving businesses since 2013. With over 11+ years of industry experience and a team of 200+ skilled professionals, we have successfully delivered 1200+ projects across various sectors. As a leading Mobile App Development Company In Saudi Arabia we offer end-to-end solutions for iOS, Android, and cross-platform applications. Our apps are known for their user-friendly interfaces, scalability, high performance, and strong security features. We tailor each mobile application to meet the unique needs of different industries, ensuring a seamless user experience. EmizenTech is committed to turning your vision into a powerful digital product that drives growth, innovation, and long-term success in the competitive mobile landscape of Saudi Arabia.

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-and-managing-multiuser-environments/ HCL Nomad Web is heralded as the next generation of the HCL Notes client, offering numerous advantages such as eliminating the need for packaging, distribution, and installation. Nomad Web client upgrades will be installed “automatically” in the background. This significantly reduces the administrative footprint compared to traditional HCL Notes clients. However, troubleshooting issues in Nomad Web present unique challenges compared to the Notes client. Join Christoph and Marc as they demonstrate how to simplify the troubleshooting process in HCL Nomad Web, ensuring a smoother and more efficient user experience. In this webinar, we will explore effective strategies for diagnosing and resolving common problems in HCL Nomad Web, including - Accessing the console - Locating and interpreting log files - Accessing the data folder within the browser’s cache (using OPFS) - Understand the difference between single- and multi-user scenarios - Utilizing Client Clocking

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots. 📕 Here's what you can expect: - Modeling: Build end-to-end processes using BPMN. - Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes. - Operating: Control process instances with rewind, replay, pause, and stop functions. - Monitoring: Use dashboards and embedded analytics for real-time insights into process instances. This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes. 👨‍🏫 Speaker: Andrei Vintila, Principal Product Manager @UiPath This session streamed live on April 29, 2025, 16:00 CET. Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Aqusag Technologies

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Transcript: #StandardsGoals for 2025: Standards & certification roundup - Tec...BookNet Canada

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

TrsLabs - Fintech Product & Business ConsultingTrs Labs

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

How Can I use the AI Hype in my Business Context?Daniel Lehner

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Mobile App Development Company in Saudi ArabiaSteve Jonas

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Academy PRO: React native - publish

1. React Native Show your application to public

2. Contents 1. Introduction 2. Building first scenes 3. Navigation/Swiping 4. Sockets/Animations/Push notifications etc. 5. Performance/Building application/Send to market

3. Building APK

4. Shake it

5. 60 FPS 1000ms / 60 = 16.5ms / frame

6. JS Frame rate - Business logic - SetState - Animations - Touches

7. E.g. 200ms / 16.5ms = 12 frames dropped

8. Main UI thread frame rate Who’s there? - ScrollView - iOSNavigator

9. Performance killers - Console.logs - Dev mode - Navigator transition (each frame)

10. Transition componentDidMount() { InteractionManager.runAfterInteractions(() => { this.setState({renderPlaceholderOnly: false}); }); }

11. How to improve performance more? - Draw something before (rectangles like in facebook) - Spinner

12. Animated API - Notifies Interaction manager - Works with interactions - Still calculates each frame on demand of JS thread

13. Use layout animation - But for static only

14. renderToHardwareTextureAndroid On Android, this is useful for animations and interactions that only modify opacity, rotation, translation, and/or scale: in those cases, the view doesn't have to be redrawn and display lists don't need to be re- executed. - Memory expensive

15. Animating size - Width and height - Transform scale

16. Touches handleOnPress() { // Always use TimerMixin with requestAnimationFrame, setTimeout and // setInterval this.requestAnimationFrame(() => { this.doExpensiveAction(); }); }

17. Tools - React-addons-perf - Profiling

18. React-addons-perf Perf.start() // ... Perf.stop()

19. Methods printInclusive() printExclusive() printWasted()

20. Perf.printWasted(measurements)

21. Profiler $ <path_to_android_sdk>/platform-tools/systrace/systrace.py - -time=10 -o trace.html sched gfx view -a <your_package_name>

22. Reading

23. JS thread troubles

24. Main thread troubles

25. Building APK

26. Key $ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

27. ./gradle.properties MYAPP_RELEASE_STORE_FILE=my-release-key.keystore MYAPP_RELEASE_KEY_ALIAS=my-key-alias MYAPP_RELEASE_STORE_PASSWORD=***** MYAPP_RELEASE_KEY_PASSWORD=*****

28. Build.gradle signingConfigs { release { if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) { storeFile file(MYAPP_RELEASE_STORE_FILE) storePassword MYAPP_RELEASE_STORE_PASSWORD keyAlias MYAPP_RELEASE_KEY_ALIAS keyPassword MYAPP_RELEASE_KEY_PASSWORD } } }

29. android { buildTypes { release { ... signingConfig signingConfigs.release } } } ... Build.gradle

30. Build apk file $ cd android && ./gradlew assembleRelease android/app/build/outputs/apk/app-release.apk

31. Publish to market

41. iOS

42. Command Product → Scheme → Edit Scheme (cmd + <)

47. Expo

50. Built-in components import React from 'react'; import { Components } from 'expo'; export default class App extends React.Component { render() { return ( <Components.MapView style={{ flex: 1 }} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }} /> ); } }

51. Fastlane

52. Fastlane

54. CodePush

55. Code Push

56. Code let codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL }; class MyApp extends Component { onButtonPress() { codePush.sync({ updateDialog: true, installMode: codePush.InstallMode.IMMEDIATE }); } render() { <View> <TouchableOpacity onPress={this.onButtonPress}> <Text>Check for updates</Text> </TouchableOpacity> </View> } } MyApp = codePush(codePushOptions)(MyApp);

57. Thanks!

Academy PRO: React native - publish

Recommended

More Related Content

What's hot (20)

Similar to Academy PRO: React native - publish (20)

More from Binary Studio (20)

Recently uploaded (20)

Academy PRO: React native - publish