Monorepo: React + React Native. React Alicante

•

1 like•798 views

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.

Software

OUR AMAZING TEAM
Backend Developer
Eugenio
Frontend Developer
Yevhen
Mobile Developer
Eugene
There is no limit if logic

write applications…obviously
hire teams
consult
make workshops…sometimes
own the dog
I

Where are you
Building from scratch
Web application is ready
Mobile application is ready
Mobile & Web applications are ready

Technologies
iOS Android Web
Swift / Objective-C Java / Kotlin Java Script
React
Angular
Vue
Ember
Elm
Svelte
TypeScript
jQuery ;)
and
much more

People Funnel
iOS
Team
Android
Team
Web
Team
Team
Lead
Team
Lead
Team
Lead
Product Owner

React Promise
React
Native
React
Web
Team Lead
Product Owner

React Promise
React Team
Team Lead
Product Owner
Native
Team

Issues
• Technologies
• Task synchronization
• Delivery synchronization
• Hiring
• People, people, people

React Promise
• One language - JavaScript / TypeScript
• Single UI library - React
• 1 or 2 teams
• Less expertise for hiring
• Share code between Web and Mobile

Issue #0
You need to share a code
between web and mobile.
Shared Web Mobile

Issue #1
Metro bundler doesn’t support
symlinks

Issue #2
Build - OK

Development - NOPE

OK
NOPENOPENOPENOPE

WML by WIX
Copies changed ﬁles from
source to destination folders

Issue #3
Last update 2 years ago

Unstable

Specify any additional (to projectRoot) watch folders, this is used to
know which ﬁles to watch.

Which other node_modules to include besides the ones relative to
the project directory. This is keyed by dependency name.

Lerna
Tool for managing JavaScript projects with multiple packages.

Issue #4
Core code should be platform
agnostic

Browser
React
HTML & CSS
TC39Browser
implementation
babel
any other bug
Markup

Mobile Platform
React Native
React Native for Web
React
Browser

Potential issues
• React Native bugs, controls and behavior issues
• React Native for Web bugs, limits, interpretation
• 3rd party components and markup control
• Styling
• Integration

Issue #5
Web and Mobile application
should behave similar
React Web React Native

What to expect
• Data loading strategy can be different
• Data source structure can be different, SectionList for example

The End
• Keep your estimates real
• Check the idea before “yes, we’ll do it”
• Talk to your Product Owner, share the potential issues and limits
• Relax and write the code

This document provides guidance on writing a first ExpressionEngine plugin. It outlines the basic steps, including naming conventions for the plugin file and class, adding plugin information and usage instructions, and how to integrate the plugin into templates. The document also briefly discusses porting plugins to ExpressionEngine 2.0 and some changes introduced in that version. The overall goal of the plugin discussed is to capitalize the first letter of each word in article titles.

ItalianSkin: an improvement in the accessibility of the Plone interface in or...

Vincenzo Barone

The Italian government has made a law specifying the accessibility requirements (the most famous is the usage of the Strict XHTML) for public administration websites. To enable Plone front- and back-end to be compliant with these specifications the ItalianSkin project was initiated, but its development has gone beyond the simple implementation of the law and has continued with the objectives of making Plone wholly functional with screen readers for blind people and providing developers with automatic tools to improve the accessibility of their own sites. We would recommend this talk to anyone developing websites and in particular to those who are responsible for accessibility.

Cordova 3.x

George McKinney

Cordova 3.x is a hybrid mobile app development framework that allows building apps that can run on multiple platforms including Android, iOS, and Windows Phone. Key differences between Cordova 2.x and 3.x include plugins no longer being included and changes to platforms. Cordova uses a command line interface to automate project setup and requires configuration files and packages.json. The config.xml file follows W3C widget standards and is important for native platform configuration. Developers can use IDEs like Eclipse or Xcode for native tools or cloud-based build services like PhoneGap Build.

Lennart Regebro What Zope Did Wrong (And What To Do Instead)

Vincenzo Barone

Zope did many things right originally by using Python and including batteries, but it had some downfalls like being unpythonic, having too many products instead of modules, and becoming too complicated over time. Zope 3 aimed to address these issues but ended up being too abstracted and complex itself. The document discusses potential ways to build on Zope's strengths while avoiding its weaknesses.

Web Development with Delphi and React - ITDevCon 2016

Marco Breveglieri

This document provides an overview of modern web development with Delphi and React. It discusses how traditional "fat" web applications are no longer preferred and introduces key concepts in modern web development like JavaScript, HTML5 APIs, DOM, jQuery, single page applications, and React. It explains what React is and core React concepts like components, properties, state, virtual DOM, JSX syntax and lifecycle methods. It also discusses how Delphi can be used to build backend APIs that a React front-end can communicate with.

Where's the source, Luke? : How to find and debug the code behind Plone

Vincenzo Barone

Plone, being a python based CMS written as a project for the Zope application server, consist almost entirely of python modules and a number of configuration files. Python source code is loved by many in the community for its explicit readablity; however, for many experienced software developers, coming over to the Plone technology stack can be a haunting experience. It seems everything is hidden away as pickled object in the ZODB, and that layers of magic prevent one from understanding how it works and how to affect change. This presentation will explain to the novice: - how to track down the python source behind Plone - how to take advantage of rich open source tools like ctags and pdb - best practices for getting started with file system product development

Visual Studio Productivity Tools

Robert MacLean

- The document discusses using Docker for local development of microservices. It outlines some of the problems with traditional development workflows, such as long setup times and dependencies between services. - It proposes using Docker to package each microservice into a container image for local development. This allows developers to quickly setup a consistent environment with all dependencies and have full working environments on their computers. - Docker Compose is recommended to define and run multi-container applications locally. Individual services can be built from local code or pulled from a registry. This allows each developer to have their own isolated environments to develop and test microservices.

'MICROFRONTENDS WITH REACT' by Liliia Karpenko

OdessaJS Conf

This document discusses microfrontends architecture. It begins by explaining why an organization may want to use a microfrontends approach, such as when different teams in different locations need to work on the same project simultaneously. It then discusses some of the downsides of a monorepo approach and when a monorepo may be preferable to microfrontends. The document outlines some of the challenges microfrontends can present and why they can also be a good choice. It provides examples of how to divide an app into microfrontends, such as by routes, features, or a combination, and options for using different frameworks within microfrontends like web components, module federation, and iframes. It concludes by discussing testing and development

Aspect oriented programming

Robert MacLean

This document discusses aspect-oriented programming (AOP) and how it can be implemented using PostSharp. AOP aims to make cross-cutting concerns like logging and error handling easier to implement separately from business logic. It describes how PostSharp uses IL weaving to modify code at compile time or JIT to add aspects without changing the original code. Alternatives to PostSharp include using the .NET profiler API or proxies, but IL weaving generally has better performance. The document also briefly outlines how AOP may be improved in future versions of C# compilers like Roslyn.

Real World AngularJS recipes: beyond TodoMVC

Carlo Bonamico

This document summarizes a presentation on best practices for developing real world applications with AngularJS. It discusses topics like modularizing the app using modules, organizing source code into features, writing small focused controllers, using services for collaboration between controllers, when to use directives, authentication and authorization, logging, packaging for different environments, and testing Angular apps. References and resources are also provided.

Phalcon overview

Adam Englander

The document introduces Adam Englander as a senior developer at LaunchKey and founder of startup companies who organizes developer user groups in Las Vegas. It describes Phalcon as a micro framework for building web applications with code written in C and an active open source ecosystem. Key features of Phalcon highlighted include code generators, caching options, flexibility to scale from micro to macro frameworks, extensive documentation and examples. Contact details are provided to ask Adam questions.

Learning to be IDE Free (PrDC 2015)

David Wesst

◦If you lost Eclipse, could you still produce quality code? If Visual Studio or IntelliJ don't provide you with a specific tool, are you still able to use it comfortably? If you're troubled by these questions, don't worry because you are not the only one! Over the years, developers tend to forget their roots and grow overly comfortable with their IDE. But, it's not the IDE that makes us developers, it's our mad coding skills and software knowledge! In this session David will bring you back to the days where a text editor was just a text editor, and command line was king and go through creating, building, deploying an application without an IDE.

Create a Bot with Delphi and Telegram - ITDevCon 2016

Marco Breveglieri

Bots are virtual assistants and they are able to send messages and notifications, live updates and news to any user and also answering commands and do tasks. With their simplicity and ease of use, they are gaining popularity among local administrations, private companies and other business activities. In this session you will see how to use bots and create a new one from scratch with Delphi leveraging the Telegram Bot platform APIs.

Matteo Vaccari - Going Frameworkless in the Backend - Codemotion Milan 2018

Codemotion

We developers are always looking for ways to be more productive. But what if I told you... that you could be way more productive without frameworks? A frameworkless (micro)service can take less time to write, can be just about as short and it will boot in under a second. And it's more fun!. All it takes is to know how: I'll show you the code (Java). And we'll say goodbye to the time spent on stack overflow, looking for framework answers: the answers will be in our own code. The techniques I show were tested in real projects, for real customers, with a tight deadline.

Fast Slim Correct: The History and Evolution of JavaScript.

John Dalziel

Wrangling Large Scale Frontend Web Applications

Ryan Roemer

Web applications are massively shifting to the frontend, thanks to exciting new JavaScript / CSS technologies, expanding browser capabilities (visualizations, real-time apps, etc.) and faster perceived user experiences. However, client web applications can be a nightmare to maintain at scale, even for seasoned software architects and operations engineers. Deployment and production infrastructures are complex and rapidly changing. And, frontend JavaScript / CSS code ships to browsers worldwide, where errors and issues are notoriously difficult to systematically detect and diagnose. In this talk, we will tackle the wild west of the frontend with pragmatic steps and seasoned advice from helping organizations from startups to Fortune 500 companies create some of the largest frontend web applications on the Internet. In particular, we will examine the many hard lessons gleaned from leading frontend application development and education for a team of 50+ engineers rearchitecting a top-five e-commerce site. Some of the topics we will cover include: * Managing and building very large (500K+ line) frontend application / test code bases. * Surviving production traffic and errors on the frontend and handling spikes like Black Friday / Cyber Monday for one of the highest traffic e-commerce websites in existence. * How, where, and why your frontend application is likely to fail. * Monitoring, logging, and debugging frontend web applications out in the wild. * Automating checks, tests, and code introspection to protect your code in production. * Creating an effective, fast, and engineer-friendly development-test-deployment frontend pipeline. Whether your frontend application already supports millions of transactions a day or you are about to launch your first single-page-application, our aim is to prepare teams of all sizes for the most critical challenges and solutions facing modern frontend web applications.

jQuery Chicago 2014 - Next-generation JavaScript Testing

Vlad Filippov

This document discusses next-generation JavaScript testing tools. It introduces The Intern, an open source framework for testing JavaScript code with both unit and functional tests. The Intern supports cross-browser testing, integrates with services like SauceLabs and BrowserStack, and can run tests across continuous integration systems. The presentation provides examples of using The Intern to test different applications and frameworks.

Creating and Maintaining an Open Source Library

Nicholas Schweitzer

You've got some awesome code that you've written, which you want to share with the community. Sure, you could simply post it on GitHub and be done with it, but is that the best way to share your work? What are the additional steps needed to share your code in a way that it will actually get used by the larger world? I'll discuss options for hosting , licensing, versioning, packaging, documenting, building, testing and even contributing to your code. All the things that will make someone else say - I want to use this!

Thadomal IEEE-HTML5-Workshop

Romin Irani

1. The document summarizes HTML5, including its history, key features like semantics, multimedia, forms, and offline capabilities. 2. HTML5 aims to simplify development with new semantic elements, easier form handling, and making audio/video native elements. 3. The geolocation API allows websites to detect a user's location with permission, and features like the app cache and local storage enable offline use of web apps.

The Open-source Eclipse Plugin for Force.com Development, Summer ‘14

Salesforce Developers

The document discusses the new open-source Eclipse plugin for Salesforce development. It describes the history of the original plugin and reasons for updating it, including using the Tooling API and open sourcing the code. Developers can now contribute changes by forking the project repository on GitHub and submitting pull requests. The document reviews the different available versions and outlines the process for testing changes locally and getting updates incorporated into the main branch.

5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)

David Wesst

“We need a mobile app. Make our website into a mobile app.” The request seems reasonable, doesn’t it? Your website is JavaScript, native apps are JavaScript, why wouldn’t you make your website into an application? In this presentation we’ll give you 5 reasons why your website shouldn’t end up as a native application to give you the tools you need to not only turn down the request, but on how to make a better solution.

Sally Kleinfeldt - Plone Application Development Patterns

Vincenzo Barone

In 2004 The Nature Conservancy adopted Plone as the platform for ConserveOnline.org, a community site for sharing conservation information. Since then, we have gained experience implementing several successful Plone intranet applications, made plenty of mistakes, and learned how to - and how not to - approach new Plone projects. This talk will compare our experiences developing two very different intranet Plone applications that manage conservation information. The first application has a complex data model with a relational database backend and makes minimal use of Archetypes. Its requirements - including data model and user interface - were rigidly specified based on a spreadsheet tool. The second application is Archetypes-based and was developed using UML modeling and ArchGenXML. It has a simple data model, uses the ZODB for storage, and its requirements were more loosely specified. From the lessons we learned on these projects, we have developed a set of application pattern definitions to guide us when choosing technologies and estimating costs. We think these pattern definitions can help managers, integrators, and people new to Plone understand when to use Plone, when not to use Plone, and how to structure their interactions with clients to ensure a successful Plone project.

ASP.NET 5 & Unit Testing

Shahed Chowdhuri

Blog post: wakeupandcode.com/asp-net-5-unit-testing Learn how you can build more robust web applications with automated unit testing! While there are plenty of resources for learning ASP.NET web application development, many developers are missing out on the knowledge and experience of implementing proper Unit Tests. As ASP.NET 5 gets ready for prime time, it's essential for all .NET developers to get an understanding of how to build Unit Tests for real-world applications in a cloud-first mobile-first world. This presentation material was put together for a live audience for my in-person presentations.

The ultimate cheat sheet on .net core, .net framework, and .net standard

Concetto Labs

Microservices with Swagger, Flask and Docker

Dhilipsiva DS

The document discusses Microservices with Swagger, Flask and Docker. It provides an overview of the OpenAPI Specification (formerly known as the Swagger Specification), which is a specification for machine-readable interface files for describing, producing, consuming, and visualizing RESTful web services. It then discusses using Swagger for API-first development and documentation and demonstrates building a sample API using Connexion with Swagger, Flask and Docker.

Stop making these mistakes when using react native to build apps

Moon Technolabs Pvt. Ltd.

React Native - Build Native Mobile App

Mobio Solutions

What's hot

JAVA J2EE Training in Coimbatore - Fundamentals of Java J2EE

abile technologies

Local development environment for micro services with docker

LINE Corporation

'MICROFRONTENDS WITH REACT' by Liliia Karpenko

OdessaJS Conf

Aspect oriented programming

Robert MacLean

Real World AngularJS recipes: beyond TodoMVC

Carlo Bonamico

Phalcon overview

Adam Englander

Learning to be IDE Free (PrDC 2015)

David Wesst

Create a Bot with Delphi and Telegram - ITDevCon 2016

Marco Breveglieri

Matteo Vaccari - Going Frameworkless in the Backend - Codemotion Milan 2018

Codemotion

Fast Slim Correct: The History and Evolution of JavaScript.

John Dalziel

Wrangling Large Scale Frontend Web Applications

Ryan Roemer

jQuery Chicago 2014 - Next-generation JavaScript Testing

Vlad Filippov

Creating and Maintaining an Open Source Library

Nicholas Schweitzer

Thadomal IEEE-HTML5-Workshop

Romin Irani

The Open-source Eclipse Plugin for Force.com Development, Summer ‘14

Salesforce Developers

5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)

David Wesst

Sally Kleinfeldt - Plone Application Development Patterns

Vincenzo Barone

ASP.NET 5 & Unit Testing

Shahed Chowdhuri

The ultimate cheat sheet on .net core, .net framework, and .net standard

Concetto Labs

Microservices with Swagger, Flask and Docker

Dhilipsiva DS

What's hot (20)

JAVA J2EE Training in Coimbatore - Fundamentals of Java J2EE

Local development environment for micro services with docker

'MICROFRONTENDS WITH REACT' by Liliia Karpenko

Aspect oriented programming

Real World AngularJS recipes: beyond TodoMVC

Phalcon overview

Learning to be IDE Free (PrDC 2015)

Create a Bot with Delphi and Telegram - ITDevCon 2016

Matteo Vaccari - Going Frameworkless in the Backend - Codemotion Milan 2018

Fast Slim Correct: The History and Evolution of JavaScript.

Wrangling Large Scale Frontend Web Applications

jQuery Chicago 2014 - Next-generation JavaScript Testing

Creating and Maintaining an Open Source Library

Thadomal IEEE-HTML5-Workshop

The Open-source Eclipse Plugin for Force.com Development, Summer ‘14

5 Reasons Why Your Website Is[n’t] a Native App (PrDC 2015)

Sally Kleinfeldt - Plone Application Development Patterns

ASP.NET 5 & Unit Testing

The ultimate cheat sheet on .net core, .net framework, and .net standard

Microservices with Swagger, Flask and Docker

Similar to Monorepo: React + React Native. React Alicante

Stop making these mistakes when using react native to build apps

Moon Technolabs Pvt. Ltd.

React Native - Build Native Mobile App

Mobio Solutions

9 reasons why programmers should learn react native

React Sharing

A React Native app is a real mobile app With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

Reactjs Vs React Native – Key Difference, Advantages, And Disadvantages

Andolasoft Inc

React Tech Salon

Chenguang 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.

An Introduction to ReactNative

Michał Taberski

Angular 2 vs React. What to chose in 2017?

TechMagic

Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...

GreeceJS

Cross platform technologies have changed considerably. Should you even write an app using one of them in 2018? What tooling, processes and best practices can’t you live without? Which problems will you face and how will you overcome them? How would you organize your team and project? Join us as we share valuable lessons from the last two years of engineering the Covve Ionic/Angular cross platform app.

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

Narola Infotech

Net, MVC 3+ years Experience

Madhava B

Madhava Battar has over 3 years of experience developing web applications using technologies like ASP.NET MVC, C#, AngularJS, and SQL Server. He has worked on projects in various domains including healthcare, travel, and business management. Currently employed as a Software Developer, Madhava is self-motivated and able to work independently as well as collaboratively on a team. He aims to further his career with a growing company focused on latest Microsoft technologies.

Enterprise ipad Development with notes

jaxarcsig

The document discusses some challenges and considerations for developing iPad applications for businesses. It notes that while the iPad is aimed at consumers, businesses are also starting to use it as a tool. However, developing software for the iPad brings its own challenges. The document outlines some key questions to ask to determine whether a native iOS application or HTML5 web application is the best approach. It also discusses platform requirements like needing a Mac computer to develop for iOS.

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

GreeceJS

React Native: Expectations vs Reality

Kaloyan Kosev

I had a chance to be part of a team that started developing a decent size React Native mobile app from scratch. As a developer with a solid React background, I had some expectations at first. During my initial research, everything sounded terrific: performance stats, ease of development, learn-once-use-everywhere, debugging tools, etc. But is everything terrific really? I'm excited to share my journey about how my expectations met the reality. I'll give my personal opinion about the matureness of the technology, for which use-cases it fits well and for which it doesn't. I'll also try to address the most popular misconceptions about React Native, which front-end developers usually have before they have the chance to actually built something.

l1-reactnativeintroduction-160816150540.pdf

Hương Trà Pé Xjnk

This document outlines the course details for ITS485 Lecture 1 on React Native Introduction. Key points include: - Grading will be based on quizzes, a term project, midterm exam and final exam. The term project involves building a mobile app in groups. - React Native is a JavaScript framework that allows building native iOS and Android mobile apps using React. It offers native experience and cross-platform code sharing. - How React Native works is by using the React virtual DOM approach and rendering native mobile components instead of HTML. It invokes native platforms asynchronously to not block the UI thread.

ReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages

Techtic Solutions

Here's an in-depth comparison of ReactJS vs React Native which will help you to understand the differences Advantages, Disadvantages. Meanwhile, Techtic Solutions is one of the top-notch ReactJS and React Native app Development Company with 10+ years of web development experience. Our teams of experienced ReactJS and React Native app developers are adept at building simple to the most complex website apps seamlessly. Get in touch if you are looking to hire ReactJS and React Native developers to deliver secure, high-performance, and faster web applications. Call us at +1 201.793.8324 or visit us https://www.techtic.com/react-native-app-development/

Getting Started with React Native (and should I use it at all?)

Devin Abbott

Advantages and Disadvantages of React Native App Development

APPNWEB Technologies

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

Kobkrit 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.

The Developers World

Ronald Northrip

An overview of the way developers approach problems, for Entrepreneurs, Managers & Designers, to facilitate discussion and understanding. Developers are  creative problem solvers who use words and logic to “model” stuff with objects, properties, methods, inheritance, composition, apis, and frameworks,  to build: web sites, web apps, mobile apps, and iot in a repository on a stack with tools and tests at scale for our users.

Meetup. Technologies Intro for Non-Tech People

IT Arena

This document provides an introduction to programming terminology, concepts, and technologies for non-technical people. It outlines a training on software development lifecycles, engagement models, business domains, major programming languages, frameworks, and technologies. Key terms from front-end and back-end development, databases, DevOps, data science, and mobile apps are defined. Popular languages, frameworks, and platforms are compared, along with ratings of language popularity. Quality control techniques are briefly introduced.

Similar to Monorepo: React + React Native. React Alicante (20)

Stop making these mistakes when using react native to build apps

React Native - Build Native Mobile App

9 reasons why programmers should learn react native

Reactjs Vs React Native – Key Difference, Advantages, And Disadvantages

React Tech Salon

An Introduction to ReactNative

Angular 2 vs React. What to chose in 2017?

Cross platform engineering - Lessons Learned (Michael Asimakopoulos, Valadis ...

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

Net, MVC 3+ years Experience

Enterprise ipad Development with notes

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

React Native: Expectations vs Reality

l1-reactnativeintroduction-160816150540.pdf

ReactJS Vs React Native: Understanding Differences, Advantages, Disadvantages

Getting Started with React Native (and should I use it at all?)

Advantages and Disadvantages of React Native App Development

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

The Developers World

Meetup. Technologies Intro for Non-Tech People

More from Eugene Zharkov

Create React Native App vs Expo vs Manually

Monorepo: React + React Native. React Alicante

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Monorepo: React + React Native. React Alicante

Similar to Monorepo: React + React Native. React Alicante (20)

More from Eugene Zharkov

More from Eugene Zharkov (20)

Recently uploaded

Recently uploaded (20)

Monorepo: React + React Native. React Alicante