Mobile applications in a new way with React Native

•

0 likes•579 views

Eugene Zharkov

Short introduction to React Native

Technology

React Native
Eugene Zharkov
eu.zharkov@gmail.com
@2j2e

Supported platforms
iOS and Androidnot available

Under the hood
React JS JavaScriptCore Native
ComponentsRCTBridge

Components
• ActivityIndicatorIOS
• DatePickerIOS
• Image
• ListView
• MapView
• Navigator
• NavigatorIOS
• PickerIOS
• ScrollView
• SliderIOS
• SwitchIOS
• TabBarIOS
• TabBarIOS.Item
• Text
• TextInput
• TouchableHighlight
• TouchableOpacity
• TouchableWithoutFeedback
• View
• WebView

Setup
↬ Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
↬ Node.js
brew install node
↬ Watchman
brew install --HEAD watchman
↬ Google Chrome
↬ React Native CLI
npm install -g react-native-cli

Grails 3.1 enhances and improves the profile system introduced in Grails 3.0. One of the new profiles ease the creation and development of applications where the the front-end is an Angular JS application, and the backend is a Grails REST API. In this session, Álvaro (member of the Grails team at OCI, Grails committer and author of several plugins) will demonstrate how to use the Angular profile to create an application using Grails 3.1, Angular JS and Spring Security REST. The workshop is published at http://alvarosanchez.github.io/grails-angularjs-springsecurity-workshop/

Hybrid Application Development

Yagiz Nizipli

20210411 全端網頁開發起手式：建構並佈署Angular網頁應用程式至GCP

Kun-Neng Hung

Vue.jsをはじめる

Reo Mori

Mastering Grails 3 Plugins - GR8Conf US 2016

Alvaro Sanchez-Mariscal

With Grails 3, the plugin development experience changes a little bit compared to that of Grails 2. In this talk, Álvaro (member of the Grails team at OCI, Grails committer and author of several plugins) will cover several topics to understand how plugins work in Grails 3, focusing on best practices. The session is structured as a set of tips and tricks with code samples in the following areas: modularisation, build system, testing and publishing.

Atomic Designは「マルチ」で真価を発揮する

Yukiya Nakagawa

Web Development: Making it the right way

Yagiz Nizipli

An iOS Developer's Perspective on React Native

Aleksandras Smirnovas

@KileNiklawski with @IpponUSA presents on how we built a job board in one week using JHipster. About JHipster: Our goal is to generate for you a complete and modern Web app, unifying: - A high-performance and robust Java stack on the server side with Spring Boot - A sleek, modern, mobile-first front-end with AngularJS and Bootstrap - A powerful workflow to build your application with Yeoman, Bower, Grunt and Maven

Next-Generation Ruby Deployment with Heroku

Adam Wiggins

Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...

Tracy Lee

Slides from my AngularJS Berlin talk. Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Firebase. Link to articles and starter repo on github listed. Github starter repo: https://github.com/ladyleet/ngtattoo-ngexample App on Firebase: https://ngtattooexample.firebaseapp.com/ Post: How to use materialize-css with Angular 2 https://medium.com/@ladyleet/using-materializecss-with-your-angular-2-angular-cli-app-2eb64b05a1d2#.28mbpguuv Post: Using Angular 2’s new router https://medium.com/@ladyleet/using-angular-2s-brand-new-router-a868fdc23503#.ubyiddj7n Post: Displaying data using ngFor https://medium.com/@ladyleet/displaying-data-with-the-ngfor-directive-in-your-angular-2-app-1b72cab1121e#.vpiznb2bi

React Nativeの光と闇

Yukiya Nakagawa

React Native - DILo Surabaya

DILo Surabaya

Introduction to React Native - Lev Vidrak, Wix

DroidConTLV

What's hot

React Native

Artyom Trityak

Creating "The Second Best Place on the Internet" with Spring Initializr

VMware Tanzu

Introduction to Cross Platform Mobile Apps (Xamarin)

BizTalk360

React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi

Yukiya Nakagawa

CreateJS hackathon in ZurichHenri Bergius

Introduction to React Native

dvcrn

Web components

ehsanarian

React Native in a nutshell

Brainhub

Getting started with Angular CLI

Sasha Vinčić

Introduction to JHipster

PadmanabanNagarajan1

AngularJs advanced Topics

Amr Abd El Latief

Extending GWT

isurusndr

React.js for Back-End developers

Artyom Trityak

The Tale of 2 CLIs - Ember-cli and Angular-cli

Tracy Lee

Wulin kungfu final

Jimmy Huang

Getting Started with the Angular 2 CLI

Jim Lynch

How we built a job board in one week with JHipster

Kile Niklawski

Next-Generation Ruby Deployment with Heroku

Adam Wiggins

Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...

Tracy Lee

React Nativeの光と闇

Yukiya Nakagawa

What's hot (20)

React Native

Creating "The Second Best Place on the Internet" with Spring Initializr

Introduction to Cross Platform Mobile Apps (Xamarin)

React Nativeはクロスプラットフォームモバイルアプリ開発の夢を見るか #DroidKaigi

CreateJS hackathon in Zurich

Introduction to React Native

Web components

React Native in a nutshell

Getting started with Angular CLI

Introduction to JHipster

AngularJs advanced Topics

Extending GWT

React.js for Back-End developers

The Tale of 2 CLIs - Ember-cli and Angular-cli

Wulin kungfu final

Getting Started with the Angular 2 CLI

How we built a job board in one week with JHipster

Next-Generation Ruby Deployment with Heroku

Creating an Angular 2 Angular CLI app in 15 Minutes Using MaterializeCSS & Fi...

React Nativeの光と闇

Similar to Mobile applications in a new way with React Native

React Native - DILo Surabaya

DILo Surabaya

Introduction to React Native - Lev Vidrak, Wix

DroidConTLV

Putting the Native in React Native - React Native Boston

stan229

Workshop 24: React Native Introduction

Visual Engineering

Philip Shurpik "Architecting React Native app"

Fwdays

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

Android Introductionaswapnal

React Native

Huqiu Liao

Intro to react native

ModusJesus

Mobile Vue.js – From PWA to Native

MartinSotirov

Building applications for mobile devices has its additional challenges: The network connection can be flaky and slow, so the application should still work when the device is offline. Users expect application icons on their home screens to start them. Depending on your use cases you want to access sensors that are not available in the browser. This Meetup Martin Sotirov (@unclemartycodes) will talk about Vue on mobile devices and take a look at the different ways you can deploy a Vue app on mobile. We start with a PWA, go through a hybrid solution using Ionic Capacitor and then finally arrive at a NativeScript app which renders native iOS and Android views. https://martinsotirov.com contact@martinsotirov.com

Optimizing React Native views for pre-animation

ModusJesus

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

sparkfabrik

Android 101 - Introduction to Android Development

Andy Scherzinger

Android App Development using HTML5 Technology

Oon Arfiandwi

React basic by Yoav Amit, Wix

Chen Lerner

Android Tutorial

Yogesh_Lakhole

React nativebeginner1

Oswald Campesato

Android OS & SDK - Getting Started

Hemant Chhapoliya

Mobile native-hacksDevelopmentArc LLC

Real-world Dojo MobileAndrew Ferrier

移动端Web app开发

Zhang Xiaoxue

Similar to Mobile applications in a new way with React Native (20)

React Native - DILo Surabaya

Introduction to React Native - Lev Vidrak, Wix

Putting the Native in React Native - React Native Boston

Workshop 24: React Native Introduction

Philip Shurpik "Architecting React Native app"

Android Introduction

React Native

Intro to react native

Mobile Vue.js – From PWA to Native

Optimizing React Native views for pre-animation

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

Android 101 - Introduction to Android Development

Android App Development using HTML5 Technology

React basic by Yoav Amit, Wix

Android Tutorial

React nativebeginner1

Android OS & SDK - Getting Started

Mobile native-hacks

Real-world Dojo Mobile

移动端Web app开发

More from Eugene Zharkov

Monorepo: React + React Native. React Alicante

Eugene Zharkov

There are cases when product has a lot of business logic and want's to share it across web and mobile platforms, especially when the web part uses React and mobile - React Native. Sharable code adds development speed, simplified communication between teams, removes behaviour differences between web and mobile. At the same time there are a lot of things which can increase a solution complexity and add some limits to the final product.

Monorepo: React Web & React Native

Eugene Zharkov

Create React Native App vs Expo vs Manually

Eugene Zharkov

Build automation with Fastlane

Eugene Zharkov

GraphQL and/or REST

Eugene Zharkov

React Native Animation

Eugene Zharkov

React Native: Hurdle Race

Eugene Zharkov

Burn your grass with react native

Eugene Zharkov

Фронтенд сказки

Eugene Zharkov

Среди всех информационных шумов в мире разработки фронтенд-стек на лидирующих позициях. Открываешь Medium или Twitter и поехало, можно только и делать, что читать материалы до конца жизни или пока не уволят. 1000 истин и нужно выбрать что-то свое. Задача не из простых, попробуем её решить?

How to be a good frontend developer

Eugene Zharkov

Cycle.js: Functional and Reactive

Eugene Zharkov

Что там в summary

Eugene Zharkov

Elm: give it a try

Eugene Zharkov

Switch to React.js from AngularJS developer

Eugene Zharkov

AngularJS: Good parts

Eugene Zharkov

Angular 2: Всех переиграл

Eugene Zharkov

Angular 2.0: Brighter future?Eugene Zharkov

Как объяснить на платьях процесс разработки?

Eugene Zharkov

Angular.JS: Do it right

Eugene Zharkov

SignalR: Add real-time to your applicationsEugene Zharkov

More from Eugene Zharkov (20)

Monorepo: React + React Native. React Alicante

Monorepo: React Web & React Native

Create React Native App vs Expo vs Manually

Build automation with Fastlane

GraphQL and/or REST

React Native Animation

React Native: Hurdle Race

Burn your grass with react native

Фронтенд сказки

How to be a good frontend developer

Cycle.js: Functional and Reactive

Что там в summary

Elm: give it a try

Switch to React.js from AngularJS developer

AngularJS: Good parts

Angular 2: Всех переиграл

Angular 2.0: Brighter future?

Как объяснить на платьях процесс разработки?

Angular.JS: Do it right

SignalR: Add real-time to your applications

Recently uploaded

GraphRAG is All You need? LLM & Knowledge Graph

Guy Korland

Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs. 1. Unifying Large Language Models and Knowledge Graphs: A Roadmap. https://arxiv.org/abs/2306.08302 2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs: https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/

Securing your Kubernetes cluster_ a step-by-step guide to success !

KatiaHIMEUR1

Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster. However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks. In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf

FIDO Alliance

From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...

Product School

Accelerate your Kubernetes clusters with Varnish Caching

Thijs Feryn

Key Trends Shaping the Future of Infrastructure.pdf

Cheryl Hung

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

BookNet Canada

The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more. Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/ Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.

Generating a custom Ruby SDK for your web service or Rails API using Smithy

g2nightmarescribd

Have you ever wanted a Ruby client API to communicate with your web service? Smithy is a protocol-agnostic language for defining services and SDKs. Smithy Ruby is an implementation of Smithy that generates a Ruby SDK using a Smithy model. In this talk, we will explore Smithy and Smithy Ruby to learn how to generate custom feature-rich SDKs that can communicate with any web service, such as a Rails JSON API.

DevOps and Testing slides at DASA Connect

Kari Kakkonen

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

James Anderson

Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management. The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM). Speakers: Bob Boule Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle. Gopinath Rebala Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.

Designing Great Products: The Power of Design and Leadership by Chief Designe...

Product School

AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...

Product School

Leading Change strategies and insights for effective change management pdf 1.pdf

OnBoard

FIDO Alliance Osaka Seminar: Overview.pdf

FIDO Alliance

Bits & Pixels using AI for Good.........

Alison B. Lowndes

Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...

Jeffrey Haguewood

Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows. We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases. This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams. Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.

When stars align: studies in data quality, knowledge graphs, and machine lear...

Elena Simperl

Epistemic Interaction - tuning interfaces to provide information for AI support

Alan Dix

Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024 https://alandix.com/academic/papers/synergy2024-epistemic/ As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.

JMeter webinar - integration with InfluxDB and Grafana

RTTS

Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application. In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics. Length: 30 minutes Session Overview ------------------------------------------- During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana: - What out-of-the-box solutions are available for real-time monitoring JMeter tests? - What are the benefits of integrating InfluxDB and Grafana into the load testing stack? - Which features are provided by Grafana? - Demonstration of InfluxDB and Grafana using a practice web application To view the webinar recording, go to: https://www.rttsweb.com/jmeter-integration-webinar

Recently uploaded (20)

GraphRAG is All You need? LLM & Knowledge Graph

Securing your Kubernetes cluster_ a step-by-step guide to success !

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf

FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf

From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...

Accelerate your Kubernetes clusters with Varnish Caching

Key Trends Shaping the Future of Infrastructure.pdf

Transcript: Selling digital books in 2024: Insights from industry leaders - T...

Generating a custom Ruby SDK for your web service or Rails API using Smithy

DevOps and Testing slides at DASA Connect

GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...

Designing Great Products: The Power of Design and Leadership by Chief Designe...

AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...

Leading Change strategies and insights for effective change management pdf 1.pdf

FIDO Alliance Osaka Seminar: Overview.pdf

Bits & Pixels using AI for Good.........

Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...

When stars align: studies in data quality, knowledge graphs, and machine lear...

Epistemic Interaction - tuning interfaces to provide information for AI support

JMeter webinar - integration with InfluxDB and Grafana

Mobile applications in a new way with React Native

1. React Native Eugene Zharkov eu.zharkov@gmail.com @2j2e

2. We can write mobile applications...

3. using ReactJS...

4. using HTML principals...

5. using CSS principals...

6. without HTML...

7. without CSS...

8. without WebView

9. Supported platforms iOS and Android

10. Supported platforms iOS and Androidnot available

11. Under the hood React JS JavaScriptCore Native ComponentsRCTBridge

12. Components • ActivityIndicatorIOS • DatePickerIOS • Image • ListView • MapView • Navigator • NavigatorIOS • PickerIOS • ScrollView • SliderIOS • SwitchIOS • TabBarIOS • TabBarIOS.Item • Text • TextInput • TouchableHighlight • TouchableOpacity • TouchableWithoutFeedback • View • WebView

13. Components

14. Moving to the project

15. Setup

16. Setup ↬ Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ↬ Node.js brew install node ↬ Watchman brew install --HEAD watchman ↬ Google Chrome ↬ React Native CLI npm install -g react-native-cli

17. Includes

18. JSX

19. Styles

20. Actions

21. Actions

22. Debug

23. The End