raphael-do-vale

Raphael has more than two decades of experience in developing enterprise systems including coding, project planning, architecture, and specification. His technology stack includes Java, Spring, Python, Relational Databases, JavaScript, DevOps, and Artificial Intelligence. He has a PhD and Master's degree in the Semantic Web, winning awards during his studies. He also worked with Description Logic, Prolog, RDF, and OWL tech.

Raphael do Vale

I stream, blog, and make youtube videos about tech stuff. I love coding, I love AI, and I love building stuff!

Staff Developer Advocate

Juan Cruz Martinez

Understand the architectural patterns, testing strategies, and design principles required to turn a simple script into a scalable, production-ready FastAPI application.

FastAPI Best Practices

andrea-chiarelli

I have over 20 years of experience as a software engineer and technical author. Throughout my career, I've used several programming languages and technologies for the projects I was involved in, ranging from C# to JavaScript, ASP.NET to Node.js, Angular to React, SOAP to REST APIs, etc.

In the last few years, I've been focusing on simplifying the developer experience with Identity and related topics, especially in the .NET ecosystem.

Principal Developer Advocate

Andrea Chiarelli

An overall view of .NET, Microsoft's cross-platform development environment that allows you to build any type of application with C# and other languages.



Microsoft's ambition to provide developers with one platform to solve any type of problem has been fulfilled by .NET. For a couple of decades already, the .NET platform has been powering up web, desktop, and mobile applications in both the startup and enterprise scenes.

Without any doubt, .NET plays a central role in the software development industry. .NET popularity in the developer community is a fact. You can measure it through the number of open source projects around the world and the presence of [C# among the five most popular programming languages](https://www.tiobe.com/tiobe-index/). Its popularity is going to grow even more, especially after [the latest release (.NET 5)](https://auth0.com/blog/dotnet-5-whats-new/), which revolutionizes the industry by pioneering the concept of universal software development.

To understand the power of .NET, let's explore some of its technical foundations.

## What is .NET?

.NET is an open-source and cross-platform development platform for building many types of applications. Designed by Microsoft, the platform supports multiple programming languages and libraries to build web, mobile, desktop, IoT applications, and more.

![.NET 5 platform](https://images.ctfassets.net/23aumh6u8s0i/2bsVrNvzMOk64yfFw0ZU3O/b88d3412d42844d54011f31d69d5860f/dotnet5_platform)

<p align="center"><i><a href="https://devblogs.microsoft.com/dotnet/introducing-net-5/">[Source: Microsoft]</a></i></p>

Even if C# is considered the main programming language for .NET, you can use many other different languages of your choice. The languages directly supported by Microsoft are:

- [C# (C sharp)](https://docs.microsoft.com/en-us/dotnet/csharp/): A modern object-oriented programming language that belongs to the C language family. Its syntax may look familiar to C, C++, Java, and JavaScript developers.

- [F# (F sharp)](https://dotnet.microsoft.com/languages/fsharp): A functional-oriented programming language, member of the [ML](https://en.wikipedia.org/wiki/ML_(programming_language%29) language family. It also supports the object-oriented programming paradigm.

- [Visual Basic](https://docs.microsoft.com/en-us/dotnet/visual-basic/): The historical Microsoft programming language. It has become a full object-oriented programming language within the context of .NET.

.NET supports the [*Common Language Infrastructure*](https://en.wikipedia.org/wiki/Common_Language_Infrastructure) (CLI), so your source code is compiled into a [*Common Intermediate Language*](https://en.wikipedia.org/wiki/Common_Intermediate_Language) (CIL), independently of the programming language you use. This guarantees great interoperability between languages in the platform.

Besides the above mentioned languages supported directly by Microsoft, many other programming languages can compile to the .NET CIL. For example, ClojureCLR, Eiffel, IronPython, PowerBuilder, and many others. For a complete list, check out [this page](https://en.wikipedia.org/wiki/List_of_CLI_languages).

## .NET Architecture and Components

.NET allows you to build different application types, ranging from command-line to desktop applications, from web to mobile applications, from gaming to IoT applications.

This is possible thanks to its modular and optimized architecture.

### .NET Components

The .NET architecture is based on two main components:

- *CoreCLR*: This is the .NET runtime. It is responsible for executing CLI programs and includes a just-in-time compiler.

- *CoreFX*: The platform’s API implementing the CLI Standard Libraries, that is, the set of libraries that provide the most common functionalities, such as file system management, exception handling, network communication, threading, reflection, and so on. The CoreFX component is sometimes called the *Unified Base Class Library*.

### .NET Application Models

Above the core components, you have the different **application model frameworks**, that is, the libraries that offer support for developing different types of applications. So, for example, you have:

- [ASP.NET](https://dotnet.microsoft.com/apps/aspnet): The framework that allows you to build [web applications](https://auth0.com/docs/quickstart/webapp/aspnet-core-3) and [web APIs](https://auth0.com/blog/how-to-build-and-secure-web-apis-with-aspnet-core-3/).

- [Windows Presentation Foundation (WPF)](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/?view=netdesktop-5.0): A graphical user interface for [Windows desktop applications](https://auth0.com/docs/quickstart/native/wpf-winforms).

- [Xamarin](https://auth0.com/blog/easy-authentication-xamarin-auth0/): The framework for building cross-platform mobile, TV, and desktop applications.

- [Blazor](https://auth0.com/blog/what-is-blazor-tutorial-on-building-webapp-with-authentication/): The framework to build client web applications by using C#. It also allows you to generate [client web apps in WebAssembly code](https://auth0.com/blog/securing-blazor-webassembly-apps/).

- [ML.NET](https://dotnet.microsoft.com/apps/machinelearning-ai): The machine learning framework that simplifies the integration of machine learning models in your .NET application.

In addition to application model frameworks, .NET offers you support for most of the common programming tasks: from file management to network communication, from security to database access. For example, on the networking side, it supports socket programming, HTTP communication, and [gRPC](https://auth0.com/blog/securing-grpc-microservices-dotnet-core/). This allows you to [create microservices](https://auth0.com/blog/implementing-microservices-grpc-dotnet-core-3/) with the protocol that better fits your needs.

For any other needs not embedded in the framework, you can find a huge number of specific libraries on the public [NuGet repository](https://www.nuget.org/). In fact, [NuGet](https://docs.microsoft.com/en-us/nuget/) is the package manager for .NET. It allows you to create, share, and use many .NET libraries for almost any purpose.

## .NET Design and Development Support

.NET support for software development is not limited to the multiple programming languages you can use. .NET also promotes the use of some best practices while letting you use the approach you prefer to build your application.

For example, it encourages you to [use dependency injection to decouple your application’s components](https://auth0.com/blog/dependency-injection-in-dotnet-core/). Dependency injection helps you design better software by limiting the component interdependence and facilitating reuse. In addition, it makes it easier to test your components.

By the way, on the testing side, .NET also comes with support for [unit and integration tests via xUnit](https://auth0.com/blog/xunit-to-test-csharp-code/).

On the front of the development experience, developers can choose from different approaches. They can use the [.NET CLI ](https://docs.microsoft.com/en-us/dotnet/core/tools/)environment, using the command line to create new projects, adding dependencies, build, run, and so on.

They can use [Visual Studio Code](https://code.visualstudio.com/) for an intermediate approach: an advanced cross-platform editor on top of the .NET CLI. Or they can use a powerful IDE like [Visual Studio](https://visualstudio.microsoft.com/vs/), available for both Windows and Mac, that provides you an interactive programming experience.

Regardless of the tool you choose, you can use many project templates to quickly start creating your new application. You can also [create your own .NET project template](https://auth0.com/blog/create-dotnet-project-template/).

## From the .NET Framework to the .NET Platform

Microsoft launched the .NET project in 2002. Since the beginning, the .NET goal was to create a universal platform for programming with any language. Of course, as the first step, Windows was the main .NET target.

However, Microsoft submitted the specifications of the .NET runtime infrastructure and the C# programming language to [ECMA](https://www.ecma-international.org/) for standardization. This led to the birth of a few porting projects on other platforms: Linux, embedded systems, mobile devices, browsers, and so on.

This also led to a fragmentation of the platform and sometimes generated confusion among developers. Take a look at [this article to learn more about the evolution of .NET](https://auth0.com/blog/navigating-dotnet-maze/).

Let’s try to clarify the differences among a few common concepts.

### .NET Framework

The .NET Framework was the initial flavor of .NET. It provides the developer with a set of APIs for the most common programming needs and interacts with the underlying operating system. It runs only on Windows, and its lifecycle is coming to an the end right now, after [the release of .NET 5](https://auth0.com/blog/dotnet-5-whats-new/).

### Mono

The Mono project brings .NET to Linux machines. It is the best known porting project based on the .NET standard specifications. Even if Mono's aim is to run on Linux applications built for the .NET Framework and vice versa, the compatibility is not always guaranteed. There are a couple of reasons for this: some .NET Framework features are too tied to the Windows operating system, and often the Mono implementation lags behind the newest .NET Framework features.

### .NET Core

.NET Core is a complete rewriting of the .NET Framework with the cross-platform goal in mind. Its redesigned architecture defines a minimal feature set as the common core across Windows, Linux, and Mac platforms. The rest of the features can be downloaded as library packages.

### .NET Standard

The .NET Standard is not another .NET implementation. It is a formal specification of .NET APIs that helps to create cross-platform libraries. If a platform supports a given .NET Standard version, then a library supporting the same version will run on it, regardless of the device type and the framework implementation (.NET Framework, Mono, .NET Core).

### .NET

Since the beginning, the .NET term has been used to indicate the universal development platform. However, many implementations arose since then, so the .NET name created ambiguities. .NET 5 aims to make concrete the initial vision of a universal development platform. It replaces the current existing implementations: .NET Framework, .NET Core, and even Mono. So, from .NET 5 on, only .NET will exist as a name and as a platform.

## Auth0 and .NET

Auth0 has extensive support for .NET that allows you to easily integrate modern authentication and authorization into your .NET applications: from specific SDKs to documentation, from blog posts to sample projects. In this section, you find a list of the .NET resources that Auth0 provides you.

### .NET QuickStarts

Auth0 Quickstarts help you in setting up your first [authentication](https://auth0.com/docs/authentication) and [authorization](https://auth0.com/docs/authorization) integration. They guide you in adding the needed code and the required configuration step by step. If you are logged in, the code snippets are configured for your account. If you don't have an account, you <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">can sign up for free with Auth0</a>.

The following .NET-related Quickstarts are available:

- [**ASP.NET Core Web API v3.1**](https://auth0.com/docs/quickstart/backend/aspnet-core-webapi): This Quickstart helps you to add authorization to an ASP.NET Core Web API using the standard [JWT](https://jwt.io/) middleware.
- [**ASP.NET Core v3.1 Web Application**](https://auth0.com/docs/quickstart/webapp/aspnet-core-3): This Quickstart demonstrates how to add user login to an ASP.NET Core Web Application.
- [**WPF/Windows Forms (WinForms**)](https://auth0.com/docs/quickstart/native/wpf-winforms): The Quickstart guides you in adding user login Windows desktop C# applications.
- [**Xamarin**](https://auth0.com/docs/quickstart/native/xamarin): This Quickstart helps you add user login to Xamarin applications.
- [**Windows Universal App**](https://auth0.com/docs/quickstart/native/windows-uwp-csharp): Reading this Quickstart, you will learn how to add user login to [Windows Universal](https://docs.microsoft.com/en-us/windows/uwp/get-started/universal-application-platform-guide) C# applications.

### Software Development Kits (SDKs)

Auth0 provides you the following SDKs to help you to integrate authentication and authorization in your .NET applications:

- [**.NET Client Library for Auth0**](https://github.com/auth0/auth0.net): This SDK supports two APIs:
  - *The Authentication API*: This API allows you to add [OIDC](https://auth0.com/docs/protocols/openid-connect-protocol)-based authentication to your application
  - *The Management API*: This API allows you to interact with the [Auth0 Management API](https://auth0.com/docs/api/management/v2) and deal with your [Auth0 tenant](https://auth0.com/docs/videos/get-started-series/architect-your-tenant).
- [**Auth0 OIDC Client for .NET** ](https://github.com/auth0/auth0-oidc-client-net): This library supports [OIDC authentication](https://auth0.com/docs/protocols/openid-connect-protocol) for .NET desktop applications based on WinForms, WPF, and UWP as well as Xamarin mobile applications.

### .NET blog posts

In addition to SDKs and Quickstarts, Auth0 provides you with specific content, use cases, and code examples through its [developer blog](https://auth0.com/blog/developers/). You can find [many .NET-related articles](https://auth0.com/blog/search/?query=.net) that help you build and secure your applications and keep up to date with the most recent features. Most articles include a sample project to demonstrate how to practically implement your apps. You can download them from GitHub, <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up with Auth0</a> if needed, configure the app, run it, and explore the code.

So, enjoy building your next .NET project with Auth0!



What is .NET? An Overview of the Platform

brandon-roberts

Brandon is a Developer Advocate at Nrwl, focused on community engagement, content creation, and collaboration around Nx, the open-source build framework. He enjoys learning new things, helping other developers build web applications, sharing knowledge, collaborating with others, and contributing to open source. Brandon is a Google Developer Expert in Angular, a technical writer, and also a maintainer of the NgRx project building libraries for reactive Angular applications.

Developer Advocate

Brandon Roberts

Whether you have a single application or a suite of applications, code reuse, standards around structure, process, and feature development help to ensure your codebase remains healthy in the long term.

[Nx is a build framework for monorepos](https://nx.dev) with first-class React support. It helps accelerate the adoption of proven development practices across projects of many sizes and scopes. Nx provides additional tooling for React projects to help scale and develop features at a faster pace. 

This guide walks through some of the tooling provided by Nx, the creation, and structure of an Nx workspace, with an example to follow along with.

<AmpContent>
<amp-youtube
    data-videoid="IMWk0P6EeRc"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div class='embed-container' style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src='https://www.youtube.com/embed/IMWk0P6EeRc' frameborder='0' allowfullscreen></iframe></div>
</NonAmpContent>

## What are Monorepos

A monorepo is a single collection of all your source code that spans multiple applications, libraries, and languages. Everything in the monorepo is not deployed at the same time but is all located in a central repository. Many companies use monorepos for different organizations and projects. Some even use a single monorepo to house all the source code for projects across their entire company.

Here are some of the benefits of a monorepo:

* **Shared code** &mdash; Promotes reuse of validation code, UI components, and types across the code base, including code between the backend and the frontend.
* **Atomic changes** &mdash; Make changes to a server API and modify the clients that consume that API in the same commit. No more coordinating commits across different repositories.
* **Developer mobility** &mdash; Provides consistency between building and testing applications written using different tools and technologies. Developers can confidently contribute to other teams’ applications and verify that their changes are safe.
* **A single set of dependencies** &mdash; Use a single version of third-party dependencies for all your apps. Less frequently used applications don’t get left behind with a 3-year-old version of a framework library or an old version of a build tool. 

There are also a few common misconceptions with monorepos:

* Strictly co-locating your code just by placing all your code in the same repository.
* Running all the builds, tests, and quality checks on all applications for each PR or commit.
* Deploying every application on every commit to the main branch.
* Setting up multiple scripts across applications to handle common tasks.

Just because you have all your code in a monorepo, that does not mean you have run all the tests and checks on your monorepo for every single commit. This doesn't scale well and leads to bottlenecks in your development and Continuous Integration (CI) and Continuous Deployment (CD) pipelines. Nx provides integrated tooling to intelligently determine what needs to be run through code analysis, affected commands, and computation caching. 

### Affected commands

Nx uses code analysis to build a dependency graph of all projects in the workspace. It then uses the dependency graph to determine what projects are impacted based on your changes between your Git branches and the main branch. [Nx’s Affected Commands](https://nx.dev/latest/react/core-concepts/mental-model#affected-commands) use this code analysis to perform the minimum set of tasks based on what's changed. Let’s look at two applications that depend on a library as an example.

![](https://images.ctfassets.net/23aumh6u8s0i/3Msqcbm3M7zreqA7s3Yga/fa9a14ab5dd0970d45ff8603494a2530/Uploaded_from_Streamlining_a_React_Monorepo)

To see what applications are affected, use the **[nx affected:apps command](https://nx.dev/latest/angular/cli/affected-apps)**. Nx analyzes the nature of the changes and determines which projects, including applications and libraries, are impacted. In the example above, changing app1 doesn’t cause app2 to be impacted, so you don’t need to run all the pre-merge steps for app2. Alternatively, changing the lib, or packages that both apps depend on does impact both applications.

### Computation caching

Nx is smart in that it also knows the context in which you ran particular commands, the current hash of the files, and other environmental information. 

![](https://images.ctfassets.net/23aumh6u8s0i/1gsO5lGTZaluzgHVc3H3xr/f931ae116060c2def80962a764b4888b/Uploaded_from_Streamlining_a_React_Monorepo)

The image above displays an example of the information collected to build a unique hash used to identify the computation. With this information, Nx caches and stores these computations and can replay them if it seems the same computation is being run again.

This isn’t done through rebuilding source code. Only the artifacts produced from a given command are stored and replayed when possible. If Nx doesn’t find this computation, Nx runs the task, and after it completes, it takes the outputs and the terminal output and stores it locally (and if configured remotely). All of this happens transparently, so you don’t have to worry about it.

## Creating an Nx Workspace Using a React Preset

Now that you know how Nx works, let’s try it out by building a small application that lists Star Wars characters.

Start with creating the Nx workspace with a React application using the `react` preset. 

```sh
npx create-nx-workspace sw-org --preset react --appName myapp
```

After running this command, you’ll be asked to select a stylesheet format. You can choose the default for this demo. You also have the option to connect your workspace to [Nx Cloud](https://nx.app/) if you’d like.

After you make your selections, this command does the following:

- Generates a new Nx workspace
- Scaffolds out a new React application with modern tooling, including [Jest for unit tests](https://jestjs.io/), and [Cypress for E2E tests](https://www.cypress.io/).

There are other presets available, such as `next` for [Next.js](https://nextjs.org/) projects, and `react-express` for a workspace with React and Express pre-configured.

Every Nx workspace has a file structure similar to this:

```treeview
myorg/
├── apps/
├── libs/
├── tools/
├── workspace.json
├── nx.json
├── package.json
└── tsconfig.base.json
```

* `/apps/` contains the application projects. This is the main entry point for each runnable application.
* `/libs/` contains the library projects. Each library defines its external API so that boundaries between libraries remain clear. 
* `/tools/` contains scripts that act on your codebase.
* `/workspace.json` contains the configuration for each project in your workspace.
* `/nx.json` adds extra information about projects, including implicit dependencies and tags that can be used to restrict the ways projects are allowed to depend on each other.
* `/tsconfig.base.json` sets up the global TypeScript settings and aliases.

To serve up the application, enter into the `sw-org` directory and run the `serve` command using the Nx CLI:

```sh
nx serve
```

> Note: If you don't want to install Nx globally, you can use `npx nx serve` instead.

The initial application page is displayed.

![](https://images.ctfassets.net/23aumh6u8s0i/2EUaKnrpRkLehJempAp06f/a99c92b3282e79e42b16877c98cac1c9/Uploaded_from_Streamlining_a_React_Monorepo)

## Generating a Feature Library

[Generating libraries](https://nx.dev/latest/react/structure/library-types#feature-libraries) in an Nx workspace is done by using the `generate` command with the Nx CLI. Feature libraries are used to display UI to the user, which could including routing information, and could use other libraries such as shared components.

Create one now by running:

```sh
nx generate lib people
```

**NOTE** [Nx Console](https://nx.dev/latest/angular/getting-started/console) also provides a full l GUI to run Nx CLI commands in your editor with native VSCode and WebStorm support.

## Generating a Data Access Library

A "data access" library is where functionality for fetching and storing data for a feature exists. So any services necessary to manage the quotes are placed in this library. Throughout building applications, there will be data access libraries across multiple features.

Create the data access library by running:

```sh
nx generate lib data-access
```

**NOTE** You can also create your custom generators similar to the `library` generator inside an Nx workspace. This provides more flexibility to create more standards around your development processes and guidelines. Read more about workspace generators in our [Workspace Generators](https://nx.dev/latest/angular/generators/workspace-generators) guide.

Update the data-access library to fetch the characters from the Star Wars API.

Open up `data-access.tsx` and replace it with the following:

```js
import { useEffect, useState } from "react";

export interface IPerson {
 birth_year: string;
 eye_color: string;
 films: string[];
 gender: string;
 hair_color: string;
 height: string;
 homeworld: string;
 mass: string;
 name: string;
 skin_color: string;
 created: Date;
 edited: Date;
 species: string[];
 starships: string[];
 url: string;
 vehicles: string[];
}

export interface Response<T> {
 count: number;
 next: null | string;
 previous: null | string;
 results: T[];
}

export function usePeople(page: number) {
 const [people, setPeople] = useState<IPerson[]>([]);

 useEffect(() => {
   fetch(`https://swapi.dev/api/people/?page=${page}`).then((r) =>
   r.json().then(data => data.results)
 ).then(data => {
     setPeople(data);
   });
 }, []);

 return people;
}
```

Now update the people feature at `people.tsx` to list out the characters:

```js
import { usePeople } from '@sw-org/data-access';
import './people.module.css';

export function People() {
 const people = usePeople(1);
  return (
   <div>
     <h1>Star Wars People</h1>

     <ul>
       {
         people.map(person => (
           <li key={person.name}>
             {person.name}
           </li>
         ))
       }
     </ul>
   </div>
 );
}

export default People;
```

Replace the `App` template with the `People` component

```js
import styles from './app.module.css';

import { People } from '@sw-org/people';

export function App() {
 return (
   <div className={styles.app}>
     <People/>
   </div>
 );
}

export default App;
```

Refreshing the application shows a list of characters.

![](https://images.ctfassets.net/23aumh6u8s0i/3wmVIH8Sqz1ejavorzIzsI/99c44e96e4e44149da2e72e5e328baad/Uploaded_from_Streamlining_a_React_Monorepo)

The list of characters is simple. The business and data logic is kept in libraries. As your applications grow, the number of libraries grows along with it, but the applications remain relatively small and are only used for integrating core functionality for the app to run.

## Dependency Graph

Nx knows the dependencies between projects in your workspace and can generate your dependency graph visually at any point in time. 

Run the **nx dep-graph** command to see the current state of the workspace.

```sh
nx dep-graph
```

This displays the application, E2E project, and the two libraries. 

![](https://images.ctfassets.net/23aumh6u8s0i/4oiIpWdF5wIpz6y5qJkGA4/9a8802092e0de9c1a0e5c9e25d9828d7/Uploaded_from_Streamlining_a_React_Monorepo)

**NOTE**: You can also have the dependency graph auto-refresh with the `--watch` flag.

You can also see what projects are impacted by a given change. Make a change to the App.tsx, such as removing the `className`, save, and run the **nx affected:dep-graph** command.

```sh
nx affected:dep-graph
```

This displays the **myapp** and **myapp-e2e** highlighted in red as affected projects.

![](https://images.ctfassets.net/23aumh6u8s0i/2S5DueXJUNdbbguneKUjGJ/cc397167e5dc78a1835ab2db57b6dacb/Uploaded_from_Streamlining_a_React_Monorepo)


**NOTE:** The **myapp-e2e** application is directly tied to mapp, but is implicitly linked through the **nx.json** file. Read more about Nx configuration here.

### Using Affected Commands

Nx provides affected commands to run certain tasks against affected projects. For example, make a change to the `data-access` library, and run **nx affected:build**. 

```sh
nx affected:build
```

Nx finds the affected applications impacted by changing the **data-access **library and runs the **build** target for each one of them. That way, **only** the affected projects are built for the given change, and not every project in the monorepo. The same commands work for **test**, **lint**, and **e2e**, and others.

There is also the **nx affected** command that works with any defined target. The alias for **nx affected:build** is:

```sh
nx affected --target=build
```

This allows you to run any target based on the affected projects.

### Using Computation Caching

Along with affected commands, Nx supports[ computation caching](https://nx.dev/latest/angular/core-extended/computation-caching) to never execute the same computation twice. This computation cache is pluggable and can be distributed. Taking `**myapp`** as an example, run the build for `myapp` twice.

```sh
nx build myapp
```

When running the same command the second time without changes, you immediately get the cached results from the previous computation. The computation cache is done locally, but can also be distributed and extended to the rest of your team and organization. 

[Nx Cloud](https://nx.app) is one such option to distribute your computation cache. It includes a free tier with 5 hours of saved time per month, enterprise options, and is free for open-source projects.

## Summary

Nx provides modern tooling including code analysis, code generation, code analysis, affected commands, and computation caching to scale your application development using a monorepo.

What did we cover?

- Monorepos and why you should use one
- Nx workspace structure and standardization
- Smarter tooling with code analysis, affected commands, dependency visualization, and computation caching.

Find out more with the following resources:

* Documentation at [https://nx.dev](https://nx.dev)
* Free [Egghead course](https://egghead.io/playlists/scale-react-development-with-nx-4038) on Scaling React Development

Streamlining a React Monorepo

Matt Duench

Matt is a product marketer that loves helping people solve complex identity-related challenges through technology. As the Senior Director of Product Marketing at Auth0, he is focused on helping companies deliver a customizable balance of convenience, security, and privacy to their end-users through identity.

Senior Director, Product Marketing

Learn how a low-code approach can help organizations save time and money on software development.

As [more customer interactions move online](https://www.mckinsey.com/business-functions/marketing-and-sales/our-insights/a-global-view-of-how-consumer-behavior-is-changing-amid-covid-19) post-2020, [a recent report from McKinsey](https://www.mckinsey.com/business-functions/strategy-and-corporate-finance/our-insights/how-covid-19-has-pushed-companies-over-the-technology-tipping-point-and-transformed-business-forever) suggests that organizations must “recognize technology’s strategic importance as a critical component of the business, not just a source of cost efficiencies” if they haven’t already.

However, rapid digital transformation is easier said than done for most organizations, given most are [already struggling to find enough tech talent](https://www.daxx.com/blog/development-trends/software-developer-shortage-us). And it’s why more organizations are turning to low-code development to help them deliver the digital experiences their customers now demand.

Below is what executives need to know about low-code and how it can help them save time and money on software development.

## What Is Low-Code Development?

Low-code is an approach to software development that reduces the amount of custom coding required to build an application by incorporating drag-and-drop interfaces, process modeling, reusable code templates, and [software development kits](https://auth0.com/blog/what-is-an-sdk/) (SDKs) into the software development process.

Low-code platforms do not replace the job of a software developer but rather make app development faster by providing developers and non-developers with prebuilt sections of code they can assemble (either visually or in a traditional development environment) instead of hand-coding every line.

### Low-Code vs. No-Code

The terms “low-code” and “no-code” are often used interchangeably. But in practice, they’re two separate approaches to software development.

* **No-code development** eliminates the need for coding altogether by making the entire application design process a visual drag-and-drop experience. As a result, anyone can use a no-code platform to build an application or website. However, the accessibility of no-code development usually limits the functionality a user can build into their application based on the prebuilt capability of the editing environment.
* **Low-code development** also makes the development process more accessible to non-developers. But low-code platforms are still primarily designed for professional developers because they do not completely eliminate the need for coding skills. Low-code development platforms offer greater flexibility than no-code platforms, but they also require a higher technical aptitude to fully implement a functional application.

[Adalo](https://www.adalo.com/) is an example of a no-code platform because it allows anyone to build a mobile app by dragging and dropping elements inside its editing environment. But a platform like [Retool](https://retool.com/) is considered a low-code tool since it still requires developers to write custom code to build a functional internal business tool.

## The Benefits of Low-Code Development

Low-code development can save businesses [hundreds of development hours,](https://retool.com/blog/avo-story/) cut their development times [by 50-90%](https://www.redhat.com/cms/managed-files/mi-451-research-intelligent-process-automation-analyst-paper-f11434-201802.pdf) compared to developing an application from scratch with custom coding, and reduce their IT spends by [as much as 20%](https://www.appian.com/resources/nucleus-research-low-code-application-platforms-lcap-technology-value-matrix-2020/). As a result, it helps solve several common challenges that hinder digital transformation efforts for many organizations.

### Improved Agility

Low-code development shortens the Software Development Lifecycle (SDLC), which helps your organization respond to market or business changes faster than you’d be able to if your development team had to code everything from scratch.

Low-code also makes it easier to incorporate non-developers into the development process, which is something most highly agile businesses are good at, according to [PMI](https://www.pmi.org/-/media/pmi/documents/public/pdf/learning/thought-leadership/achieving-greater-agility-series/vital-role-culture-commitment.pdf?sc_lang_temp=en&utm_source=&utm_medium=&utm_campaign=&utm_term=&utm_content=). For example, since low-code software development is visual, a developer can [spin up a sample app](https://flows.auth0.com/) for business teams to evaluate much faster than they could with custom coding, which shortens the feedback loop and helps improve the finished product.

### Smaller Project Backlogs

Many enterprises have [project backlogs that cost them billions of dollars](https://www.techrepublic.com/article/low-code-platforms-help-with-project-backlogs-and-software-development-training/) in sales opportunities because they can’t find the right talent or software to address business opportunities fast enough. Low-code can help reduce costly backlogs because it helps your development team(s) [get more done](https://www.appian.com/resources/nucleus-research-low-code-application-platforms-lcap-technology-value-matrix-2020/) in less time.

### Increased Scalability

Low-code development turns application elements like user interfaces, integrations, and custom logic into visual building blocks that developers can reuse anywhere by dragging and dropping them into the design interface. Depending on the platform, a low-code approach often simplifies the work required to scale and maintain custom applications across an entire enterprise or for millions of customers, since a developer can build something once and implement it everywhere [in minutes](https://auth0.com/case-studies/cimpress/).

### More Developer Time For Innovation

According to [a global study by Stripe](https://stripe.com/files/reports/the-developer-coefficient.pdf), nearly 75% of the average developer’s week is spent on maintenance and dealing with technical debt. Since low-code development helps simplify the work required to scale and maintain software, it reduces the burden of updating legacy systems and the accrual of technical debt in the first place.

As a result, low-code can free up developer time for higher-value projects, like finding ways to innovate for your employees (which helps reduce their need to find their own software solutions ([shadow IT](https://en.wikipedia.org/wiki/Shadow_IT))) or customers.

## Low-Code Development Use Cases

Low-code development is a broad term that covers a lot of different use cases. Although most commonly used via standalone platforms for application development, low-code tools can also be incorporated into platform-as-a-service (PaaS) or other software-as-a-service (SaaS) solutions to reduce the time developers need to build applications or integrate services into their business apps. Below are the most common places low-code can help you save time and money on development costs.

### Websites

Many website builders are both a no-code and a low-code environment. For example, [Webflow](https://webflow.com/no-code) allows a user to design a website without any coding at all. But it also[ offers the option](https://webflow.com/blog/webflow-custom-code-tips) to inject HTML, CSS, and JavaScript into a site to customize it beyond what its no-code environment allows.

### Internal Business Applications

Not only does low-code development free up developer time to build internal apps or dashboards for business users, but it also helps developers build and scale those internal software solutions more effectively. For example, low-code automation platforms (LCAPs) help organizations turn business processes and tasks into automated software workflows [faster than coding them from scratch](https://www.appian.com/).

### Customer-Facing Applications

Low-code platforms often reduce the amount of time required to bring a web application or mobile application to market, as well as help businesses incorporate end-user feedback to improve those applications [faster](https://www.mendix.com/customer-stories/suez/).

### Replatforming

Low-code PaaS solutions make it easier to replace or upgrade critical components of your legacy systems with cloud-based solutions rather than trying to code everything from scratch.

For example, Auth0 [Marketplace](https://marketplace.auth0.com/),[ Actions](https://auth0.com/docs/rules), [Universal Login editor](https://auth0.com/docs/universal-login/universal-login-page-customization), and [SDKs](https://auth0.com/docs/libraries) with sample code for many technology platforms all save developers [hundreds of hours](https://auth0.com/case-studies/gymshark/) required to implement user-friendly authentication features while ensuring compliance with important data security standards (for example, [HIPAA](https://auth0.com/learn/why-hipaa-compliance-is-vital-your-business/) or [ISO 27001](https://auth0.com/blog/what-is-iso-27001-2013-a-guide-for-businesses/)).

## Consider Making Low-Code a Part of Your Strategy

Low-code can reduce the need for custom coding and allow developers to focus more of their time on the things that make their products unique rather than common (but necessary) tasks like identity. 

It’s why we continue to invest in low-code development tools for Auth0’s platform: to ensure developers can integrate identity quickly and get back to high-value tasks that will help your business grow.

Learn more about how Auth0 designs for developer experience using low-code, no-code, and pro-code [here](https://auth0.com/blog/designing-for-devs-at-auth0/).

<include src="asides/AboutAuth0" />

What Is Low Code? How Low Code Can Speed Digital Transformation

michael-bui

I'm a software developer with a background in consulting and experience in technical leadership roles. The majority of my career has been with using .NET to build applications across the full-stack and for mobile, desktop, and web. My main area of interest is in agile software development and building cross-platform applications using technologies like Flutter and Xamarin.Forms.

These days I do more work using Flutter. Besides using it professionally to build applications, I've done a talk at a meetup, maintain a blog where I post about Flutter in <a href="https://dexterx.dev">DexterX</a> and contribute to and maintain various open-source projects.

Sofware Developer

Michael Bui

Learn the basics of the Flutter development kit and the Dart programming language and build an app to manage your shopping wishlist.

Build a Flutter Wishlist App, Part 1: Introducing Flutter and Building a Basic Wishlist App

df6c864847fba9687d962cb80b482764?size=200 avatar

df6c864847fba9687d962cb80b482764?size=200

Martin Gontovnikas, a.k.a Gonto, is a software engineer at heart who moved to the ‘dark side’ and became VP of Marketing at Auth0. He considers himself lucky to have found a way to combine his two passions and apply his engineering thinking model to marketing.<br/><br/> Gonto’s analytical thinking is a huge driver of his data-driven approach to marketing strategy and experimental design. He is based in the Bay area, and in his spare time, can be found eating gourmet food at the best new restaurants, visiting every local brewery he can find, or traveling the globe in search of new experiences.

Former SVP of Marketing and Growth at Auth0

Martin Gontovnikas

SDKs are the building blocks of app development. Here’s what non-devs need to know.


If your company is building or adding functionality to an app, you’ve probably heard your developers throw around the term “SDK.” SDK stands for software development kit (sometimes called a devkit). As the name suggests, it’s a set of tools and instructions developers use to build apps. SDKs save developers from having to do every tedious bit of coding themselves. They help standardize the development, so apps can work more easily on different hardware, operating systems, and in cooperation with other apps.

So, why does this matter if you’re not a software developer? Because your app’s architecture is directly related to its business value, and when you choose what components to use (Stripe vs. PayPal for payments, for example), your choice should be informed by SDKs. Here, we’re providing a basic rundown of what SDKs are, how they work, and how to compare them by quality.

![Software Development Kit (SDK)](https://images.ctfassets.net/23aumh6u8s0i/4CwkOwiiy1BCqn6ujWqcHH/869a036997c632bd7ec1d5a05d013a56/what_is_an_sdk_sep1.jpeg)

## Software Development Kit (SDK) Definition and Examples

An SDK is a toolkit that app developers use to build apps using some prebuilt components instead of having to build each of those components themselves. SDKs are designed to work with specific operating systems, hardware, or computing languages.

Here’s a real-world analogy &mdash; if you’re trying to build a bookshelf, an SDK would be everything in the box you get from IKEA: prebuilt parts, tools, and instructions on how to put it all together. To build a desk without an SDK, you’d have to go into the forest and chop down your own lumber using an ax you built yourself.

For example, if you’re creating a mobile app, you’ll need to download [Apple’s iOS SDK](https://developer.apple.com/ios/). This gives you access to whichever iPhone tools you want to use in your app, like connecting to the camera, the Siri interface, or enabling push notifications. Likewise, if you want to implement Auth0’s platform on both your mobile and web apps, you’d download the [iOS SDK, Android SDK, and web SDK](https://auth0.com/docs/libraries).

### What’s in an SDK?

Virtually all SDKs contain a few basic ingredients:

* **Code libraries**: This is the raw code that developers plug in to make the app do what they want it to do.
* **Application programming interfaces (APIs)**: These allow the app to easily connect to other services (more on this later).
* **Integrated development environment (IDE)**: This is the interface through which developers do their programming. It includes a compiler, which translates the high-level programming language of the SDK’s source code into a lower-level language that can be used to build applications.
* **Documentation**: These are the instructions that explain how developers should use the code. Clear, thorough documentation is an important criterion for a good SDK.
* **A debugger**: Debugging automatically corrects minor errors, smoothing out the app development process.
* **Code samples**: These get developers started by giving them some examples of the code in action and helping them use it in simple ways.

Some SDKs also include tutorials and other support tools.

### Types of SDKs

Most apps are built with a variety of SDKs; for example, [a 2019 study](https://www.safedk.com/Full_SDKs_Report/SafeDK_Yearly_Report_PR) found that the average Android app uses 18.2 SDKs. Some SDKs optimize an app for a specific device or operating system, and some let developers insert various tools.

* **SDKs by hardware**: SDKs aren’t just for web and mobile apps; they’re also used for programming in the Internet of Things (IoT). So if you purchase a set of solar panels, for example, the hardware provider might include an SDK, so developers can program them as desired.
* **Mobile device operating system**: As we mentioned, designing an app that works on both Android and Apple phones requires an SDK for each.
* **Programming language for web apps**: Developers need SDKs that let them build web apps in the programming language they choose, like Python, Ruby, JavaScript, or PHP.
* **Open source SDKs**: These SDKs are free to use and invite developers to modify them as they choose. This can confer advantages when it comes to customizability but may also introduce security risks.
* **Proprietary SDKs**: Unlike open source SDKs, proprietary or commercial SDKs require a license to use and don’t permit developers to change the source code.

![Software Development Kit (SDK)](https://images.ctfassets.net/23aumh6u8s0i/10vNfM1MrOlWCv6uHP2gtG/0d77df8932d739e39e1548ed5ab035f5/what_is_an_sdk_sep3.jpeg)

## SDKs Versus APIs

It’s easy to be confused by the difference between an SDK and an [API](https://auth0.com/blog/the-business-value-of-api-first-design/), but the distinction is both simple and crucial.

APIs are the parts of code that communicate between two pieces of software. So, if you’re building a ride-sharing app, you need APIs that connect it to a user’s phone and messaging capabilities, payment platform, and GPS. All these elements might have different back ends, but an API lets them communicate and provide a seamless user experience.

The majority of SDKs contain APIs, so developers can build apps that are designed for easy connectivity. Without APIs, connecting apps is a little like that famous scene from _Apollo 13_.

![Apollo 13](https://images.ctfassets.net/23aumh6u8s0i/3Yc8lnrHv61Z8JFltALUEh/4ca3d13eac2efb9983082b509f3c38be/the_apollo_13)

But it’s not as simple as saying that APIs are components of SDKs since you can use an API without an SDK. And in some cases, developers have to choose between using an SDK or an API to handle integration with a particular service. The advantage of an SDK is that it’s simpler and faster to integrate (like the IKEA desk; most of the work is already done for you). The advantage of an API is that it’s leaner (not full of code libraries for functionalities you don’t need), and there’s more room for customization (if you build your own desk, you can design it to whatever dimensions you’d like).

## The Elements of a Good SDK

If you’re building an app, chances are you’ll use SDKs for some of your functionality, like payment, messaging, or authentication. Those components are extremely difficult for developers to build in-house, and any errors can lead to major security issues. When you’re choosing which provider to use for those services, you’ll compare prices and features, but you should also be comparing their SDKs.

Here’s what to look for in a good SDK:

* **Lightweight**: You want an SDK that does what you need it to do with as little code as possible. Otherwise, a mobile app can eat up too much space on a user’s phone, and the apps will run more slowly. If you’re [replatforming or rearchitecting a legacy app](https://auth0.com/blog/what-is-replatforming/), it’s worth looking at how much code your existing solutions use and whether an SDK would be more lightweight. For example, [Auth0 customer Kiva](https://auth0.com/case-studies/kiva-implements-auth0-rules-mfa/) was able to eliminate over 20,000 lines of legacy code by switching to Auth0 for authentication.
* **Good documentation**: Two SDKs could be virtually identical, but if one has thorough documentation that shows developers how to use it, and the other leaves them on their own, then they’re hardly equal. In fact, this issue is one of the most common reasons Auth0 customers give for choosing us over our competitors.
* **Customizable**: Some SDKs are resistant to customization, meaning you can only implement them with their out-of-the-box settings. That’s an issue if your developers want to tweak a product for their unique needs or insert original branding or graphics.
* **Secure**: It’s essential to use SDKs that come from trusted sources to ensure that you’re not unwittingly inserting malicious or otherwise unwanted code into your app. In [SafeDK’s](https://www.safedk.com/Full_SDKs_Report/SafeDK_Yearly_Report_PR) report, “58% of the examined apps still have at least 1 SDK that accesses private user data.” In the age of data privacy laws, this collection may get your app into legal hot water.
* **Easy to use**: A good SDK should provide tutorials and sample code and also let developers connect to a trusted community or support services if they run into any problems.

![Software Development Kit (SDK)](https://images.ctfassets.net/23aumh6u8s0i/3ovyxvZGWIfQm234oYlkgN/f3c2daac9bdb0d4873e80e0f978facf8/what_is_an_sdk_sep2.jpeg)

## SDK: Not Just Another Confusing Acronym

Any company building new applications or adding new features will use SDKs as part of the development process. But SDKs aren’t just esoteric programming concepts; they have a direct impact on an app’s security, customizability, and time to market. If you’re not an app developer, you don’t need to understand the finer points of those discussions, but you do need to be able to ask the right questions.

<include src="asides/AboutAuth0" />


What Is an SDK?

auziros:jeana-tahnk

Jeana has been in the tech industry for 15+ years, both as a communications professional and writer. As Director of Global Communications at Auth0, she works with her internal team and external agencies to amplify the company's visibility worldwide and establish its leadership in the identity industry. When she is not working, she can most likely be found on a field watching one of her three kids playing sports, or cleaning up after her one-year-old retriever who chews everything.

Senior Director, Global Communications

Jeana Tahnk

New survey reveals behaviors and usage patterns of application builders; authentication required in 83% of applications built



**BELLEVUE, Wash. – May 19, 2020 –** The [Auth0](https://auth0.com/) Identity Platform, a product unit within Okta, today released a [**2020 State of Application Assembly**](https://auth0.com/resources/whitepapers/state-app-assembly-2020) survey, revealing that a majority of development teams are turning to best-in-class SaaS services and the adaptability of APIs for building unique features and functionalities into the many apps they are responsible for each year.

Surveying 426 global technical professionals across a variety of roles (developers, engineers, CTOs, directors of engineering, software architects) and company sizes, Auth0 determined that 51% of respondents are responsible for building two to five apps per year, and more than a quarter (28%) build 6-10+ apps per year, with three-quarters of these apps being used for external audiences. There are currently more than 4.1 million apps available on leading app stores ([Statista](https://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores/)), indicating the staggering amount of development these builders are responsible for. 

The survey explored application builder behavior around several services and key findings included: 

* For applications that required payment, 74% of respondents outsourced, with Stripe being the dominant tool of choice.
* For applications that required messaging, 71% outsourced this solution, with Twilio being the highly preferred tool.
* The third service explored was authentication, cited as a requirement in 83% of applications built. However, the numbers for outsourcing authentication were lower than the other two services, with respondents outsourcing 58% of the time. 

With a substantial percentage of companies still building authentication tools in-house – and because authentication is present in the majority of apps – there’s a large potential opportunity for application building teams to streamline their processes and improve efficiency by using a third-party IDaaS tool. 

The accelerated timelines that come with app launches are driving teams away from in-house development and towards microservices – app ‘building blocks’ – that provide features and functionality that would be nearly impossible to build and maintain themselves. Relying on third-party services that are adaptable to their specific needs, significantly frees the team’s resources to focus on core innovation and speed-to-market. 

“These results confirm a trend of application development teams increasingly relying on first- and third-party APIs and external SaaS services when assembling apps, to simultaneously decrease time-to-market and increase completeness and security,” said Martin Gontovnikas, SVP of Marketing and Growth at Auth0. “Whether it’s payments, messaging, or authentication, this survey shows that teams are turning more to a ‘must-have SaaS stack’ to expedite development and enable them to focus on their core product.” 

The move to outsource services that are proven and fully adaptable gives application teams a competitive edge in innovation and implementation. By 2022, 90% of all apps will feature microservices architectures that improve the ability to design, debug, update, and leverage third-party code. Combined with agile/DevOps approaches and methodologies, enterprises can dramatically accelerate their ability to push out digital innovation – at 50-100x (or more) the frequency of traditional approaches ([IDC](https://www.idc.com/getdoc.jsp?containerId=prUS44417618)).

Please visit the [State of Application Assembly](https://auth0.com/resources/whitepapers/state-app-assembly-2020) for further details and to view all survey results.


<include src="asides/AboutAuth0" />

### Media Contacts
Jeana Tahnk<br>
Auth0 Global Communications<br>
[press@auth0.com](mailto:press@auth0.com)

Hannah Carroll<br>
Matter for Auth0<br>
[auth0@matternow.com](mailto:auth0@matternow.com)


Majority of Application Development Teams Rely More On SaaS Services vs. Building In-House

sambiopic

I'm Director of Developer Relations and a Google Developer Expert for Angular and Web Technologies. I believe anyone who wants to learn to code should be able to learn code and I love teaching. When I'm not coding or writing, you'll find me outside hiking or camping in the beautiful Pacific Northwest.

Director of Developer Relations

Sam Julien

NgRx 8 features improved developer ergonomics, less boilerplate, runtime checks, and easier error handling.


**TL;DR:** NgRx 8 introduces a host of improvements, including `createAction`, `createReducer`, and `createEffect`. These helper functions drastically reduce (no pun intended) boilerplate, which boosts developer productivity.

## NgRx 8: A Massive Win
Shortly after the [release of Angular 8](https://auth0.com/blog/angular-8-differential-loading/), the NgRx team released their own version 8. It was a big release full of fantastic improvements to the library. While I'll let you read the [official release announcement](https://medium.com/ngrx/announcing-ngrx-version-8-ngrx-data-create-functions-runtime-checks-and-mock-selectors-a44fac112627) by [Tim Deschryver](https://twitter.com/tim_deschryver), here are the highlights:

- [`angular-ngrx-data`](https://github.com/johnpapa/angular-ngrx-data) by [John Papa](https://twitter.com/John_Papa) and [Ward Bell](https://twitter.com/wardbell) is now officially part of NgRx as [`@ngrx/data`](https://github.com/ngrx/platform/tree/master/modules/data)
- [Runtime checks](https://ngrx.io/guide/store/configuration/runtime-checks) are now available to check that state and actions aren't mutated and are serializable (these replace the `ngrx-store-freeze` package)
- Fully isolated unit tests are now available thanks to [mock selectors](https://ngrx.io/guide/store/testing#using-mock-selectors)
- There have been a couple of improvements to `@ngrx/router`, including a new [minimal `routerState` option](https://next.ngrx.io/guide/router-store/configuration)
- There are now NgRx snippets in John Papa's [Angular Snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) VS Code extension
-  [Alex Okrushko](https://twitter.com/AlexOkrushko) and [Wes Grimes](https://twitter.com/wesgrimes) have joined the NgRx team (well deserved!)
  
I've saved the best for last, though, and it's the subject of this article:

- `createAction`, `createReducer`, and `createEffect` helper methods *drastically* reduce boilerplate and improve development time

We're going to dig into what that means and how these functions will make your life better, but before we do that, we should make sure you know how to update to version 8 to take advantage of these new features.

<include src="TweetQuote" quoteText="NgRx 8 features improved developer ergonomics, less boilerplate, runtime checks, and easier error handling!"/>

## How to Update to NgRx 8
In order to update to NgRx 8, you'll need to be sure your project is updated to Angular 8. You can update your Angular CLI globally by running this command:

```bash
npm install -g @angular/cli
```

In a project that needs to be updated to Angular 8, you can run the following:

```bash
ng update @angular/cli @angular/core
```

You can then run the following to update to NgRx 8:

```bash
ng update @ngrx/store
```

When working on this article, I ran into a bit of a problem with the TypeScript version. It seems like there was a conflict between the required versions, so I had to manually lock in version `3.4.3`.

If you're using `ngrx-data`, you can easily migrate to `@ngrx/data` with this command:

```bash
ng add @ngrx/data --migrate
```

For a more thorough explanation of this process, Wes Grimes has written a great article on how to [upgrade to Angular 8 and NgRx 8](https://dev.to/angular/how-to-upgrade-your-angular-and-ngrx-apps-to-v8-4iip). For more specific details on migration to NgRx 8, check out the official [migration guide](https://ngrx.io/guide/migration/v8). Finally, don't forget that Angular has an [official update tool](https://update.angular.io) to help with moving to new versions of Angular.

With that out of the way, let's get to the fun stuff!

## createExcitement: The New NgRx 8 Helper Functions
One of the most common complaints about NgRx (and the Redux pattern in general) is that there is too much boilerplate. Once you dig into the library and the pattern, though, you start to understand that the initial setup is a completely worthwhile investment when you're managing state in large, complex applications (which is what NgRx is designed for!).

That being said, the NgRx team has listened to the developer community and made some huge improvements in "developer ergonomics" (a fancy way to say making it easier to write code) with version 8. Most of these improvements are due to a refactor of how actions, reducers, and effects are set up. There are now helper methods that are easy to understand and take less code to write. Let's take each of them in turn.

### createAction
As my friend [Mike Ryan](https://twitter.com/MikeRyanDev) says, "Actions are the gluten of the NgRx loaf." Indeed, they are the core of any NgRx application. Great care and attention are required in deciding what actions your app needs. Unfortunately, actions take a lot of code to set up. Just look at this excerpt from the application we built in my original [NgRx Authentication](https://auth0.com/blog/ngrx-authentication-tutorial/) tutorial:

```typescript
// src/auth/actions/auth.actions.ts (excerpt)
export enum AuthActionTypes {
  Login = '[Login Page] Login',
  LoginComplete = '[Login Page] Login Complete',
  LoginFailure = '[Auth API] Login Failure'
}

export class Login implements Action {
  readonly type = AuthActionTypes.Login;
}

export class LoginComplete implements Action {
  readonly type = AuthActionTypes.LoginComplete;
}

export class LoginFailure implements Action {
  readonly type = AuthActionTypes.LoginFailure;

  constructor(public payload: any) {}
}

export type AuthActions =
  | Login
  | LoginComplete
  | LoginFailure;
```

This excerpt only contains three of the eight actions in that application and it's a very small app! As Alex Okrushko points out in his excellent article on [the new action creators](https://blog.angularindepth.com/ngrx-action-creators-redesigned-d396960e46da), enums and strings also make it very difficult to see where actions are used. And don't get me started on those union types! You can see why a change was needed.

Enter the new `createAction` method. With `createAction`, you pass in the action name along with an optional `props` function with a specified argument type as a destructured object. 

Yikes, that's a lot of jargon. Let me explain that with an example. 

Let's say I have an action called `booksLoaded` that needs to receive an array of books (`books`) of type `Book[]` when created. My `props` function for `createAction` would be `props<{ books: Book[] }>()`. (With [destructuring](https://auth0.com/blog/a-rundown-of-es6-features/#ECMAScript-2015-Features), `{ books }` is the equivalent of `{ books: books }`.)  

```typescript
export const booksLoaded = createAction(
  '[Books API] Books Loaded', 
  props<{ books: Book[] }>()
  );
```

That way, when I create a new action of this type, I can directly pass the array of books into the constructor: `new booksLoaded({ booksFromServer })`.

So, the above authentication actions would be refactored like so:

```typescript
export const login = createAction('[Login Page] Login');

export const loginComplete = createAction('[Login Page] Login Complete');

export const loginFailure = createAction(
  '[Auth API] Login Failure', 
  props<{ error: any }>()
);
```

Mind-blowing, right?

There are two things to notice here. First, notice that the action constant names have gone from Pascal case (`LoginFailure`) to camel case (`loginFailure`). This is due to actions changing from classes to functions and is a standard JavaScript style convention. Don't let that trip you up, but be mindful of that in refactoring.

Second, notice that I renamed `payload` to `error` because it is more descriptive. (I could have also given it a new type like `Error`, but it doesn't matter much in this example). While this is a great new feature with the redesigned action creator function, be careful of doing this. Do a search through your code to avoid breaking other parts of the app relying on a `payload` property (a great reminder from [Gregor Woiwode](https://medium.com/@gregor.woiwode/ngrx-8-meet-the-new-upcoming-factory-methods-of-the-next-major-release-a97a079cc089)). If you rename `payload` in the action creator, be sure to change it everywhere.

There's one last great feature of the new action creators. You can now specify a default value of a `prop` argument. For example, in the above `loginFailure` action, I could provide a default error message:

```typescript
export const loginFailure = createAction(
  '[Auth API] Login Failure',
  (errorMessage = 'Error logging in') => ({ payload: { errorMessage }})
);
```

This would be a great backup in case the server fails to provide an error message for some reason.

To add one of these new action creators to your application, you can use the [updated action schematic](https://ngrx.io/guide/schematics/action):

```bash
ng generate @ngrx/schematics:action myNewAction --creators
```

This command will generate a new file called `my-new-action.actions.ts` containing a constant named `loadMyNewAction` using the `createAction` function.

<include src="TweetQuote" quoteText="The new action creators of NgRx 8 drastically reduce (no pun intended) development time when adding new features!"/>

### createReducer
The new way to create actions is incredible, but it doesn't stop there. Reducers are also now easier to write thanks to the `createReducer` method.

Here's a typical example of a reducer you might find in a burger restaurant app:

```typescript
export function reducer(
  state = initialState,
  action: BurgerApiActionsUnion
): State {
  switch (action.type) {
    case BurgerApiActionTypes.LoadBurgerCollection: {
      return { 
        ...state
        loading: true
      };
    }

    case BurgerApiActionTypes.LoadBurgersSuccess: {
      return { 
        loaded: true,
        loading: false,
        ids: action.payload.map(burger => burger.id)
      };
    }

    default: {
      return state;
    }
  }
}
```

This is a simple example, but as it scales up, you'll have a ton of case statements that will make understanding this code difficult. It gets messy fast (just like eating burgers, really).

With NgRx 8, you can use `createReducer` instead:

```typescript
const burgerReducer = createReducer(
  initialState,
  on(BurgerApiActionTypes.loadBurgerCollection, state => ({
    ...state,
    loading: true
  })),
  on(BurgerApiActionTypes.loadBurgersSuccess, (state, { burgers }) => ({
    loaded: true,
    loading: false,
    ids: burgers.map(burger => burger.id)
  }))
);
```

Much cleaner, isn't it? Each case uses the `on` function that receives the action and a function to modify state. 

The `on` function can also take multiple actions, making it easy to grow the reducer function. For example, it's common for the success of a record addition and the failure of a record deletion to result in the same state. An example of this is when an app state includes both a collection of data (which should match what's on the server) and an array of IDs for faster lookup (which is maintained in memory). In order to make sure the array of IDs always matches what's on the server, it's necessary to account for failures of adding or deleting records.

Here's an example of that with the burger application:

```typescript
const burgerReducer = createReducer(
  // ...other cases,
  on(
    CollectionApiActions.addBurgerSuccess,
    CollectionApiActions.removeBurgerFailure,
    (state, { burger }) => {
      if (state.ids.indexOf(burger.id) > -1) {
        return state;
      }
      return {
        ...state,
        ids: [...state.ids, burger.id],
      };
    }
  ),
  on(
    CollectionApiActions.removeBurgerSuccess,
    CollectionApiActions.addBurgerFailure,
    (state, { burger }) => ({
      ...state,
      ids: state.ids.filter(id => id !== burger.id),
    })
  )
);
```

Using the same reducer cases for multiple actions makes it easier to understand what's happening in this application in addition to ensuring the `ids` array doesn't get out of sync with the server.

One other important note on using `createReducer`. As of this writing, the Angular ahead-of-time (AOT) compiler (the compiler used for producing production builds) [does not support function expressions](https://angular.io/guide/aot-compiler#function-calls-are-not-supported). It's therefore necessary to wrap the `createReducer` function in an exported function like so:

```typescript
export function reducer(state: State | undefined, action: Action) {
  return burgerReducer(state, action);
}
```

Finally, as with `createAction`, there's a [schematic for the new reducer style](https://ngrx.io/guide/schematics/reducer):

```bash
ng generate @ngrx/schematics:reducer myNewReducer --creators
```

This schematic will generate a new file called `my-new-reducer.reducer.ts`. It will include both the `createReducer` constant and the exported `reducer` function for AOT.

### createEffect
Finally, `createEffect` is here to improve writing effects. Previously, effects used an `@Effect()` decorator. While this was fine, it was sort of the odd bird compared to all of the other more functional approaches NgRx takes.

Going back to the burger application, here's an example of the old style of effect: 

```ts
@Effect()
loadBurgerCollection$ = this.actions$.pipe(
  ofType(BurgerApiActionTypes.LoadBurgerCollection),
  switchMap(() =>
    this.burgerService.getAllBurgers().pipe(
      map((burgers: Burger[]) =>
        BurgerApiActions.LoadBurgersSuccess({ burgers })
      ),
      catchError(error =>
        of(BurgerApiActions.LoadBurgersFailure({ error }))
      )
    )
  )
);
```

The new `createEffect` helper simplifies this a bit and standardizes it to look more like creating actions, reducers, and selectors:

```typescript
loadBurgerCollection$ = createEffect(() =>
  this.actions$.pipe(
    ofType(BurgerApiActionTypes.loadBurgerCollection),
    switchMap(() =>
      this.burgerService.getCollection().pipe(
        map((burgers: Burger[]) =>
          BurgerApiActions.loadBooksSuccess({ burgers })
        ),
        catchError(error =>
          of(BurgerApiActions.loadBooksFailure({ error }))
        )
      )
    )
  )
);
```

> Remember, the actions have changed from Pascal case to camel case since they've changed from classes to functions.

There's also a small modification in effects that don't dispatch new actions. Here's an effect that fires after a burger is successfully ordered, which redirects back to the home page and doesn't dispatch a new action:

```typescript
@Effect({ dispatch: false })
orderBurgerSuccess$ = this.actions$.pipe(
  ofType(BurgerApiActions.OrderBurgerSuccess),
  tap(() => {
    this.router.navigate(['/']);
  })
);
```

Using the new `createEffect` function, you can refactor this code to the following:

```typescript
orderBurgerSuccess$ = createEffect(() => 
  this.actions$.pipe(
    ofType(BurgerApiActions.LoginSuccess),
    tap(() => this.router.navigate(['/']))
  ),
  { dispatch: false }
);
```

That second argument of the `createEffect` function is for passing in metadata to control how the effect operates.

One final word on effects in NgRx 8. Previously, the team found that developers were either forgetting to handle errors in their effects or handling them incorrectly. To help with this, effects now automatically resubscribe on errors (instead of completing) so they continue to listen to dispatched actions. This is extremely helpful but it can also be disabled if you start noticing weird behaviors. Simply pass `{ resubscribeOnError: false }` as the second argument of the `createEffect` function. 

As with the other two examples, there's a [schematic to add the new style of effect](https://ngrx.io/guide/schematics/effect) to your application:

```bash
ng generate @ngrx/schematics:effect myNewEffect --creators
```

This command will generate a new file called `my-new-effect.effects.ts` that imports `createEffect` and creates a class marked with the `Injectable` decorator.

## Aside: You Might Need Authentication (Even Though "You Might Not Need NgRx")
Most applications these days are going to need some sort of identity management to persist user profile information and handle authentication and authorization. To implement an identity management strategy in your NgRx application, some of the syntax has changed with version 8, but the core principles remain the same. You'll use actions for logging in and logging out and effects for calling your authentication service, while your reducer handles modifications to state like logged in status and profile attributes.

I cover this at length in my [NgRx authentication tutorial](https://auth0.com/blog/ngrx-authentication-tutorial/). Go ahead and <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">sign up for a free Auth0 account</a> and dig in to the tutorial to get started.

![Auth0's Lightweight Universal Login modal window](https://images.ctfassets.net/23aumh6u8s0i/54lZ5srDBAM0dqWSRkdxXk/f4260dcf2af6e7b5b4a52c62769e0745/lightweight-login)

By the way, I'd love to hear how it goes while using the new helper functions in version 8 of NgRx, so reach out on our [Community Forum](https://community.auth0.com/) any time.

## Conclusion
I don't know about you, but I couldn't be happier with NgRx 8. This is a team of volunteers who are making great software and even writing [phenomenal docs](https://ngrx.io/docs). With all of the improvements in this version, the future is looking bright. Give it a test drive and let me know how it goes!


Faster App Development with NgRx 8

Jose-Romaniello

I started working at Auth0 before the first line of code for our authentication platform existed. I’ve been able to go through the journey of seeing our ideas go from prototype to living production code that impacts millions of people. It’s satisfying to know that my actions here are having a positive impact in solving problems for developers like me.

Head of Engineering

Jose Romaniello

Learn how to apply the Scout code to software development to get code to a better state continuously.



When I was a kid, I practiced [_Scouting_](https://en.wikipedia.org/wiki/Scouting) for eight years I picked up a lot of excellent values and my scouting experiences helped to shape my character and make me a better programmer. Let me show you why.

As a Scout, you get to experience nature by camping outdoors which teaches you one of the core values — **respect life**. Scout rules help support core Scout values. One of the first rules I learned was:

> Always leave the campground cleaner than you found it.

This rule comes from a quote by [_Robert Baden-Powell_](https://en.wikipedia.org/wiki/Robert_Baden-Powell,_1st_Baron_Baden-Powell), founder and first [_Chief Scout_](<https://en.wikipedia.org/wiki/Chief_Scout_(The_Scout_Association)>) of [_The Scouts Association_](https://en.wikipedia.org/wiki/The_Scout_Association), and founder of the [_Girl Guides_](https://en.wikipedia.org/wiki/Girlguiding):

> Leave this world a little better than you found it.

What this rule represents is that you should not only pick up your trash, clean the area where you started a wood fire and the soil where you built your tent, but also you need to take a look at the campsite and do something to leave it better than it was before.

It is an explicit instruction. It helps you accept the notion that something can always be better. There’s always room for improvement. You had the opportunity to enjoy the area and its resources but you also have the opportunity to pay back by leaving the area in better shape for others.

I believe that when kids are taught this kind of values through games, repetition, and rewards, it becomes a habit. This is nominally known as [_positive reinforcement_](https://en.wikipedia.org/wiki/Reinforcement#Positive_reinforcement). Positive reinforcement takes place when a reward is presented as the result of certain behavior and the behavior increases. This trait has been embedded in my mind so that I don’t need to apply it consciously. It has become a behavioral reflex that integrates naturally in my day-to-day activities.

## The Codebase Is the Developer's Campsite

Even if I don't go camping often nowadays, I follow this rule in a lot of different situations in my life. One of them is in my daily work — programming!

Working on a new feature or a bug feels excellent. Working on a codebase change feels like camping as a Scout. It is an opportunity to:

- Experience the environment.
- Understand the problem.
- Put what I know in practice.
- Use my skills to create solutions.

The codebase will host me for hours or days. Even if I don't enjoy the codebase too much, I still have to respect it because other people have worked hard on it. It gives me an opportunity to learn new things and to possibly use tools I have never been exposed to before.

<include src="TweetQuote" quoteText="Even if we don't enjoy a codebase too much, we still have to respect it because other people have worked hard on it. We can work on taking little steps to improve it."/>

Once again, I have to assume that other people will get to "camp" in the project after me. People I haven't met yet and probably will never meet. They may be developers, project managers, even end-users. As thought leader and software craftsman [_Uncle Bob Martin_](https://twitter.com/unclebobmartin) says in his [_Scout Rule_](https://www.amazon.com/Things-Every-Programmer-Should-Know/dp/0596809484):

> “Indeed, the act of leaving a mess in the code should be as socially unacceptable as littering. It should be something that just isn't done.”

Therefore, not only my work in the codebase needs to be clean, but it should leave the code at least a little better than I found it.

These are some examples in which I have applied this improvement of the status quo within a project:

- It took me 30 minutes to understand what this function does. Can I rename it to something more declarative or expressive so that others can understand it quicker than I did?
- I wasn't able to run this project with the provided instructions. Can I write the instructions that I followed but are not documented in a README file?
- This code is more convoluted than it should be. Can I make it easier and clearer?
- This function doesn’t have enough tests. Can I add some tests?

These small improvements will help my teammates and myself later. The code is not going to end up perfect, but it will be better than it was before. By following this practice, the code grows in a better direction with every action that you take on it.

<include src="TweetQuote" quoteText="Small but powerful actions for teams that improve a codebase gradually: Vague naming? Make it explicit. Confusing code? Make it clearer. No documentation? Add steps to the README. Missing tests? Write one."/>

I have been doing software development for years and being a Scout had already prepared me to transfer the mindset and values exposed by Uncle Bob from the campsite to the codebase. But this approach is not an excuse for not allocating exclusive time and developers to fix issues in a codebase; it is just one way to continuously get things to a better state.

![Binary tree - example of clean code growing organically and gradually following the Scout development approach.](https://images.ctfassets.net/23aumh6u8s0i/5KLuJlW0dEoHg3Wf03i7t9/a11e8be6f2480802675a8d4daaf6c3c2/Binary-Tree)

<include src="asides/AboutAuth0" />


A Scout Approach to Software Development

diegopoza

System Engineer, geek, foodie, technology lover, speaker.

Sr Manager, Developer Advocacy

Diego Poza

Integrating cloud security services into your app not only keeps you and your users safe, it can actually accelerate your development process.



Over the course of the 2010s, cloud computing has shifted from being a bleeding edge solution to a standard expectation in data management. Not only has it allowed consumers and the enterprise to flexibly scale their storage needs, it has also redefined the software industry towards a cloud-based service model.

There are a ton of other benefits, allowing developers to streamline their development process and offer users a more refined and accessible experience. But what's one cloud advantage that the mobile app industry hasn't taken full advantage of? Security.

By delegating specialized tasks like IAM and encryption to cloud services that are 100% committed to following the latest security standards, you can spend more time building out your app without sacrificing the security of your users. In a cutthroat marketplace, delegating high-stakes features such as IAM to cloud providers can give you the competitive advantage you need to succeed, all while improving the security practices of your users.

## Security Advantages of The Cloud

Relying on a distributed cloud model for your security and authentication needs is a bit of a no brainer, as a developer you'll have more time to commit to making your app the best it can be, all while making sure your users are well taken care of.

The main advantage of cloud services in security and authentication contexts stems from their distributed nature. If you had an in-house authentication or data storage platform, a single point of failure might emerge, leaving your users stranded. But by relying on distributed authentication or hosting services, with multiple backups and agile update schedules, you can count on a more stable and scalable backend to keep your users happy and safe.

![Amazon EC1](https://images.ctfassets.net/23aumh6u8s0i/1Biy5EkrCPetFFit29avAh/ff3dbcec5cab9ef7febc49eaf1d86dea/ecs1)
_[Source:](http://www.allthingsdistributed.com/2015/07/under-the-hood-of-the-amazon-ec2-container-service.html)  Amazon's EC2 Container Service helps reliably balance cloud resources and clusters within a system._

In the case of Amazon Web Services, their concept of [“systems containers”](https://aws.amazon.com/blogs/publicsector/improving-security-with-cloud-computing-six-advantages-of-cloud-security/) sheds light on how cloud security structures can actually serve as powerful analytics tools. Due to the bubble-like nature of cloud systems as they surround traditional systems, they can provide insight into irregular behaviors and perform load balancing. Even if a cloud system isn't actively aware of the inner workings of each system element, it can create reactive responses and protect the integrity of your platforms.

By allowing your backend to be self-regulating, scalable, and constantly updated to the latest standards, you can make your app far more responsive to changing security threats and technologies.

## Why Outsource Identity?

At the end of the day, most developers simply don't have the time or expertise to build out robust IAM or data encryption platforms — developers need to delegate in order to give their users access to the best service possible. Luckily, that's where the cloud services model has proven to be most valuable, enabling you to externalize the most difficult platforms to the experts.

### USE YOUR RESOURCES EFFICIENTLY

As a developer, one of the most overlooked aspects of the development process is figuring out how to design your app to adhere to the most stringent security and authentication standards. It's a tall order — you can't be expected to be an expert in everything, yet nightmares stemming from bad security practices loom large.

What's worse, many users rely on developers, designers and onboarding to nudge them towards responsible identity behaviors, but mandating the strictest security practices can be a turn-off — that's a lot to balance.

By integrating a cloud IAM framework into your app, not only are you able to ensure that your users are adhering to industry standards, you also can actually make both development and user experience easier.

### ADHERE TO INDUSTRY STANDARDS

One of the best practices for rock-solid IAM is to use [Multifactor Authentication](https://auth0.com/docs/multifactor-authentication)(MFA). MFA allows your app to verify users using multiple devices, such as SMS, allowing you to mitigate impostors.

![Guardian Push](https://images.ctfassets.net/23aumh6u8s0i/1snZRjltIO6EdRAmpAEDOx/c3372491fed8e2a459ce6dd01236209e/guardian-push)

_Source: Auth0's [Guardian](https://auth0.com/multifactor-authentication) multi-factor authentication platform makes it easy to add Identity verification in your app._

MFA has quickly become an industry standard, but it requires a ton of backend work, ranging from SMS integration architecture to hardware tokens. For smaller developers, creating an MFA strategy from the ground up is an inefficient use of resources, so it makes sense to use an external cloud-based service like Auth0 to integrate with your login and onboarding flows.

### STREAMLINE YOUR SIGNUP

Social login is popular because it helps users who are less motivated to sign up using their email and password to simply sign up using their Facebook or Google accounts in just 1 or 2 clicks, avoiding the often cumbersome nature of traditional signup flows.

As a result, social login is becoming increasingly ubiquitous, and it has allowed developers to become familiar with integrating Identity APIs in their code. If developers are willing to use plugins and APIs to make their users' experiences just a little bit easier, they should also consider external cloud IAM solutions to bolster their security strategy.

The decision to outsource identity is ultimately up to each developer, for use cases as audience needs are highly variable. But developers should consider how easy it is to add cloud services to their stack, and learn about the benefits of additional identity-driven [analytics capabilities](https://auth0.com/learn/powering-user-analytics-identity/) that they enable. In such a competitive market, any efficiency and/or experience improvement can have a profound impact on the success of products.

## How Auth0 implements Cloud Identity

While it might seem like it's overwhelming to implement a cloud IAM architecture like Auth0, it's actually quite easy. Auth0 is immensely flexible, offering SDKs for a wide range of platforms, ranging from Java, PHP, Python, and iOS, among others, and allows developers to build upon it with C# or JavaScript to suit their needs.

Structurally, Auth0 serves as a bridge between apps and users, aiding in authentication and identity processes using the [OAuth2](https://auth0.com/docs/protocols/oauth2) protocol. The OAuth2 protocol enables users to grant regulated permissions from one site onto a different site, without having to expose their credentials. This is done through access tokens, which represent the granted permissions:

![Mobile API](https://images.ctfassets.net/23aumh6u8s0i/7D51x7o8JqhfOlvkrN1cVb/901f5c1e1699aa5a6a3b5383da8b00b2/mobile-api)

By default, Auth0 runs in the public cloud, but you can choose to run it privately on large cloud hosting services like AWS, or even locally if you're so inclined. Regardless of the structure of your app and its dependence on either local or cloud platforms, Auth0's cloud IAM acts as a stable go-between that can provide consistent service and agile updates as security standards evolve.

Whether you're in a time crunch or simply just want to have bulletproof IAM built into your app, implementing Auth0 into your product is quick and easy. If you're an iOS developer, all you need to do is add a few lines of code into your app for the [Lock](https://auth0.com/docs/libraries/lock-ios/v2) embeddable login form to start working.

## Embrace Cloud Security for a Competitive Edge

When developing a new app, creating high-stakes tools for authentication and data security can seem insurmountable. Instead of building out an imperfect system and putting you and your customers at risk, you could always rely on a service like Auth0 to take care of the hard details, enabling you to make better use of your resources.

The app space can be incredibly cutthroat, so any way to make your app more efficient and robust can translate into a real competitive advantage. By delivering a product with top-tier IAM and cloud architectures, you can deliver a more scalable and agile product that will be able to stand out in the marketplace.


Moving Your App to the Cloud

1097492785caf9ffeebffeb624202d8f?s=200 avatar

1097492785caf9ffeebffeb624202d8f?s=200

Prosper is a great speaker, community leader, open source hacker, technical consultant, and a fervent Developer Advocate. He is a full-stack software engineer who has worked on biometric, health and developer tools. Prosper recently co-founded a startup called Eden that’s focused on improving the quality of lives in Nigeria and currently leads the engineering team. He also co-founded forloop, the largest developer community in Africa.

Former Auth0 Employee

Prosper Otemuyiwa

Learn how to migrate a PHP 5 application to PHP 7: Setup and development environment.




**TL;DR:** Many PHP applications are still running on PHP 5.x, not ready to take full advantage of the awesome features that PHP 7 offers. A lot of developers have not made the switch because of certain fears of compatibility issues, migration challenges and the strange awkward feeling that migrating will take away a big chunk of their time. In this tutorial, you'll learn how to upgrade your PHP 5 application to PHP 7 starting from upgrading your development environment.

---

## PHP 5 and PHP 7

PHP 5 has been around for a very long time, over 10 years now. In fact, many production PHP apps are currently running on either PHP 5.2, 5.3 or 5.6. PHP 5 brought a lot of awesome features to PHP such as:

* Robust Support for Object oriented programming.
* Standard PHP Library (SPL)
* Closures.
* Namespaces.
* Magical methods for metaprogramming.
* MySQLi - improved MySQL extension.
* Cleaner Error handling.
* Better support for XML extensions.

Unfortunately, every thing that has a beginning must have an end. PHP 5.6 active support ended January 19, 2017. It will receive security support until December 31, 2018.

![Supported Release](https://images.ctfassets.net/23aumh6u8s0i/1RP0dx795JSlKBs8OAIYm3/334e29124ac3835361fe1359be1cfb9c/release)
_PHP 5 and 7 release and support duration_

PHP 7.0 was officially released on December 3, 2015 with a lot of new features and better performance benefits. It is twice as fast as PHP 5. A summary of the new features are highlighted below:

* Return and Scalar type declarations
* Better Unicode support
* Null Coalescing Operator
* Fatal errors conversion to Exceptions
* Generator Enhancement
* Anonymous Classes
* Secure random number generator
* Removal of deprecated features

and much more! If you aren't using any of the deprecated features in your PHP 5 app, then the transition to PHP 7 will be seamless. In the next post, I'll give a very detailed rundown of PHP 7 features, including the deprecated features.

## Upgrading your development environment to PHP 7

The first step to upgrading your application to use PHP 7 features is to migrate your development environment from PHP 5.x to PHP 7.x. We will cover how to upgrade your development environment to run PHP 7.x on Ubuntu, CentOs, Windows and Mac OS machines.

## Mac OS X

If you are a fan of [Homebrew](http://brew.sh), you can install PHP 7.0 via homebrew like so:

```bash

brew tap homebrew/dupes
brew tap homebrew/versions
brew tap homebrew/homebrew-php
brew unlink php56
brew install php70

```

> If you were using PHP 5.6, then you should unlink the old PHP by running `brew unlink php56` else unlink whatever version is present before you go ahead to install PHP 7.0.

Another option is to install it via `curl` on your terminal like so:

```bash

curl -s https://php-osx.liip.ch/install.sh | bash -s 7.0

```

## Windows

If you are fan of [WAMP](http://www.wampserver.com/en) or [XAMPP](https://www.apachefriends.org/download.html), then you can just download the latest versions of the software. It comes packaged with PHP 7.0.

![XAMPP download](https://images.ctfassets.net/23aumh6u8s0i/7Fbg8kqSIQNOXKZ3vsPUZ6/94bdf5d4453bbc6244be8b32fd16b324/donwload)
_Download and install the last/latest version_

Another option is to download the PHP 7.0 distribution for windows from [http://windows.php.net/download#php-7.0](http://windows.php.net/download#php-7.0).


## Ubuntu

If you are running Ubuntu on your machine, especially around v14 and 15, you can install PHP 7.0 by running these commands:

```bash

sudo apt-get update
sudo add-apt-repository ppa:ondrej/php

sudo apt-get install -y php7.0-fpm php7.0-cli php7.0-curl php7.0-gd php7.0-intl php7.0-mysql

```

**Note:** You can check out how to install PHP 7 and Nginx here, and manually build memcached module for PHP 7.

## Debian

If you are running Debian on your machine, especially around v6, v7 and v8, you can install PHP 7.0 by doing the following:

* Open up your `/etc/apt/sources.list` file, and make sure you have these commands below:

_If you are using a Jessie distribution_

```bash

deb http://packages.dotdeb.org jessie all
deb-src http://packages.dotdeb.org jessie all

```
_If you are using a Wheezy distribution_

```bash

deb http://packages.dotdeb.org wheezy all
deb-src http://packages.dotdeb.org wheezy all

```

* Fetch and Install the GnuPG key

```bash

wget https://www.dotdeb.org/dotdeb.gpg
sudo apt-key add dotdeb.gpg

```

* Install PHP 7.0

```bash

sudo apt-get update
sudo apt-get install php7.0

```

## CentOS / Red Hat Enterprise Linux

If you are running CentOS or Red Hat Enterprise Linux operating system on your machine, you can install PHP 7.0 by running the following commands on your terminal like so:

```bash

sudo yum update
rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm
sudo yum install php70w
sudo yum install php70w-mysql
```

When you are done, run this command `php -v`, you should see something like this:

```bash

PHP 7.0.0 (cli) (built: Dec  2 2015 20:42:32) ( NTS )
Copyright (c) 1997-2015 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2015 Zend Technologies

```

## phpbrew

[PHPBrew](https://github.com/phpbrew/phpbrew) is a tool that you can use to build and install multiple versions of PHP on your machine. It can:

* Build PHP with different variants like PDO, MySQL, SQLite, debug etc
* Compile Apache PHP module and separate them by different versions.
* Switch versions very easily and is integrated with bash/zsh shell.
* Install & enable PHP extensions into current environment with ease.
* Install multiple PHP into system-wide environment.
* Detect path for Homebrew and MacPorts.

![phpbrew](https://images.ctfassets.net/23aumh6u8s0i/3mISGdTnewoHaK3EaHlKNx/0205500221f6c93a3a5fa56ef67ec816/01)
_phpbrew_

You can install it on your machine like so:

```bash

curl -L -O https://github.com/phpbrew/phpbrew/raw/master/phpbrew
chmod +x phpbrew

```

Then you can install it into your bin folder like so:

```bash

sudo mv phpbrew /usr/local/bin/phpbrew

```

**Note:** Make sure you have `/usr/local/bin` in your `$PATH` environment variable.

You can install PHP 7 by running the following commands:

```bash

phpbrew self-update
phpbrew install next as php-7.1.0
phpbrew use php-7.1.0

```

You can use phpbrew to install PHP 7.0 from GitHub like so:

```bash

phpbrew install github:php/php-src@PHP-7.0 as php-7.0.0

```

Most times, we use PHP with other extensions such as MySQL, PDO, OpenSSL etc. You can use **phpbrew** to build your PHP environment with various variants like so:

```bash

  phpbrew install 7.0.0 +mysql+mcrypt+openssl+debug+sqlite

```

This command above will build PHP with MySQL, mycrypt, OpenSSL, debug and SQLite.

## Vagrant

Vagrant provides a simple, elegant way to manage and provision Virtual Machines. The development environments that run on Vagrant are packaged via **Vagrant boxes**. Vagrant boxes are completely disposable. If something goes wrong, you can destroy and re-create the box in minutes! One of such boxes I recommend is **Laravel Homestead**.

> **Note:** You can check out these awesome free courses on [learning how to use Vagrant](https://serversforhackers.com/series/vagrant) on [https://serversforhackers.com](https://serversforhackers.com/)

### Laravel Homestead

Laravel Homestead is an official, pre-packaged Vagrant box that provides you a wonderful development environment without requiring you to install PHP, a web server, and any other server software on your local machine. Homestead runs on any Windows, Mac, or Linux system. It includes the following:

* Ubuntu 16.04
* Git
* PHP 7.1 (Latest version of PHP)
* Nginx
* MySQL
* MariaDB
* Sqlite3
* Postgres
* Composer
* Node (With Yarn, PM2, Bower, Grunt, and Gulp)
* Redis
* Memcached
* Beanstalkd

1. Install [VirtualBox 5.1](https://www.virtualbox.org/wiki/Downloads), or [VMWare](https://www.vmware.com), and [Vagrant](https://www.vagrantup.com/downloads.html).

2. Now that you have Vagrant and VirtualBox or VMware installed, go ahead and download the Laravel Homestead box like so:

```bash

vagrant box add laravel/homestead

```

Follow the instructions on the [Laravel Homestead documentation](https://laravel.com/docs/5.3/homestead) to find out more about the installation process.

> I recommend Windows users to take a stab at using [Laragon](https://laragon.org). It provides an alternative but suitable and powerful environment like Laravel Homestead.

### php7dev

Another Vagrant image is **[php7dev](https://github.com/rlerdorf/php7dev)** by Rasmus Ledorf (Creator of PHP). It is a Debian 8 Vagrant image which is preconfigured for testing PHP apps and developing extensions across many versions of PHP. You can gloriously switch between PHP versions by using the `newphp` command.

Follow the instructions on the [README](https://github.com/rlerdorf/php7dev) to find out how to install, configure and use.

## Valet

[Valet](https://github.com/laravel/valet) is a PHP development environment for Mac minimalists. It was built by [Taylor](https://twitter.com/taylorotwell) and [Adam Wathan](https://twitter.com/adamwathan) of the Laravel community. It is a fast blazing development environment that uses roughly 7MB of RAM. It requires Homebrew.

Laravel Valet configures Mac to use PHP's built-in web server in the background when your machine starts. With Valet, if you create a project folder called `auth0-php`, then you can just open `auth0-php.dev` in your browser and it will serve the contents of the folder automatically.

You can share whatever you are working on locally with someone in another part of the world by just running this command:

```bash

valet share

```

![Valet share](https://images.ctfassets.net/23aumh6u8s0i/1edNCat7fspHg2n5QlVLfc/132375b9edef86b220dd1519a912f477/share)
_Valet uses Ngrok under the hood to share_

You can even serve a local site over encrypted TLS using HTTP/2 by invoking a command like so:

```bash

valet secure blog

```

where `blog` is the name of the site or project folder. Valet generates a Fresh local TLS certificate.

![Secure the Blog](https://images.ctfassets.net/23aumh6u8s0i/1edNCat7fspHg2n5QlVLfc/132375b9edef86b220dd1519a912f477/share)
_Invoke the secure command_

![Secure Blog](https://images.ctfassets.net/23aumh6u8s0i/1pfxJgP2PrcMtD7EW6FLzo/40827baf395780106e870c213580bfbc/secure)
_Site is served over https locally_

Very awesome!

Out of the box, Valet supports [Laravel](https://laravel.com), [Lumen](https://lumen.laravel.com), [Symfony](https://symfony.com), [Zend](https://framework.zend.com), [CakePHP 3](https://cakephp.org), [Wordpress](https://wordpress.org), [Bedrock](https://roots.io/bedrock), [Craft](https://craftcms.com), [Statamic](https://statamic.com) and [Jigsaw](http://jigsaw.tighten.co). However, you can extend Valet with your own [custom drivers](https://laravel.com/docs/5.3/valet#custom-valet-drivers).

Follow the instructions on the [laravel valet documentation](https://laravel.com/docs/5.3/valet) to find out how to install and get started using it.

## Docker

### php7-dockerized

[php7-dockerized](https://github.com/hamptonpaulk/php7-dockerized) is a simple PHP 7 Docker and Compose environment that is bundled with Nginx and MySQL. Follow the instructions on [setting up a local PHP 7 development environment with docker and compose!](https://medium.com/code-school/setting-up-a-local-php7-development-environment-with-docker-compose-e9531baed291#.bezir0x7n).

### Laradock

[Laradock](https://github.com/laradock/laradock) is a docker PHP development environment that gives you a wonderful development environment without requiring you to install PHP 7, Nginx, MySQL, Redis, and any other software on your machines.

* Clone Laradock inside your project like so:

```bash

git clone https://github.com/Laradock/laradock.git

```

* Enter the laradock folder and run this command:

```bash

docker-compose up -d nginx mysql redis beanstalkd

```

* Open your `.env` file and set the following:

```bash

DB_HOST=mysql
REDIS_HOST=redis
QUEUE_HOST=beanstalkd

```

Follow the instructions on the [laradock documentation](https://github.com/laradock/laradock/blob/master/README.md) to find out how to install and configure it.

### phpdocker

[phpdocker.io](https://github.com/phpdocker-io/phpdocker.io) is a PHP and Docker generated environment. It supports PHP 7 up until 7.1 beta. Follow the instructions to set it up like so:

* Clone [https://github.com/phpdocker-io/phpdocker.io](https://github.com/phpdocker-io/phpdocker.io)
* Copy `app/config/parameters.yml.dist` into `app/config/parameters.yml`
* Run `composer install`
* Run `bower install`
* Run `php bin/console assets:install --symlink --relative`
* Run `docker-compose up -d`

Don't hesitate to submit an issue on the `phpdocker-io` repo if you hit a roadblock.

**Note:** [Chris Fidao](https://twitter.com/fideloper) has a fantastic course on Docker. With his course on [shippingdocker.com](https://shippingdocker.com), you'll learn how to use Docker in development, testing and production.

There are different ways of setting up a PHP 7 development environment. The few I have mentioned here should give you a lot of options in getting your machine ready to effectively test PHP 7 features.


## Conclusion

We have successfully covered various ways of setting up a PHP 7 development environment. The first step to migrating an app from a specific language version to another is ensuring that the development environment supports the new version.

> Looking for the best way to secure your PHP projects? [Auth0 offers a generous **free tier**](https://auth0.com/pricing) to get started with modern authentication. This modern tool provides the simplest and easiest to use [User interface tools to help administrators manage user identities](https://auth0.com/user-management) including password resets, creating and provisioning, blocking and deleting users.

Do you have other ways of setting up PHP 7 development environments? Are you currently using an awesome tool to run your PHP 7 apps? Please let me know in the comments section.

In the next article, we'll go through all the features of PHP 7 that you can leverage when migrating your PHP 5 application!


Migrating a PHP 5 App to PHP 7 (Development Environment) - Part 1

99c4080f412ccf46b9b564db7f482907?s=200 avatar

99c4080f412ccf46b9b564db7f482907?s=200

I'm currently a Senior Developer Advocate at MongoDB. I'm also a Google Developer Expert for Web Technologies and spend most my time giving talks at conferences and meetups, mentoring developers and running workshops, and creating online content to help technology professionals.

Ado Kukic

A look at five frameworks for building cross-platform mobile applications and how they stack up against each other.



---

**TL;DR** Mobile apps are here to stay. For a long time, mobile app development required extensive Objective-C or Java knowledge. Hybrid frameworks and transpilers existed, but paled in comparison to what could be accomplished building apps natively. In recent years, these frameworks have started catching up on features, functionality and performance. Today, we'll take a look at five promising frameworks for building cross-platform mobile applications.

---

Two mobile platforms dominate the landscape; Apple's iOS and Google's Android. Combined, these two platforms make up [99%](http://www.idc.com/promo/smartphone-market-share/) of all mobile devices. Between the two platforms, over 4.2 million mobile apps have been released in categories such as gaming, education, business, music, and more.

Android is based on Java while iOS runs on Objective-C and Swift: two fundamentally different frameworks for developers to target. For a long time, companies wishing to develop mobile apps had to have two teams, one dedicated to iOS development and the other to Android. Hybrid or cross-platform frameworks and transpilers have gained popularity as they allow developers to target multiple platforms with a single code base, reducing cost and development time.

Today we will take a look at alternatives to building native mobile applications. We will look at various frameworks and approaches to bringing your app to the small screen and the pros and cons of each. Without further ado, let's jump right in.

## Ionic

![Ionic](https://images.ctfassets.net/23aumh6u8s0i/2yioqHIIiETG7TrrMhooHG/fd5221941cb9513fe7130df5bff14a71/ionic-logo)

[Ionic](https://ionicframework.com/) is perhaps the most widely known cross-platform mobile framework. It allows developers to build iOS and Android applications with web technologies such as HTML, CSS, and JavaScript. Ionic is built on top of [Cordova](https://cordova.apache.org/) which enables access to various device features such as geolocation, push notifications, camera, and others. Ionic 1.x utilizes [Angular 1.x](https://angularjs.org/), while Ionic 2, the latest version of the framework, utilizes [Angular 2+](https://angular.io/).

In addition to the framework, Ionic boasts an entire ecosystem to get developers up and running as quickly as possible. [Ionic Cloud](https://ionic.io/cloud) gives developers various tools to manage, deploy, and scale their Ionic applications. [Ionic Creator](https://ionic.io/products/creator) is a visual editor that allows developers to rapidly prototype and build mobile applications via drag and drop. Finally, [Ionic View](http://view.ionic.io/) is a free iOS and Android app that allows developers to easily share their Ionic app with users, testers, and clients without having to deploy the application to any app store. Developers simply invite users via the Ionic View app, and once an invite has been accepted the user can download and run the developers app inside of Ionic View as if the app was installed on their phone.

<include src="TweetQuote" quoteText="Ionic enables the development of mobile apps built with web technologies like HTML, CSS, and JS."/>

### Pros
* Build mobile apps with familiar web technologies such as HTML, CSS, and JavaScript.
* Ionic View allows you to share your Ionic app without requiring a user to download it.
* Target iOS and Android devices with a single code base.

### Cons
* Ionic apps use [WebView](https://developer.android.com/reference/android/webkit/WebView.html), which means the app is for all intents and purposes a web application, so performance can be slow compared to native applications.
* Ionic requires deep knowledge of Angular to get the most out of the framework.
* Not suitable for complex mobile applications such as games or graphics intensive programs.

## PhoneGap / Cordova

![PhoneGap](https://images.ctfassets.net/23aumh6u8s0i/6kuj61dIq9Cvp5eYbxofta/22c17124939107f4f4b3d162f08f2e56/phonegap-logo)

[PhoneGap](http://phonegap.com/) is very similar to Ionic in many respects. It too allows developers to build cross-platform mobile applications with web technologies and is built on top of Cordova. PhoneGap is not tied to any specific JavaScript framework, so developers have more choice in how they build their applications. PhoneGap boasts an ecosystem comprised of a desktop app, mobile app, and a cloud service called [PhoneGap Build](https://build.phonegap.com/) for building and deploying an application.

There is often confusion in the developer community regarding PhoneGap and Cordova. PhoneGap was originally founded by [Nitobi](https://www.crunchbase.com/organization/nitobi-software#/entity). In 2011, [Adobe](https://adobe.com) acquired Nitobi and the PhoneGap brand. Adobe then donated a version of PhoneGap, renamed Cordova, to the [Apache Foundation](https://www.apache.org/), but kept the PhoneGap brand and product. Cordova can be seen as the engine that powers PhoneGap, amongst other hybrid frameworks. PhoneGap adds additional features and functionality on top of Cordova.

<include src="TweetQuote" quoteText="Cordova allows you to build cross-platform mobile apps with web technologies of your choice."/>

### Pros
* Build cross-platform mobile apps with web technologies of your choice.
* PhoneGap build allows you to compile your PhoneGap apps into iOS and Android apps without having to install any additional SDKs.
* Extensive third-party plugin library offering integrations such as mobile payments, testing frameworks, and more.

### Cons
* PhoneGap, like Ionic, uses WebView which results in performance challenges.
* Lack of standard UI library.
* Not suitable for complex mobile applications such as games or graphics intensive programs.

## Xamarin

![Xamarin](https://images.ctfassets.net/23aumh6u8s0i/3oVHsVIYit1VXh5nZRDJaT/d825fd98fe16a70e435be5e9669f9328/xamarin-logo)

[Xamarin](https://www.xamarin.com/) comes from [Microsoft](https://microsoft.com) and takes a unique approach to cross-platform app development. Xamarin applications are written entirely in C#. Xamarin then compiles the C# code into native iOS and Android distributions. The underlying layer on which Xamarin is built on top of is [Mono](http://www.mono-project.com/) and this enables cross-platform development. The benefit of building applications with Xamarin compared to Cordova-based frameworks is that apps built with Xamarin make use each platform's native API's. This means that Xamarin apps compile down to native iOS and Android applications and behave as such.

Xamarin is not a code once, run everywhere solution. While you can achieve a high level of code shareability, you will more than likely need to write specific code for iOS and Android versions of your app. With Xamarin, you will not be able to use native open-source libraries that are available for iOS and Android, but you can make use of many .Net libraries. Finally, getting access to the latest native APIs can be slow since the Xamarin developers will have to implement them into the framework after they are released.

<include src="TweetQuote" quoteText="Xamarin allows you to build cross-platform iOS and Android applications in C-Sharp."/>

### Pros
* Developers already familiar with the Microsoft ecosystem will feel right at home with Xamarin and its use of C#.
* Xamarin apps have access to all of the native capabilities of both iOS and Android.
* Performance of Xamarin apps is comparable to that of natively written applications.

### Cons
* Although you can achieve code shareability, you will occasionally need to write platform specific code.
* You will need to understand iOS and Android APIs to be able to get the most of out the platform.
* The licensing model can be difficult to navigate with certain features locked behind Professional and Enterprise licenses.

## React Native

![React Native](https://images.ctfassets.net/23aumh6u8s0i/2tTNuAm4EON8PmLhdweSSD/e2b2a1c49194dd7da2b82364b121a95d/react-native-logo)

[React Native](https://facebook.github.io/react-native/) comes to us from [Facebook](https://facebook.com) and presents a framework for building cross-platform mobile applications with [React](https://facebook.github.io/react/). React Native is comparable to Xamarin, wherein apps created with React Native are indistinguishable from native iOS and Android apps written in Objective-C or Java.

React Native combines the easy to learn syntax of React but also enables developers to write Objective-C, Swift, or Java when needed for additional performance or tuning. This means that developers can use existing native libraries in their React Native apps. React Native also comes with many UI components such as buttons, sliders, and modals that allow developers to get up and running quickly.

<include src="TweetQuote" quoteText="React allows developers to build native iOS and Android apps with React and JavaScript."/>

### Pros
* Since React Native apps run native APIs, the performance is comparable to true native apps.
* You can use native libraries and write Objective-C, Swift, or Java if needed to further optimize performance.
* The standard UI component library is extensive and provides many features out-of-the-box.

### Cons  
* Requires extensive knowledge of React.
* Depending on use case, you may end up writing a lot of native code and then plugging it into React Native, which means you'll need Objective-C or Java knowledge.
* While React and React Native are open source projects, Facebook has faced criticism of its BSD+Patents licensing model.

## Progressive Web Apps

![Progressive Web Apps](https://images.ctfassets.net/23aumh6u8s0i/7HjmYoyE9g9l8euwDFgR61/550512b9bc7abb75115f67d1fb012f75/pwa-intro)

[Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) aim to make web applications behave like their native counterparts. This project comes to us from [Google](https://google.com) and presents a very interesting proposition. Progressive Web Apps aim to be reliable, fast, and engaging. This means that apps should load fast, present an engaging and fluid user experience, and support native features like push notifications or offline access. The PWA spec will add new features and functionality over time. Developers can then choose how many features they wish to implement, possibly making PWA the most flexible way to reach mobile users.

Progressive Web Apps are unique for two major reasons. While they can be "installed" on a user's homescreen, they are not delivered through the App Store or Google Play. Instead, when a user visits a PWA, they are presented with an option to add it to their homescreen. This is interesting because it gives the developer the power to deliver and update their applications without forcing the user to do anything. In addition, Progressive Web Apps can be scraped and indexed by search engines. This significantly increases discoverability and opens doors for deeper integrations in the future.

<include src="TweetQuote" quoteText="Progressive Web Apps allow developers to add mobile features to existing web applications."/>

### Pros
* No need for separate code base. Your web application is your mobile application.
* App will be indexed and discoverable through search engines.
* App does not need to go through the App Store or Google Play to be "installed" on a user's mobile device.

### Cons
* Limited support for PWA on iOS.
* Lack of access to many native APIs.
* App won't be accessible through App Store or Google Play.

## Authentication with Hybrid App Frameworks

Mobile applications present various user and identity challenges. Luckily, [Auth0](https://auth0.com) has your back. Our [identity solution is platform agnostic](https://auth0.com/user-management) and we have plenty of resources to get you up and running as quickly as possible. <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">Sign up</a> for a free Auth0 account, and then follow any of these guides to get user authentication for your app in no time at all:

* **Ionic** - [Quickstart (Ionic)](https://auth0.com/docs/quickstart/native/ionic), [Quickstart (Ionic 2)](https://auth0.com/docs/quickstart/native/ionic2), [Tutorial](https://auth0.com/blog/ionic-2-authentication-how-to-secure-your-mobile-app-with-jwt/)
* **PhoneGap** - [Quickstart](https://auth0.com/docs/quickstart/native/phonegap)
* **Xamarin** - [Quickstart](https://auth0.com/docs/quickstart/native/xamarin), [Tutorial](https://auth0.com/blog/xamarin-authentication-and-cross-platform-app-development/)
* **React Native** - [Quickstart (iOS)](https://auth0.com/docs/quickstart/native/react-native-ios), [Quickstart (Android)](https://auth0.com/docs/quickstart/native/react-native-android)
* **Progressive Web Apps** - [Tutorial](https://auth0.com/blog/introduction-to-progressive-apps-part-one/)

> [Auth0 offers a generous **free tier**](https://auth0.com/pricing) so we can get started with modern authentication.

## Conclusion

Mobile application development is more accessible than ever. Whether you are a full-stack developer, aspiring engineer, or have decades of experience in the Microsoft ecosystem, you can build great mobile applications that can run on billions of devices today. There may not be clear a winner, each platform has pros and cons, but the important thing is you have a plethora of options. As the old adage goes, "use the right tool for the job". Hopefully you've learned more about native app alternatives and can make an informed decision about developing mobile applications.


"app development"