If you are working on a web or mobile project and cannot decide between React.js and Angular, the below comparison can help you decide.

Some may think that it is not possible to compare React to Angular because Angular is a full-stack MVC framework, whereas React is merely a view library. But it is not so.

Comparing them is a smart idea, though, because they are both capable of producing fantastic apps and are ideal technologies.  Here we will compare the two most popular javascript Frontend frameworks for supporting one of the most demanding digital business goals.

REACT.JS

React.js is a free and open-source JavaScript toolkit for creating fast and appealing user interfaces. It combines ease of development (due to small chunks of code known as “components”) with a heavy emphasis on user experience. Since React is the View layer of the MVC architecture, you have practically complete control over the Model and Controller frameworks you use.

ANGULAR

Angular is a Google-created open-source framework for developing web applications. Angular uses TypeScript rather than JavaScript. Angular, unlike React, is a full-featured MVC framework, so you will not need any other solutions after you have mastered it.

COMPARISON OF REACT AND ANGULAR

View library vs. full-stack framework

Some argue that comparing React JS with Angular is not a good idea because they are both slightly different things, as explained at the outset. But, if both can create fantastic apps, does it really matter?

Angular appears to be a better alternative because it is a full-stack MVC framework that does not require any other libraries. React JS, on the other hand, does require additional libraries, but whether this is a plus or a negative depends entirely on your project goals.

React, being an independent view library, allows you almost limitless choices when it comes to creating user experiences, and you can also be fairly selective about the libraries you employ.

Data binding

Two-way data bindings are used in Angular. When you use two-way data binding, your model state automatically switches when you modify any element of the interface.

React employs one-way data binding, which means that the interface model is updated only after the model state has been updated. The model state remains unchanged while the UI components are changed.

One-way data binding allows React developers to have more freedom and control over their mobile and web apps because the data flow is unidirectional.

Server Rendering 

Angular makes web developers’ lives easier by providing pleasant and searchable static versions of the application. Angular renders an application using server-side rendering by creating a static view before it becomes fully interactive. It is up to you to figure out how to combine JSON with client-side caching to boost server speed. When it comes to decreasing traffic between the client and the server, nothing beats Angular.

Angular is built on a testing framework that includes features like dependency injection and mocking objects. We cannot distrust Angular’s future advances because it has Google as a backup. It can also reduce code size by eliminating the need for recompilation and reflecting modifications in the front-end more quickly.

Mobile App Development

With React Native and React JS, you can create genuinely native and cross-platform mobile apps. While React Native has a somewhat different syntax than React, it is pretty simple to pick up if you have worked with React before. Otherwise, you can hire a ReactJS developer who is aware that React Native allows components to be generated and bound in Java, Objective-C, or Swift code.

The Angular framework, on the other hand, makes use of Ionic, a platform that allows developers to create high-performance cross-platform mobile apps with a single codebase. Ionic applications can be utilized on any device, including the web. This open-source framework offers developers user-friendly tools as well as powerful services. It also comes with a large library and building pieces that make development much easier.

If both programs are well-written, the performance difference between them will be difficult to discern.

Self-Sufficiency

Since React is a UI framework, apps created with it require the use of extra libraries. Redux, React Router, and Helmet, for example, optimize state management, routing, and API interaction. Additional modules or libraries are required to perform services such as data binding, project generation, component-based routing, form validation, and dependency injection.

Angular is a full-featured software development framework that rarely requires the use of third-party libraries. Data binding, project generation,  component-based routing, form validation, and dependency injection are all functions that may be implemented using the Angular package.

Learning curve 

React is a simple framework with no dependency injection, traditional templates, or overly complex functionality. If you’re familiar with JavaScript, the framework will be simple to grasp.

Since there is no predetermined project structure, learning how to build up a project takes time. You’ll also need to master the Redux library, which is used for state management in more than 50% of React applications. Continuous framework changes necessitate additional developer effort. Furthermore, there are many best practices in React that you will need to master in order to accomplish things correctly.

Since Angular has such a large library, understanding all of the ideas related to it will take much longer than learning React. Angular is more difficult to grasp, with a lot of superfluous syntaxes and complicated component management. Some complex features are built into the framework’s core, so developers will have to understand and use them. Furthermore, a single problem can be solved in a variety of ways.

Although TypeScript is similar to JavaScript, it takes some time to master. Since the framework is regularly updated, the developer must devote more learning time.

Popularity

In the programming community and discussion forums, both Angular and React have gained popularity. According to statistics from the most popular platform, Angular has 56,586 stars whereas Reactjs has 142,606 stars.

In contrast to the full-fledged Angular framework, React is just a library. While comparing with the library framework Reactjs, however, Angular consistently received a high average number of stars. It is because of the early release of React, it has a higher number of stars.

Templates 

With Angular directives, HTML Angular employs templates based on an extended form of HTML. The syntax of those directives is complicated and advanced, so you will have to start from the beginning.

All you need to know about React is JavaScript. A JSX is a brilliant component that combines markup and JavaScript logic in one file. You may write your markup in your JavaScript code, thanks to the use of an XML-like language, which keeps everything in one place and improves code completion.

Testing

Jest is used by React (often in conjunction with Enzyme, a JavaScript testing tool). Jest is a robust mocking library that requires no configuration and comes standard with every React project. However, lately, react-testing-library is more often used.

The Angular CLI downloads all of the tools you will need to run tests with the Jasmine framework. Although Angular includes numerous capabilities, such as unit isolation and was designed with testability in mind, many Angular developers find Jasmine’s output to be difficult to comprehend.

Conclusion on Angular Vs React:2022

There is as such no more appropriate framework. To stay competitive, both are constantly updated. For example, while React was thought to win due to its virtual DOM, Angular tied the score thanks to changing detection. While Angular was thought to be the winner because it was created by Google, the enormous and dedicated React community more than made up for Google’s fame and made React comparable to Angular.

Guest Author: Harikrishna Kundariya 

The post Angular Vs React: Which Javascript Framework Wins in 2022 appeared first on asap developers.

React makes it easy to create a fast user interface without putting a lot of effort into optimizing performance. However, there are some ways in which you can improve the performance of apps created with React. This is what we’ll be focusing on in this article, with tips on improving React performance. But first, let’s give you some context.

About React

Just to give you a quick intro, React (or ReactJS) is a JavaScript library to build UI interfaces on the web. React modifies the browser DOM using a browser-independent DOM system for performance and cross-browser compatibility, which means you can use the same HTML tags you use on the web. React is declarative, component-based, flexible and easy to learn. If you want more information about React and how it differs from React Native, you can take a look at our article on this topic.

8 tips for improving React performance

1. Use function/stateless components and React.PureComponent

Function components and PureComponent are two ways of optimizing React apps at a component level. The former prevents constructing class instances and reduces overall bundle sizes. As for the latter, when optimizing UI updates, you might want to convert function components to a PureComponent Class.

Do note, however, that when using React.PureComponent you should make sure that all its child components are either Pure or functional components, that Component State/Props are an immutable object, and that State/Props do not include a multi-level nested object.

2. Memoize React components

Memoization is a long-standing optimization technique typically used to speed up computer programs. Through memoization, the results of expensive function calls are stored and the cached results are returned whenever the same inputs reoccur. You can learn more about this technique in this article.

Using memoized functions makes your app run faster because, when a function with the same values as the previous one is called, it retrieves the result from the cache instead of executing function logic. This is a great way of improving React performance.

This link might come in handy when it comes to memoizing React components.

3. Avoid using an index as key when mapping arrays

Most React developers have, at some time, run into an “Each child in a list should have a unique ‘key’ prop” warning. However, if you go the lazy route and use the index as key, this can show incorrect data to your app since it is used to identify DOM elements, thereby negatively impacting app performance. If you use the same key when pushing or removing an item from the list, React simply assumes that the DOM element represents the same component. This is why it is advisable to use a unique property as key. If your data doesn’t have unique attributes, you may use the shortid module to generate a unique key. You can find more info on this topic here.

4. Avoid passing unnecessary props when using the spread operator

Let’s face it, passing props to JSX elements using the spread operation can be extremely convenient. However, there are dangers to overusing it and even React’s documentation suggests “using it sparingly”. Namely, if you’re not careful, you might end up passing unnecessary properties to your components or even invalid ones to the HTML in your DOM. 

5. Virtualize long lists

Rendering a large table or list of data often slows down app performance. This is when virtualization (also known as windowing) comes in handy. This technique only renders a subset of rows at any moment, dramatically reducing component re-rendering time. You can use libraries such as react-window or react-virtualized to find reusable components for displaying lists, grids and tabular data.

6. Use multiple chunk files

An app always begins with a few components. But as soon as you start adding features and dependencies, you can end up with a gigantic production file without even realizing it. A way to avoid this is to turn this into two separate files by separating your vendor, or third-party library code, from your app code using the CommonsChunkPlugin for webpack. This will give you a vendor.bundle.js file and an app.bundle.js file. Splitting your files means your browser caches less often and parallel downloads resources thereby reducing load time wait.

7. Using immutable data structures

Data immutability is an opinionated way of writing code that forces you to reflect on how you structure your app’s data flow. It stems from the functional programming world and can be applied to designing front-end apps. The benefits of data immutability include zero side effects; the fact that immutable data objects are easier to create, test and use; and that they make it easier to track changes.

Some of the optimized libraries that include a set of immutable data structures are Immutability Helper, Seamless Immutable and Immutable.js. Also, if you want to learn more about using immutability with ReactJS, you can find more information here.

8. Dependency optimization

Something else to keep in mind when improving React performance is dependency optimization. When you wish to optimize the application bundle size, you should definitely check how much code you are using from dependencies. If you are using Moment.js to include localized files for multi-language support, for example, you can use the moment-locales-webpack-plugin to remove any unused locales. You can find a comprehensive list of optimizable dependencies here. 

Final thoughts on improving react performance

There are definitely many little ways in which you can boost your web app’s performance. We have chosen our top 8 tips for improving React performance, and we hope they will serve you as well as they serve us!

The post Tips for improving React performance appeared first on asap developers.

The post React Navigation appeared first on asap developers.

Testing is an essential part of any development process and there are countless tools available depending on what you are looking to test. In this article, we’ll focus on the React Testing Library and cover what it is, as well as why and how to use it.

What is React Testing Library?

The React Testing Library is a library built as part of an open-source project named Testing Library. It is part of a family of packages named @testing-library that provides guidance to test UI components in a user-centric way.

Just as React Testing Library has its own package, there are specific ones for other frameworks, including React Native, Angular, and Vue. All of these have been built on top of DOM Testing Library, the so-called “core library”, by adding a specific ergonomic API for each framework. 

Here, we will focus on the React package, since it is the most popular among its GitHub pinned repositories. 

Why should you use it? 

Testing Library relies on the belief that “The more your tests resemble the way your software is used, the more confidence they can give you.” 

In other words, this light-weight library produces tests that use components closer to the way a user would, giving the developer more confidence that their application will work when it goes out to real users.

End users don’t care what happens behind the scenes, they just see and interact with the output. So, instead of getting hung up writing code that tests a component’s internal API, props or state, you should be writing tests that verify it works properly from a user’s perspective, regardless of how it’s implemented.

Last but not least, this way of testing makes tests more maintainable, since code refactors won’t break them. 

How to use React Testing Library  

We’ll be taking a high-level view at this library, just to get you started from scratch. It is far from being a full library explanation, so here is a complete and detailed guide recommended by the official docs in case you want to take a deeper look.

Note: this example was developed using create-react-app, functional components, react version 17.0.1 and version 11.2.2 of @testing-library/react.

The latest create-react-app setups already come with @testing-library/react installed. If this is not the case for the version you’re working with, start by adding the following package to the project:

npm install --save-dev @testing-library/react

React Testing Library works along with Jest. When running npm test, all files with a .test.js suffix will be recognized by the Jest test runner. So, an example for our test file would be App.test.js. Create an App.test.js file if it has not been included yet with create-react-app. In this example, the files’ content looked like this: 

App.js

Link: script

App.test.js

Link: script

This example has a single test suite, renders learn react link, with just one assertion: expect. It uses the render function to render a React component and then queries the UI to verify if a text that matches the regular expression has been rendered.

After running all tests with npm test, it passes successfully:

Let’s modify the App.js file to add a button and then fire an event on the App.test.js in a different test suite. To do so, the fireEvent function will be used like this:

App.js

Link: script

App.test.js

Link: script

What we’ve done here is simulate a user’s behavior, checking what happened in the application UI after that event. After executing npm test, it passes again.

There are more ways to test your application using this library; only the basics were shown in this example. Because of how this library works, rather than dealing with instances of rendered React components, tests will work with actual DOM nodes. Ultimately, you are using JavaScript but with a React output.

Bonus: Why not use Enzyme?

According to the official docs, the React Testing Library is suggested as a replacement for another well-known testing library: Enzyme.  This is because Enzyme fosters some bad testing practices, encouraging developers to test implementation like we mentioned above. Here is an article written by the React Testing Library founder delving into why you should not test implementation details, and here is an official guide explaining how to migrate from Enzyme to the React Testing Library.

Final thoughts on React Testing Library

Without a doubt, we fully recommend this library because of its primary purpose: giving the developer confidence by testing components in the way a user would use them. Give this library a try if you have the chance. If you prefer a different framework, you can use one of the other libraries offered by the Testing Library project. You won’t regret it!

The post React Testing Library appeared first on asap developers.

Designed by Brendan Eich’s Netscape back in 1995, JavaScript is among the most popular programming languages to date and is used by the majority of developers as of 2020. This is no surprise as it is versatile, easy to learn, and can be used for both frontend and backend development. As you might expect from JavaScript’s popularity, there are many frameworks to choose from when it comes to developing in this language. In this article, we’ll cover some of the most popular JavaScript frontend frameworks.

⦁ React.js

React.js is actually a JavaScript library used to build UI interfaces on the web. It was created by Jordan Walke and a group of Facebook engineers and launched in 2013. It is considered the most influential JavaScript-based web framework as it introduced many new concepts, such as declarative programming and immutable state. It also introduced the Virtual DOM, which improved user experience and performance. In addition to frontend web development, it is often paired with Electron for desktop apps and with Node.js for backend development, and it is also the heart of React Native, a popular framework for mobile app development.
React.js is component-based, declarative and open-source, and has many benefits including outstanding SEO support, one-way data flow, reusable components, easy integration and simple syntax.

This library is used by some of the world’s largest companies, such as Netflix, Twitter and Facebook. React.js is also one of the most popular and loved JavaScript frontend frameworks by developers, as evidenced by Stack Overflow’s 2020 survey and The State of JavaScript. This means it has a large community behind it that is constantly contributing countless learning resources.

⦁ Angular.js

This open-source framework was launched by Google in 2010 and was one of the earliest JavaScript frontend frameworks to hit the market. Back then, Angular.js was far from perfect, so it had to be completely redesigned. This led to a much more successful re-release in 2016.
The framework is used to create single-page web apps and is known for being extremely secure. It should not be confused with Angular: while Angular.js is JavaScript-based and uses directives, Angular is TypeScript and component-based.

Other Angular.js features include DOM sanitization, UI view templates, the fact it’s cross-platform (used for PWAs, native and desktop apps), and the possibility to create accessible applications.
Microsoft, Forbes and, of course, Google, are among the big shots that use it for their websites.

⦁ Vue.js

Vue.js is a more recent frontend JavaScript framework, released in 2014. However, it has managed to make quite an impression: it ranks in third place when it comes to the most loved web frameworks and, according to The State of JavaScript, most developers have either used it and would continue to do so or have heard of it and are interested in using it. It is also one of the few frameworks available that is not backed by a tech giant (it was developed by former Google engineer Evan You). It was conceived as a combination of the best parts of React and Angular.js and has improved on those features.

Vue.js uses Virtual DOM, includes HTML-based templates and offers PWA development as well as two-way data binding. Moreover, the framework is versatile, performant, lightweight and open-source.
Companies such as Apple, Adobe and Nintendo are among those that have adopted this frontend framework.

⦁ Embers.js

Ember.js was created by Apple’s Yehuda Katz in 2011 and launched in 2012. This end-to-end, opinionated and open-source framework is based on the Model—View—ViewModel (MVVM) architecture and supports two-way data binding. It also focuses on convention over configuration and offers a debugging tool called Ember Inspector.

Other features of Ember.js include a data access library called Ember Data, built-in testing and a comprehensive ecosystem with ease of integration for third-party node modules (called Addons)
Although usage of this framework is not that widespread, as of 2019, there was a large number of developers that were interested in using this framework. Some of the companies that support Ember.js include Netflix, Microsoft and LinkedIn.

⦁ Svelte.js

Launched in 2016 by former Guardian developer Rich Harris, Svelte.js is the most recent JavaScript frontend framework in our list. It is open-source, component-based and written in TypeScript. At the time of its launch, Svelte.js was considered revolutionary as it has no virtual DOM: components are built boilerplate-free and then the Svelte Compiler compiles framework-specific code to HTML, CSS and JavaScript and renders it to the browser.

Other features include client and server-side rendering, great SEO support and cross-platform mobile development. It also has a growing community of contributors committed to making the framework grow.
Svelte.js has made a great impression during its short lifespan, ranking in second place when it comes to awareness, interest and satisfaction according to The State of JavaScript. Some of the companies that use Svelte.js include the New York Times and GoDaddy.

Bonus: Meteor

In contrast with the rest of the frameworks in this article, Meteor is actually full-stack, so we’ve added it as a bonus to this list. It was developed in 2012 and based on Node.js. Meteor is not merely a framework but an isomorphic development ecosystem (IDevE). Moreover, it is cross-platform and can be used to create mobile and desktop apps, in addition to web development. When it comes to frontend, it includes its very own template engine and also has integrations for React.js, Vue.js, Angular and Svelte.js, among other frontend networks.
Companies that use Meteor include Ikea, Mazda and Dispatch.

Final thoughts on Top 5 JavaScript frontend frameworks

As the most commonly used programming language, it is no surprise that JavaScript has garnered countless tools over the last 25 years. Developers definitely have their choice of frontend frameworks when it comes to JavaScript development, all of them with unique benefits and features. We hope we have given you enough data to make an informed decision when it comes to the most appropriate JavaScript frontend framework for your team or project.

The post Top 5 JavaScript frontend frameworks appeared first on asap developers.

The features described in this article are available for use, but you shouldn’t use them for professional development just yet. This new React mode has experimental features that will possibly change in the future. That said, React Concurrent Mode is currently available in the experimental build of React so, even though it is not yet available in the stable releases, you can still try out these new features by using the experimental builds.

What is concurrency?

Concurrency is a way to structure a program by breaking it into pieces that can then be executed independently. This is how you can break the boundaries of using a single thread and make your application more efficient.

So…what is React Concurrent Mode?

The React development Team defines React’s new mode as follows: “… Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.”

In other words, Concurrent Mode is a flag that allows React’s kernel to choose when to apply changes in the DOM when you are dealing with side effects, like Network requests. The main idea behind this is making React more intelligent.

Basically, this would allow React to perform multiple UI renders concurrently. Although JavaScript is a single-threaded language, these new features will allow web applications to be much more responsive and faster. And native applications too, of course, once these features hit React Native in the near future.

A bit of history on React Concurrent Mode

When React’s kernel was completely rewritten on React Fiber, key features came in, like the ability to pause, abort, or reuse work as new updates come in, and the ability to assign priority to different types of updates.

However, the main benefit of the rewrite was the possibility of creating different virtual threads (called fibers) which are divided on different properties depending on whether the user is interacting or not with a component.

React Fiber laid the foundation on which Concurrent Mode works. Now, when some asynchronous event is tied to a component rendering, React can intelligently decide which elements of the virtual DOM have priority to be rendered.

An everyday example

Let’s imagine you have a single-page application that has a section where it must display a spinner, skeleton or placeholder while it is calling an API. Why is this necessary? Because this is a good indication that something is going on and, in this case, it buys you some time to show the returned data.

In “normal” React, you would see a spinner while React is finishing loading the layout, but it must reload the component to show the result that it got from calling the API’s endpoint.

It would be better if React waited a bit more to get a better performance and to show the user a final state of the user interface instead of intermediate states that are completely unnecessary and bothersome in the user experience.

Luckily for us, this is possible thanks to React Concurrent Mode. In more specific words, with Concurrent Mode the rendering process is broken down into smaller tasks, and a scheduler allows you to prioritize them based on importance. This then helps React:

• Not to block the main thread.
• To work on multiple tasks at a time and switch between them according to priority.
• To partially render a tree without committing the result.
• To make rendering interruptible and happen in multiple phases.

Code time

Let’s make a small application where you have to fetch a large number of images from an API; the idea is to show all the images once the data fetching is finished and that all images are rendered without intermediate states.

Assuming you have already created a React project (for example, using create-react-app), what you have to do next is enable Concurrent Mode on the index.js file of your application.

Here there’ll be a flag to change between React Concurrent Mode and “normal” React, so when your project is finished you will see the difference between the two modes.

Link: index.js

Note: it is very important for the index.html file on your React project to have a div inside the <body> tag with a root ID. It should look something like this:

Link: index.html

Next, you have to modify the react and react-dom versions in your package.json file to set the experimental build. Remember to run npm start or yarn start after making the changes.

Important note: both dependencies are constantly having new experimental releases. If you want to use the latest version instead of changing the package.json to a specific one, you can run one of the following commands.

• npm install react@experimental react-dom@experimental
• yarn add react@experimental react-dom@experimental

Link: package.json

As you can see, in the package.json there is a react-bootstrap dependency. This is an easy way to include the spinner component that your application will use later. Once you have finished setting up your project, it is time to work with the App.js file and your custom components (ImageList.js).

Link: App.js

Here there are a lot of new features. First of all, there’s the useTransition hook (imported and used as ‘’unstable_useTransition’). In this scenario, you have the images state that, while being fetched, causes the List Image component to suspend, so it must be updated using the useTransition hook. 

This new hook returns two values:

• A function that takes a callback function in which you set the state.
• A boolean that lets you know when the transition is taking place.

The useTransition hook receives an argument that tells React how long to wait before suspending the component. That argument is the one you’ll be using to show the spinner.

On the Fetch Images function, you’ll use the JavaScript Fetch API to fetch multiple images and return the result. Then there’s the Create Resource function. You will use this function to display the images in your React List component. This allows you to tell React that you want to wait until you are done fetching the images for your component to be rendered. 

This function will run the Fetch Images function. Then, whenever the promise is completed or rejected, it will change the status of the status variable. The read method will be used to get the images that will be displayed. When the promise is still pending, it throws the suspender variable, which contains your promise. When it gets rejected, it throws an error that is saved on the suspender variable. Finally, you return the result when the images have been fetched successfully.

You’ll start the transition with the useEffect hook and save the returned data in the useState hook. The <Suspense> component lets you “wait” for some code to load and declaratively specify a loading state—in this case, a spinner—while you are waiting.

Link: ImageList.js

Here you simply have a custom component to show all the images that you got from the API’s endpoint. It receives two props, which are the resources (the fetched images) and the pending state that is obtained from the useTransition hook; this last one is only used to change the CSS styles.

Link: App.css

Here are some CSS Styles to make the final result look better. Now, you just need to test the application that you made and you should see how, after the spinner goes away, the rendering process feels smoother. If you go to the index.js file and change the boolean value to use “normal” React and run the application again (remember to clean cache), you will see how the rendering has decreased and feels heavier.

Last note: please remember that those experimental features are being constantly changed and this test application probably won’t work in the future. For example, the unstable_useTransition import and ReactDOM.unstable_createRoot() may change soon.

Final thoughts on react concurrent mode

This new mode is still in an experimental stage, but after its official release, it will bring many new possibilities and mark a before and after in React web application development and React Native mobile application development.

Before Concurrent Mode, React had no way of detecting that there were multiple dependencies to external services (like APIs), so it couldn’t do anything to improve the user experience. Now, with React Concurrent Mode, you can let React’s engine know about your dependencies with external services and let it use them in a smarter way, as well as make decisions about when to render the content. It is clear what those new React features are focusing on: it’s all about perfecting the User Experience.

The post React concurrent mode appeared first on asap developers.

The 2020 COVID pandemic caused many of our favorite development conferences to be canceled or postponed. However, a few of them were able to adapt to the new remote methodology that has taken the world by storm over the last few months. This was the case with the React Summit. The conference had its remote edition last April and, in this article, we’ll focus on one of the conference’s talks about monorepos: Scalable React Development for Large Projects by Jason Jean. But first, let’s give you a bit of context.

About the React Summit Remote Edition

The React Summit is a two-tier conference: one of the tiers focuses on React and the other on React Native. This year’s edition was to be held in Amsterdam, but had to be postponed until September 11 due to the pandemic. However, a remote edition was organized and held via Zoom on April 17. This conference included talks, Q&As and workshops, as well as an advice lounge and networking opportunities. There were even several afterparty options, including a QuakeJS tournament. Speakers included Guillermo Rauch from Next.js, Sangeetha KP from Amazon, and Haris Mahmood from Shopify. Meanwhile, topics ranged from artificial intelligence and virtual reality with React, to AHA programming and bringing Ionic to React.

About the speaker

Jason Jean is a Senior Angular Architect at Nrwl in Canada. Nrwl is a development company that consults with fortune 5000 companies and specializes in monorepo development. They create development tools to accelerate app development and their main goal is to help companies work faster and more efficiently.

Jean works as part of the core team for Nx, a set of open-source development tools specially created for monorepos. In his talk, he explains what monorepos are—and what they are not—and discusses their benefits. He also goes into detail about Nx as a tool to help developers implement a monorepo workflow.

What are monorepos?

A monorepo is a single repository with multiple projects commonly used by big companies such as Facebook, Microsoft, Google and Twitter. Jean describes a monorepo as a warehouse for code. Just like in a warehouse, where items are stored together, but packed and shipped separately, projects in a monorepo are stored together, but apps or features are developed separately and each project is deployed independently. Jean also emphasizes that a monorepo is not a monolithic app and that using one doesn’t mean you have to build or deploy all projects at once.

What are the differences between using multiple repositories and monorepos?

Apps are usually developed by sharing code in multiple repositories. This implies duplicated tooling, separate workflows and testing, less analyzable dependencies, and out of sync internal and external dependencies (with possibly different versions being used for each project or feature). This system is not only complex, but it is also usually more cumbersome and time-consuming.

In contrast with multiple repositories, monorepos use unified tooling, their dependencies are analyzable, they let you run all tests at once and they include a single version of dependencies (both internal and external). Therefore, using a monorepo considerably simplifies the development process.

What does Nx bring to the table?

Nx is an open-source toolkit that enables you to scale development through multiple teams—which means multiple applications and both front and back end—by helping you implement a monorepo workflow.

Jean highlights three main benefits of working with Nx: you can develop like Facebook, it has an intelligent build system and it supports the use of modern tools. He then goes into detail about the perks of each of these features:

1. Develop like Facebook

Using Nx allows you to incorporate some of the best coding practices from a tech giant like Facebook. This means you can share code and collaborate between multiple teams, thus creating a holistic development experience. It also lets you create a workspace with no manual setup, as well as add shared functionalities very easily. Other benefits are that you can generate a redux state without writing boilerplate and add Next.js without doing much setup.

What happens if you don’t like what Nx generates? Well, you can write custom code generation to suit your organization. This has the added benefits of achieving consistency and enforcing best practices. Nx also helps you enforce standards and best practices by tagging different projects and creating module boundaries to make sure there are no incorrect dependencies. Finally, it infers dependencies and lets you visualize all your dependencies with an interactive view.

2. Intelligent build system

Nx’s intelligent build system means you can build only the affected projects, build in parallel, distribute builds across many agents and cache previous builds. As Jean states, the idea is that you never have to build the same thing twice.

3. Supports the use of modern tools.

Nx’s default setup includes TypeScript (although, of course, you can also use plain JavaScript), Jest, Storybook—a tool that lets you develop UI components in isolation—and Cypress—and end-to-end testing experience.

However, you can install a variety of plugins for your favorite tools, such as React, Next.js, Express.js, Node.js, HTML, Angular and Nest.js. If you don’t find the tools you want among the selection, you still have two options: you can check out the community-created plugins or even create your own.

If you want to see how Nx works more closely, you can check out the live demo by Jean.

Why make the switch to monorepos?

In the Q&A section, one viewer asked about how to convince leadership and team members to make the switch from multiple to monorepo. Jean explains that monorepos improve collaboration and the perfect way to convince your team to make the switch is to focus on that. If dependencies don’t work together well, this creates frictions between different members of the team. A monorepo takes a lot of that stress away. Moreover, if you try out Nx and decide it’s not for you later on, you can move away from it easily. As Jean states, it doesn’t change how you write the code, it just works around it.

Final thoughts

Whether a monorepo is right for you will depend on the size, budget and requirements of your development company. However, it definitely has many benefits, particularly if working on large projects or several projects that overlap. -You can also watch the rest of the videos from the React Summit Remote Edition here.

The post Monorepos and scalable development appeared first on asap developers.

The 2020 COVID pandemic caused many of our favorite development conferences to be canceled or postponed. However, a few of them were able to adapt to the new remote online methodology that has taken the world by storm over the last few months. This was the case with the React Summit. The conference had its remote edition last April and, in this article, we’ll focus on one of the conference’s talks: Designing with Code in Mind by Elizabet Oliveira. But first, let’s give you a bit of context.

About the React Summit Remote Edition

The React Summit is a two-tier conference, one of the tiers focuses on React and the other on React Native. This year’s edition was to be held in Amsterdam, but had to be postponed until September 11 due to the pandemic. However, a remote edition was organized and held via Zoom on April 17. This conference included talks, Q&As and workshops, as well as an advice lounge and networking opportunities. There were even several afterparty options, including a QuakeJS tournament. Speakers included Guillermo Rauch from Next.js, Sangeetha KP from Amazon, and Haris Mahmood from Shopify. Meanwhile, topics ranged from artificial intelligence and virtual reality with react, to AHA programming and bringing Ionic to React.

About the speaker

Elizabet Oliveira works remotely as a Senior Product Designer for Elastic. The company, which focuses on data analysis, is responsible for developing the Elastic Stack, which includes Elasticsearch, Kibana, Beats and Logstash. Elastic is a distributed company with teams all across the globe, which means they are very good at making remote teams work.

Oliveira works mainly on the company’s design system that provides components for Kibana. Kibana “is a free and open user interface that lets you visualize your Elasticsearch data and navigate the Elastic Stack.” The tool includes multiple components for data visualization, which are particularly useful for products with a lot of data.

About the talk: Designing with Code in Mind

Oliveira introduced her talk by stating that there are a lot of teams where designers and developers collaborate only through images and this can be restricting. This can cause a lot of back and forth until the perfect result is achieved and considerable time can be spent just making requirements clear and perfecting a specific design feature. That is why having designers with coding knowledge or skills in a development team can be extremely useful.

Oliveira also discussed how a lot of companies currently have their own design system and that, while a design system can be very helpful, it isn’t 100% perfect. Therefore, it can be very useful to have a designer with the skillset to build a structure inside your product. She added that, while designing with code in mind works better if you have a design system, when it comes to more complex scenarios, sketching the idea first might be preferable. Another point Oliveira made is that your design does not need to be pixel perfect. The important part is the idea, which can then be tweaked with code.

The benefits of designing with code in mind

So, what is so great about designing with code in mind? Well, according to Oliveira, there are two main advantages. The first one is that it is easier to design states with code. The second and most important one is that this combination of skills means new design features or components can be created or introduced faster and more efficiently, saving time and effort. This is particularly true when it comes to teams working remotely where communication can be more complex. If you have a designer who codes on your team, they can mock up the component, discuss it with the developers in the team, and then one of the developers can work on improving and perfecting the code. In addition to aiding with communication, you can save a lot of time by avoiding lengthy and complex explanations and the back and forth that stems from having to consult on every detail.

Finally, Oliveira stressed that design teams should have a balance of different types of designers. There should be some who are good with CSS and have some coding knowledge, others that are more visual, and even include some developers inside the team. This mix of skills will make the team faster and able to work better together.

From the developer’s standpoint, moderator Mettin Parzinski from Passionate People added that having designers with at least some coding knowledge makes the work of developers much easier.

Final thoughts

Having designers with coding knowledge in your team streamlines communication and leads to better products. In fact, we believe that having a development team where everyone has at least a basic understanding of what each role entails is a great asset that leads to a more cohesive and productive working unit.

If you want to know more or see examples of how Oliveira implemented her design ideas, you can watch the full video on youtube. You can also watch the rest of the videos from the React Summit Remote Edition here.

The post Designing with Code in Mind – React Summit Remote Edition appeared first on asap developers.

Over the last few months, we’ve been sharing some of our top picks for mobile app and development conferences in California and some insights from our favorite talks. Today, we’re moving to the other end of the country and sharing our highlights from Kate Wardin’s talk at React Boston last September, where she tackled the topic of leadership in the tech industry. To start us off, let’s take a look at the React Boston conference.

What is React Boston?

React Boston was born out of ReactJS Boston, a local react user group that hosts meetups every month. Sponsored by Wayfair Tech, the event grew to the point ReactJS Boston and Wayfair decided to launch a yearly conference. So, in 2017, this two-day conference was created.

React Boston is hosted in Boston’s Back Bay neighborhood and is aimed at developers of all backgrounds, skill sets and experience levels. This year’s event was held on September 21-22, with ticket prices ranging from $375 to $499 (including breakfast and lunch meals, as well as access to the closing party on Sunday).

Past speakers have included Laura González from The Guardian, Robert Zhu from Facebook, and Houssein Djirdeh from Google, among many others. The talks cover a wide range of topics related to React, such as designing a component kit, various aspects of GraphQL and piloting a drone with React. There are also plenty of opportunities to socialize. You can take a look at this year’s talks here.

Kate Wardin: The speaker

Kate Wardin is a Senior Engineering Manager at Target, where she supports a development team of front-end engineers who build supply chain React apps for the company. Based in Minneapolis, MN, Target is the eighth-largest retailer in the United States with over 18,000 stores. In 2019, Kate founded Developer First, an organization that provides new leaders with resources, tools and confidence to be great leaders in the tech field.

The problems behind the talk

Kate Wardin’s talk was called “Developer First – A New Leadership Mindset”. After introducing herself and what she does both at Target and Developer First, Kate Wardin mentioned the three reasons behind her talk:

1. The impact bad bosses can have on an individual in the tech industry. As the saying goes: people don’t leave jobs, they leave managers. According to a 2015 Gallup engagement study, 50% of respondents left a company to “get away from their manager at some point in their careers”.
2. Engineers tend to be picky about their work and rightly so. With only 70,000 new candidates for development roles graduating in the US by 2020 for the projected 700,000 new roles, developers have a wide variety of options. This means employers need to focus on how to attract and retain developers. Moreover, Kate explains how retention is actually at an all-time low at the moment, with 1 in 4 workers quitting to try something new, which is predicted to be 1 in 3 by 2020.
3. New managers struggle with the change from individual contributor to leader of a team. As Kate explains, the sad truth is that only 40% of engineering managers receive formal training when they become a boss for the first time.

After explaining these reasons, Kate Wardin went on to state that bosses get a bad rep. Maybe because of how they are portrayed in the media or because they come from roles that don’t provide any specific training and are not properly prepared to take on the new role. Flattening an organization doesn’t seem to work either as employees need a solid foundation of support from a leadership role. As organizations struggle to recruit and retain top technical talent given the low candidate pool and increasing demand, Kate dared us to think differently about technical leadership in order to build and retain strong, empowered, motivated, and loyal development teams.

The solutions

After covering the issues, Kate Wardin went on to provide these solutions to the three problems discussed at the beginning of the talk:

1. Develop awesome leaders.
2. Foster irresistible culture.
3. Equip leaders with tools, actionable frameworks and confidence to be effective leaders.

Kate Wardin has actually tested these solutions with great results. At Target, she has managed to improve engagement and retention in her team compared to the national average. In 2018, engagement was at a mere 15% at a national level and she managed to reach 84%. Regarding retention, the national average was 80% while her team rose up to 92.6%.

How can I do it?

Because of the issues within the industry, Kate Wardin decided to establish Developer First leadership based on the foundation that “I work for my team, not the other way around”. Here are seven ways to practice Developer First leadership according to Kate:

1. Remove blockers that prevent developers from making progress towards their professional and personal goals: whether it’s changing how we phrase questions, bringing up potential issues, addressing low performers or letting go of your most valuable players, you need to help each individual on your team grow, even if that means finding a new role for them or seeing them go somewhere they can keep learning and growing.
2. Empower your team: make sure your employees don’t feel like they’re always in the passenger’s seat, that leaders and business partners are available to them (and vice versa), and that you involve your team in decision-making and problem-solving when their insight in necessary or relevant. You should also focus on guiding instead of imposing by waiting for conversations to play out before sharing your ideas, as well as making sure team members know they can disagree with you. Moreover, if something cannot be run by the team, explain why and how their work ties into the bigger picture.
3. Share credit and take the blame. On the credit side, Kate suggests associating names with accomplishments and knowing what type of recognition each member prefers (some may want it to be very public while others might prefer a quiet email or message). As to any problems or failures, she says one should focus on what happened, how you solved it and what other teams can learn from the mistakes. Moreover, Kate believes the only person accountable should be the leader of the team.
4. Never devalue people in the process of delivering a solution: value is not just about productivity, it is measured by our impact on the development team and the company. Kate advises not to call employees resources and to understand that family and personal lives are more important than anything else–a leader shouldn’t incentivize behavior that means sacrificing that. You should also build an inclusive culture, but without compromising company values and work ethic.
5. Be vulnerable and authentic: you should be relatable and provide a good example by sharing your past failures.
6. Prioritize and focus: this is a point Kate really struggled on when she first came to her managing duties. She advises not to multitask on important things, stating that, according to some studies, multitasking causes a 10% drop in IQ and leads to as much as a 40% drop in productivity. She recommended using the Eisenhower matrix and auditing yourself in order to help you prioritize and focus.
7. Invest in your communication skills: Kate narrows it down to simply stop talking. Listening is far more important. She suggests having one-on-one meetings with your team at least every other week for 30 minutes, making sure you rarely miss them and that you are focused on the team member. If you happen to be distracted for any reason, let them know. And if you notice they are, you might consider suggesting rescheduling to them.

Final thoughts

As the tech industry faces a lot of challenges to keep up with demand, companies should focus on how best to recruit developers and keep them engaged. We believe Kate Wardin makes a lot of extremely valuable points and we hope you can apply her suggestions and create a workspace that attracts talented developers and fosters a healthy and productive team environment. You can check out the full video for the talk here, and make sure to check out the rest of the React Boston videos about React web development.

The post A new approach to leadership at the React Boston conference appeared first on asap developers.

The post Fixing the Next.js Service Worker issue – Next.js SEO appeared first on asap developers.