Tutorials on React Native

Learn about React Native from fellow newline community members!

  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL
  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL

Evaluating Frameworks for Micro-Frontends: React, Angular, Vue, Svelte, Qwik

This article dives deep into the realm of micro-frontends, with a particular emphasis on the Qwik Framework. This article also explores why Qwik may be a superior choice for managing micro-frontends compared to its counterparts like React , Angular , Vue , and Svelte . Micro-frontends represent an innovative design approach where a frontend app is partitioned into small, independent, manageable units that operate cohesively. Each unit, known as a micro-frontend, is managed by a separate team, leading to highly efficient and scalable development processes for complex applications. Key characteristics of micro-frontends include: Before examining the specifics of Qwik , it's worth comparing it to other popular frameworks in the context of micro-frontends. While React boasts a robust ecosystem and a well-established community, it requires additional libraries and configurations for effective micro-frontend management. The hydration process can be resource-intensive, potentially slowing performance. Libraries like Module Federation from Webpack enables different React applications to share components and dependencies dynamically at runtime, facilitating the integration of multiple micro-frontends. Routing can be managed with libraries such as single-spa that allows for the coexistence and independent operation of multiple React apps on a single page, ensuring that each micro-frontend can function and be navigated independently. State management across micro-frontends can be tricky; tools like Redux with additional middleware or the newer Redux Toolkit can be configured to share states selectively or manage local states separately, maintaining data consistency and flow between micro-frontends. This setup often requires careful consideration of loading strategies, dependency sharing, and deployment configurations to ensure seamless integration and operation of micro-frontends in a larger application ecosystem. Despite Angular 's built-in tools for module separation and micro-frontend architecture, it can become complex with larger applications. Performance optimizations require significant effort. Angular is designed to support modularity through its built-in dependency injection system and hierarchical module architecture, which are advantageous for developing micro-frontends. However, as applications scale, managing these modules and ensuring efficient loading and execution can become complex. Angular’s performance in large applications can be bogged down by lengthy build times and slow boot-up times due to the size of the application bundle. To address this, developers often need to implement lazy loading of modules using Angular's Router, which allows parts of the application to be loaded on demand rather than at the initial load. Furthermore, ahead-of-time (AOT) compilation can be employed to pre-compile HTML templates and components into JavaScript at build time rather than at runtime, reducing the workload on the browser and improving performance. Additionally, tree-shaking, enabled through build tools like Webpack, helps eliminate unused code from final bundles, enhancing load times and runtime efficiency. Performance profiling tools such as Angular DevTools can also be used to identify performance bottlenecks, particularly in change detection cycles and rendering processes. These strategies collectively help in managing the complexity and optimizing the performance of large-scale Angular applications employing a micro-frontend architecture. Vue is lightweight and flexible with modular development support via Vue CLI. However, its built-in support for micro-frontends is limited, necessitating additional configurations and third-party libraries. Unlike frameworks specifically designed for micro-frontends, Vue does not inherently handle the isolation of styles, state management, and dependency management between multiple frontends. To address these limitations, developers often turn to third-party libraries like single-spa-vue , which provides the necessary infrastructure to integrate Vue applications into a micro-frontend environment by allowing them to coexist and remain independent within a single-parent application. Configurations involving module federation with Webpack can also be necessary, enabling different Vue projects to share components and libraries dynamically, reducing redundancy and improving load times. Additionally, state management across micro-frontends might require a more unified approach using Vuex or global event buses to ensure data consistency and communication across independently deployed Vue applications. These added layers of integration highlight the need for careful setup and management to leverage Vue effectively in micro-frontend architectures. Although Svelte compiles to minimal JavaScript for faster performance, its ecosystem for micro-frontend architecture is less mature compared to React or Angular . Svelte's ecosystem is less mature for micro-frontend architecture primarily because it is a newer framework compared to React or Angular, which have both been widely adopted and rigorously tested in various architectural setups, including micro-frontends. React and Angular benefit from extensive community support and a plethora of libraries and tools specifically designed to handle the complexities of micro-frontend implementations, such as module federation with Webpack in React and advanced module management in Angular. These frameworks offer robust solutions for isolation, scalable state management, and dynamic module loading, aspects critical to effective micro-frontend architecture. In contrast, Svelte, while offering a compelling approach by compiling down to minimal JavaScript, lacks a comprehensive set of tools and community-backed solutions specifically geared towards micro-frontends. This can make integration, inter-app communication, and the orchestration of multiple Svelte instances within a larger application more challenging, requiring more custom solutions or adaptations of existing tools not initially designed with Svelte in mind. The Qwik Framework shines in the micro-frontend landscape due to its strong emphasis on performance and scalability. There is also no need for an external library to implement MFE with Qwik. Here's why Qwik stands out for managing micro-frontends: In conclusion, Qwik's architecture, with its focus on resumability, fine-grained lazy loading, and minimal JavaScript execution, is exceptionally suited for building micro-frontends. Each micro-frontend created with Qwik is fast, efficient, and easy to integrate into a larger application. For those keen on diving deeper into Qwik , consider the Complete Guide to Qwik Framework available on \newline or Amazon. This comprehensive guide covers all the crucial APIs in Qwik and provides practical examples of creating an e-commerce application with Supabase .

Qwik SEO Performance: Why It May Outshine React, Angular, Vue, and Svelte

SEO is a critical element for any online platform's success. As SEO gained momentum, web development technologies like React , Angular , Vue , and Svelte had to integrate SEO into their core structure. However, there is a technology designed from scratch to incorporate SEO principles into its core structure — Qwik . This article will explore how Qwik promises superior SEO performance compared to other popular web development technologies. React enjoys widespread use, but it requires additional libraries and configurations like Next.js for Server-Side Rendering (SSR) and Static Site Generation (SSG) to achieve optimal SEO performance. Moreover, its hydration process can be resource-intensive, affecting load times. Angular without a doubt has impressive SEO capabilities with Angular Universal for SSR. However, managing performance optimizations for SEO can become complex due to the intricacy of Angular applications. Angular primarily renders content client-side, which means that when search engines crawl these applications, they often encounter minimal pre-rendered content, leading to potential indexing issues. This is because search engine crawlers typically expect content to be immediately available in the HTML when they fetch a page, but Angular's reliance on JavaScript to build and render its components can delay the content visibility to crawlers until scripts are fully executed. Additionally, managing navigation and URLs in Angular SPAs can be tricky as they use the # symbol by default for routing, which isn't SEO-friendly at all. Although Angular Universal offers server-side rendering (SSR) to address these issues by pre-rendering pages on the server itself, setting it up involves additional complexity and requires careful configuration in order to make sure that dynamic content is rendered correctly for search engines. Utilizing Nuxt.js , Vue offers robust SEO support through SSR and SSG. However, similar to React , it requires additional tools and configurations for peak SEO performance. Configuring Nuxt.js to automatically generate meta tags and link elements using its head method in Vue components is crucial for enhancing SEO by providing search engines with relevant metadata. Additionally, the use of nuxt-sitemap module to automatically generate sitemaps and nuxt-robots module to manage robots.txt files further optimizes the visibility to search engine crawlers. For content-heavy sites, implementing the nuxt-lazy-load plugin can improve page load times by delaying the loading of images and other heavy assets until they are in or near the viewport. This results in an enhanced Core Web Vitals score — a key metric in Google's SEO rankings. Lastly, setting up proper redirects and configuring canonical URLs directly within Nuxt.js ensures that search engines index the pages correctly, avoiding duplicate content issues that could negatively impact SEO performance. Svelte and its companion Sapper (or SvelteKit ) provide excellent SEO capabilities with SSR and SSG. Yet, Qwik's unique lazy loading and resumability approach offers even more room for performance optimization. Qwik introduces resumability, allowing the framework to serialize the application state on the server and resume it on the client. This decreases the need for re-rendering, improving performance, and faster load times — vital for SEO. Qwik uses fine-grained lazy loading, loading only the minimal JavaScript required for initial page rendering and interaction. This significantly reduces Time to Interactive (TTI) and First Input Delay (FID)—key metrics for SEO. Qwik supports both SSG and SSR, ensuring web pages are fully rendered server-side, and providing search engines with fully formed HTML content. This boosts SEO by enhancing crawlability and indexing. Qwik pre-renders pages automatically, ensuring even dynamic pages are available to search engines in a static format. This results in quicker load times and improved SEO. Qwik optimizes hydration by hydrating only the parts of the page that need to be interactive, reducing overall load time and enhancing user experience. The architecture of Qwik supports the development of micro-frontends, enabling developers to build modular, independently deployable components. This modularity ensures only necessary components are loaded, leading to better performance and SEO. Qwik provides a robust routing system that supports dynamic and static routes easily. It ensures URLs are SEO-friendly and the site's structure is easily crawlable by search engines. Qwik is a potent web development technology with a strong focus on SEO. Its unique features like resumability, fine-grained lazy loading, and automatic pre-rendering make it a promising tool for developers aiming to optimize their site's search engine performance. There's much to understand about Qwik and its SEO advantages. To help you better grasp this technology, I have developed a comprehensive guide as a core Qwik team member. The Complete Guide to Qwik Framework will walk you through the major and minor technical aspects of Qwik , offer insights from seasoned developers, and demonstrate how to deploy a real-world application using Qwik .

I got a job offer, thanks in a big part to your teaching. They sent a test as part of the interview process, and this was a huge help to implement my own Node server.

This has been a really good investment!

Advance your career with newline Pro.

Only $30 per month for unlimited access to over 60+ books, guides and courses!

Learn More

Create a React Native Login

Here's a new YouTube tutorial for quickly getting started developing mobile apps with React Native . React Native helps you start developing Android and iOS apps without wasting any time learning the native programming languages for those platforms. The challenge is that many project examples assume a lot of knowledge and take plenty of time to work through. This tutorial helps complete beginners dive right in and start building an actual practical, featureful, React Native app. This tutorial is taught by my friend and newline instructor Tony Przybyl. Tony is a software engineer focused on React and React Native. He comes from a fullstack background and is the creator of the open source React Native libraries NativeForms , ReactNative Market , NativeSlides , and React Riddle . In the tutorial, Tony starts you from absolute basics and teaches you the fundamental React Native skills you will need to start developing your own ambitious apps. The tutorial will show you: If you want to learn more React Native concepts and techniques, you can take a look at Tony's full course: The newline Guide to Creating a React Native Login . The course simplifies learning React Native by hyper focusing on an end to end project that is simple enough for beginners yet teaches all the fundamentals so you can create production-ready React Native apps of your own.

Thumbnail Image of Tutorial Create a React Native Login

Building a Smooth Image Carousel with FlatList in React Native

Have you ever noticed how often image (and card) carousels appear within mobile applications? Carousels consolidate items within a single horizontally rotating widget. Users can scroll through items by dragging across right or left to preview subsequent or previous items. Displaying items this way preserves vertical screen real estate, and therefore, allows users to have quicker access to the bottom of the view without scrolling down endlessly. React Native comes with several built-in components, such as <FlatList /> and <ScrollView /> , that can be used to quickly implement an image carousel. Unlike ScrollView /> , <FlatList /> renders child components lazily. Since <FlatList /> only stores in memory the items that are about to appear (and removes from memory the items that disappear offscreen), this results in better performance from reduced memory consumption and processing resources. Below, I'm going to show you how to build an image carousel with React Native's <FlatList /> core component. Users will be able to scroll through the items by dragging along the items: Or by clicking an arrow button to move to the next or previous item: To get started, initialize a new React Native project using the TypeScript template : At the root of the project directory, create two new directories: Delete the contents of the App.tsx file, and replace it with the following: ( App.tsx ) The image carousel will showcase six high-quality Unsplash images of various flowers. At a minimum, each item of the carousel must have a unique ID ( id ), a URI to its corresponding image's location ( uri ) and a title for labeling the image ( title ). To enforce these properties, create a definition file to globally expose the ImageCarouselItem interface. ( types/index.d.ts ) Note : Inside of the tsconfig.json file, set the typeRoots compiler option to ["./types"] . Create a new file named ImageCarousel.tsx under the src/components directory: Inside of the src/components/IamgeCarousel.tsx file, define a new functional component named ImageCarousel that accepts the prop data : ( src/components/ImageCarousel.tsx ) data contains the items that will be rendered by the <FlatList /> component. The <FlatList /> component provides a virtualized list that is highly customizable via its many props. Coincidentally, it inherits most of these props from the <ScrollView /> component. At a minimum, the <FlatList /> component requires two props: Let's render a simple horizontal carousel using the least number of props possible. ( src/components/ImageCarousel.tsx ) Each item follows the same layout: a square-shaped cover image with its title overlaid above and positioned at the lower-right corner. Specify the horizontal prop to tell the <FlatList /> component to arrange the items horizontally rather than vertically. Hide the horizontal scroll indicator, and set a keyExtractor function to tell the <FlatList /> component which item property (or set of properties) it can use to track each item for caching and re-ordering purposes. Adjacent items are spaced away from each other by 30px (for each item, 15px of left- and right-margining). If you save these changes and run the React Native project inside of an iOS simulator, then you will see a basic image carousel: In fact, you can scroll through these items by horizontally dragging along them. Let's modify the carousel to snap items in place and translate an item upwards when it approaches the middle of the screen and downwards when it moves towards either edge of the screen. Currently, when the carousel loads the items, the first item begins at the far left end of the screen, not the middle. When you scroll all the way to the last item in the carousel, the last item ends at the far right end of the screen, not the middle. We're going to need two placeholder items, one at the beginning and another at the end of the carousel, to help position the first and last items in the middle of the screen when reaching either end of the carousel. ( src/components/ImageCarousel.tsx ) As we scroll through the items, the item approaching the middle of the screen should be translated upwards to put it front and center as the current item being visited. Inside of renderItem , define an interpolation that maps an item's x-position to its y-translation. ( src/components/ImageCarousel.tsx ) An item appears to move upwards when its y-translation ( CURRENT_ITEM_TRANSLATE_Y ) is smaller compared to other items' y-translations ( CURRENT_ITEM_TRANSLATE_Y * 2 ). This item ( (index - 1) * ITEM_LENGTH ) happens to be the one that appears in the middle of the screen, not the edges. clamp restricts the extrapolation to only within the boundaries of the specific range. For items to snap into place at the end of a scroll action, specify these additional props on the <FlatList /> component. ( src/components/ImageCarousel.tsx ) Putting it altogether... ( src/components/ImageCarousel.tsx ) Reload the application to preview the smooth animations! Let's introduce arrow controls to give users an alternative way to explore the carousel's items. The <FlatList /> component's reference comes with a scrollToIndex method, which tells the component which item in the carousel to scroll to based on the specified index. All we need to do is track the index of the item currently in the view. Increment it when we scroll right and decrement it when we scroll left. To figure out which item is currently in the view, we need to specify these two props on the <FlatList /> component: ( src/components/ImageCarousel.tsx ) For an item to be considered as currently in the view, it must be 100% visible to the user (no part of it hidden off screen). onViewableItemsChanged calls a handler function whenever the items currently in the view have changed and tells us which items are now 100% visible in the view (based on the visibility percent threshold). We'll track the current index via a React ref since we don't need to re-render the component whenever this index changes. ( src/components/ImageCarousel.tsx ) Define the handleOnViewableItemsChanged handler function. This function checks for the item currently in view and sets the ref's value to this item's index value. ( src/components/ImageCarousel.tsx ) Note : The placeholder items are technically 100% in the view when the user moves to the first or last item in the carousel. Therefore, we need to filter out those placeholder items. Note : Wrap the handleOnViewableItemsChanged function in a useCallback hook to avoid the following issue: Now, let's create the arrow controls. Add two flag variables, isNextDisabled and isPrevDisabled , to check whether or not the arrow controls should be disabled or not. For instance, the previous arrow control should be disabled when the current item is the first item in the carousel, and the next arrow control should be disabled when the current item is the last item in the carousel. ( src/components/ImageCarousel.tsx ) Obtain a reference to the <FlatList /> component to access the scrollToIndex method: ( src/components/ImageCarousel.tsx ) Implement the controls' functionality and style them: ( src/components/ImageCarousel.tsx ) For a consistent scrolling motion between adjacent items via the scrollToIndex method, specify the getItemLayout prop on the <FlatList /> component. Since we already know the fixed dimensions of the carousel's items, we should let the <FlatList /> component know these dimensions so that it doesn't need to dynamically measure the items' dimensions and have scrollToIndex always scroll to a target item correctly. ( src/components/ImageCarousel.tsx ) Altogether... ( src/components/ImageCarousel.tsx ) Reload the application. Here's how the carousel should look and behave: For the final version of this project, click this link for the GitHub repository. Try implementing your own image carousel with React Native's <FlatList /> component. For more about building apps with React Native, check out our new course The newline Guide to React Native for JavaScript Developer .