Cross-platform development is a common practice in software engineering, allowing developers to build applications that run on multiple platforms from a single codebase. This approach is particularly beneficial in reducing the need to learn new technologies, write additional platform-specific code, and speed up the shipping process. In the context of app development, the goal is to port existing web apps to various platforms efficiently.
Games are a prime example of cross-platform development, where developers use tools to build games that run on multiple consoles and desktops. This strategy minimizes the need for separate codebases for each platform, making the development process more streamlined. Similarly, in app development, tools like Capacitor enable developers to bring web apps to native platforms, leveraging their existing web development skills.
The Evolution of Cross-Platform Tools
The journey of cross-platform development tools began with projects like Cordova, which pioneered the "write once, run anywhere" philosophy. Cordova provided a way for web developers to access native device features through JavaScript, allowing them to wrap web apps in a native runtime. Although it had limitations, such as dependency on Cordova for native features and the lack of a package manager, it laid the groundwork for future tools.
React Native emerged as a significant advancement, offering an abstraction that allowed developers to learn one API style and write for multiple platforms. It promised a truly native app experience by rendering UI elements on the fly. However, it required developers to learn new syntax and adapt existing web apps to fit into the React Native ecosystem, which could be frustrating for those familiar with web development.
Introducing Capacitor: A Modern Solution
Capacitor offers a fresh approach to cross-platform development by bridging the gap between native and web development. It allows developers to use their existing HTML, CSS, and JavaScript skills to create apps that run on web, iOS, and Android platforms. Capacitor operates as a native runtime and a JavaScript library, providing streamlined APIs to access native device features.
One of the key benefits of Capacitor is its ability to reuse existing web apps and third-party libraries. It supports multiple frameworks, including React, and allows developers to ship apps quickly without learning new syntax or development processes. By leveraging the best practices of native development, Capacitor ensures a seamless experience across different platforms.
Architectural Insights of Capacitor
Capacitor's architecture involves rendering web apps inside a native web view, an optimized version of a browser without UI elements. When a web app makes a call through Capacitor's API, the native web view captures it and communicates with the bridge layer. This bridge proxies requests to native features and returns the results to the web view, maintaining a consistent user experience across platforms.
This architecture is similar to React Native but with the flexibility of rendering custom UI. Developers can bring their design systems and UI libraries to a Capacitor project, ensuring a consistent look and feel between web and native apps. By allowing the reuse of existing web skills and third-party libraries, Capacitor streamlines the development process.
Getting Started with Capacitor
To start using Capacitor, developers can initialize a project and install the necessary dependencies. Capacitor's CLI manages the creation of native projects and dependencies, simplifying the setup process. Developers can then interact with native device features, such as geolocation, through Capacitor's streamlined APIs.
Setting up a Capacitor project involves configuring the project settings, including app ID, name, and web directory. Developers can customize native permissions and settings through configuration files, ensuring that the app functions correctly on iOS and Android platforms. Capacitor supports live reload, allowing developers to see changes instantly during development.
Leveraging Native Features with Capacitor
Capacitor provides access to various native device features through its API packages. For instance, the geolocation package allows developers to request and manage location data seamlessly across platforms. Capacitor ensures that developers can handle permissions and access native APIs efficiently, enhancing the app's functionality.
Developers can use Capacitor's API packages to integrate other native features, such as the camera, file system, and more. These packages simplify the process of accessing native capabilities, allowing developers to focus on building the app's core functionality without worrying about platform-specific implementations.
Real-World Application and Benefits
Using Capacitor, developers can create apps that run smoothly on web, iOS, and Android platforms, utilizing a single codebase. The development cycle becomes more efficient, as developers can leverage their existing web development skills and tools. Capacitor's architecture supports a faster development process by eliminating the need for platform-specific code and reducing the learning curve.
Capacitor also integrates with popular IDEs like Xcode and Android Studio, allowing developers to manage native projects and build processes effectively. By supporting a wide range of third-party plugins, Capacitor ensures that developers can access the necessary tools and features to build robust applications.
Conclusion
Capacitor is a powerful tool for developers looking to bring their web apps to native platforms. By utilizing existing web development skills and providing a streamlined approach to accessing native features, Capacitor simplifies the cross-platform development process. Its architecture and flexibility make it an excellent choice for developers seeking to create apps that perform well across multiple platforms without the need for extensive platform-specific code. With Capacitor, developers can focus on building feature-rich applications while maintaining a consistent user experience across web, iOS, and Android environments.
So, you have a killer React app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
This workshop is aimed at intermediate developers that have an existing React application, or are interested in mobile development with React. We will go over:
What is Capacitor
How does it compare to other cross-platform solutions
Using Capacitor to build a native application using your existing web code
Tidying up our application for distribution on mobile app stores with naming conventions, icons, splashscreens and more.
This workshop has been presented at React Summit 2022, check out the latest edition of this React Conference.
FAQ
Capacitor is used to transform web apps into native mobile apps. It allows web developers to use their existing web skills and libraries to create apps that run on multiple platforms like iOS and Android, utilizing native device features.
No, React Native libraries are generally not compatible with Capacitor directly because they are built specifically for the React Native environment, which differs architecturally from Capacitor's use of web technologies.
Yes, Capacitor provides a range of APIs that allow web apps to access native device features such as the camera, geolocation, and more. These are accessible through JavaScript, making it easier for web developers to integrate native functionality into their apps.
While Capacitor is powerful, it has limitations in handling highly intensive 3D graphics and some advanced native functionalities that might require direct native code implementations or specialized native frameworks like Unity for 3D games.
Capacitor allows developers to use a single codebase to build apps for both web and mobile platforms, reducing development time and costs. It also integrates seamlessly with modern JavaScript frameworks and tools, offering a more familiar development experience for web developers.
Yes, Capacitor supports live reload capabilities, which allows developers to see changes in real time on the device as they update their code. This feature enhances the development process by providing immediate feedback and speeding up the iteration cycle.
Yes, Capacitor is designed to be framework-agnostic, meaning it can be used with any web framework or library, such as React, Angular, or Vue. This flexibility allows developers to choose the tools and frameworks they are most comfortable with.
Capacitor and Cordova both allow web apps to interact with native device features. However, Capacitor is often seen as a modern successor to Cordova, offering improved performance and better integration with modern web development workflows, including support for popular frameworks like React.
To convert a web app to a native app using Capacitor, developers need to include the Capacitor core library in their project, configure native platforms like iOS and Android within the project, and use Capacitor's APIs to interact with native features and functionalities.
This workshop introduces bringing React web apps to native using Capacitor, a cross-platform development approach. Cordova and React Native are compared in terms of their features and limitations. Capacitor is highlighted as a solution that bridges the native development life cycle while allowing developers to write HTML, CSS, and JavaScript. The performance difference between Cordova and Capacitor is discussed, along with the process of installing and configuring platforms. The benefits of using Capacitor for development, including faster development cycles and easy deployment, are emphasized.
This workshop introduces bringing React web apps to native using Capacitor. Cross-platform development is a well-tested approach to building products. The goal is to reduce the need to learn new tools, write platform-specific code, and shorten the time to ship. Comparing technologies based on levels of abstraction makes more sense than point-for-point comparisons. The pure web development environment focuses on building responsive web experiences, while pure native is dedicated to building native apps for each platform. Cordova is a project that promotes the write once, run anywhere mantra.
2. Cordova and React Native
Cordova was created to expose native device features through JavaScript, allowing developers to wrap their web apps in a runtime and extend built-in web platform features. They built global APIs and objects for core plugins like the camera. However, using navigator tied everything to Cordova, making it less cross-platform. Cordova had a large ecosystem of plugins and shipped core APIs, but lacked a package manager. The goal was to polyfill the web until browsers added these features, but some are still missing. Cordova also avoided using native IDEs and had complex release scripts. Native projects were not committed to version control, causing permission issues. React Native aimed to provide a truly native app by building abstractions around native controls. The core team relied on the community to add features.
3. Building with React Native and Capacitor
When building a React Native app, it runs inside a JavaScript runtime, communicating through a bridge layer to access device features. The UI is rendered on the fly internally via React Native. However, learning a new syntax and the need to rewrite existing web apps can be frustrating. Additionally, third-party libraries that don't support React Native out-of-the-box cannot be used. The rendering in React Native is not truly native, as it still runs JavaScript and requires re-implementing native interactions. Capacitor, on the other hand, bridges the native development life cycle while allowing developers to write HTML, CSS, and JavaScript. It provides access to native device features through packages and streamlines APIs for iOS and Android. The architecture of Capacitor is similar to React Native, but with the ability to render the UI using a custom design system. Existing web apps and skills can be reused, and the runtime loads instantly, enabling immediate access to native APIs.
4. App Performance and Development Setup
The app starts up quickly and utilizes the best practices for native development. It can produce both a native app and a web app with mobile hardware OS features. Let's go to my terminal where I have a blank React app project. We'll focus on that for most of this.
5. Installing and Setting Up Capacitor
In this part, we install and set up Capacitor for our project. We uninstall the atcapacitor-core and atcapacitor-cli dependencies. Then, we initialize the project by running npx cap init. We configure the app name and package ID. We also explore the capacitor.config.ts file, which manages project dependencies. Lastly, we add a meta viewport tag to handle devices with notches and start accessing the geolocation native feature.
6. Installing and Setting Up Geolocation
To install the geolocation plugin, use npm install capacitor geolocation. In app.tsx, import the geolocation API from at capacitor geolocation and the core capacitor class from capacitor core. Create a useEffect hook with zero dependencies to manage permissions. Implement the request permission function to call geolocation.requestPermission. Handle unhandled promise rejections and check if the app is running on a native platform. Create a getLocation function using async/await and call geolocation.getCurrentPosition to get the location data.
7. Managing Location Data and Adding Native Platforms
We can get different return values like coordinates, timestamp, or cursor movement. We want to get the current position and display it in our app. We create state variables for date, location data, and set location data. The coordinates object provides latitude, longitude, accuracy, and altitude accuracy. Inside the paragraph tag, we render the location data as JSON. We manage the location permission through the browser instance using the adjust-in-time model. If permission is not allowed within a certain time, a rejected promise is returned. We add a native platform to show how it works, but assume it is already set up. We install the iOS and Android platforms using npm install. We skip the installation process and refer to the documentation for setting up the iOS and Android SDKs.
QnA
Performance Difference and Switching Projects
What is the performance difference between Cordova and Capacitor? Should I switch my project from Cordova to Capacitor?
Installing and Configuring Platforms
We install and add iOS and Android platforms separately to avoid installation issues. The build process involves running React scripts and producing JavaScript for iOS deployment. The web assets are synced to the native project using the native cocoa pods tool for iOS and Android libraries for Android. Opening the native Xcode workspace allows customization of app launch, background activity, and notifications. The main storyboard helps structure the app's UI. Running the app on a simulator deploys it to the iPhone 13 Pro simulator.
Running the App and Customizing Android
Xcode can be slow. We need to add native permission management to access privacy-sensitive data. Set the value for NSLocation when in use usage description. Rerun the app, allow location access, set the location to Apple Park. Trail of events: bloated the app, WebView loaded, geolocation request permission, got current position, location permission granted. Moving on to customizing the Android experience.
Setting Up Android Studio and Running the App
This section covers setting up Android Studio for Android development, including importing plugins and tasks, providing permissions, selecting devices, building the project, and running the app on an emulator or a real device. The emulator can be slow, so testing on a real device is recommended. The app runs automatically on web, iOS, and Android platforms. A question is also addressed regarding the storage of permissions in a config file.
Version Control and Permissions
Once a person sets up permissions in the native project, it gets included in version control. Changes made by one person can be pulled by others without resetting permissions. There is potential for improvement in adding permissions in different locations and setting them via the TypeScript API.
Benefits and Development Cycle
Capacitor offers a faster development cycle compared to React Native. Developers can start working in the browser, have access to APIs, and avoid the need to set up a React Native project or learn a new tool and syntax. Capacitor allows for easy deployment to the iOS simulator without having to open Xcode. It supports multiple native APIs through official and community plugins. Animations can be handled using libraries like Frame or Motion, or by building custom animations using JavaScript and the web animations API. The live reload feature in Capacitor enables a faster development cycle, especially when used with Ionic or React.
Development Setup and App Deployment
We can now develop our app and have the whole environment bound to our location data. This eliminates the need to constantly switch between the browser and the native device during development. The changes made in the simulator are updated in real time. The development cycle now feels more familiar to traditional web development. This setup is not limited to simulators; it can also be deployed to real devices. The Ionic extension in VS Code allows for various configurations and the generation of custom splash screens. It also provides a GUI for opening projects in Android Studio and Xcode, managing build numbers, and renaming the app. The app is automatically updated upon redeployment.
Running on Device and App Size
Running the app on a real device provides quicker on-device feedback. Emulating certain features in the browser may not accurately reflect the mobile experience. Deploying to a real device ensures optimal rendering and performance. While developing, using a Chrome browser can save time, but it's important to check the availability of specific features. The overall size of the generated app will be smaller than a pure native app and better optimized than other cross-platform solutions. The average size with native dependencies is around 80 megabytes or smaller. Many big companies, including Burger King, Blue Cross Blue Shield, BBC, IBM, and Target, are using this technology.
App Size, Limitations, and Resources
The overall app size can change based on the dependencies, web assets, and content included. Capacitor has limitations in handling 3D intensive graphics, but for most apps, it can handle glorified lists and scrollers. To learn more, visit the CapacitorJS website, the dedicated documentation, and the Capacitor Community GitHub organization for various plugins.
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up). Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too. Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step. (Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?
There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.
Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.
The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.
React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning? In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests. Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
This Talk is about interactive data visualization in React using the Plot library. Plot is a high-level library that simplifies the process of visualizing data by providing key concepts and defaults for layout decisions. It can be integrated with React using hooks like useRef and useEffect. Plot allows for customization and supports features like sorting and adding additional marks. The Talk also discusses accessibility concerns, SSR support, and compares Plot to other libraries like D3 and Vega-Lite.
Comments