matt-raible

Matt Raible is a well-known figure in the Java community and has been building web applications for most of his adult life. For over 20 years, he has helped developers learn and adopt open source frameworks and use them effectively. He's a web developer, Java Champion, and Developer Advocate at Okta. Matt is a frequent contributor to open source and a big fan of Java, IntelliJ, TypeScript, Angular, and Spring Boot. 

Developer Advocate

Matt Raible

Use JHipster to build a photo-sharing app for web and mobile that has a React front-end with OIDC authentication and a Spring Boot back-end with OAuth2 authorization.

Integrate React Native and Spring Boot Securely

37590801?s=460&v=4

A software engineer who dreams about non-electric sheep and autonomous vehicles and likes to champion security.

Software Engineer

Dan Arias

Learn how to use Next.js to create server-side rendered React applications.



In this tutorial series, you'll be provided with a practical introduction to how Next.js can help you build web applications.

Created by [Vercel, a cloud company for hosting frontends and serverless functions](https://vercel.com/home), Next.js is a React framework capable of creating applications that run both on the client and the server, otherwise known as Universal JavaScript applications. This framework helps you build universal apps faster by streamlining basic features like client-side routing and page layout while simplifying advance features like server-side rendering and code splitting.

In this first part of the series, you'll learn how to create pages and a page layout [using Next.js 9](https://nextjs.org/blog/next-9), the most recent framework version at the time of writing. [Familiarity with the React library](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/) is recommended.

## Getting Started

To start, you need to bootstrap a React project with `next` as a dependency. Anywhere in your system, create a folder named `whatabyte` and make it your current directory:

```bash
mkdir whatabyte
cd whatabyte
```

Then, initialize a default Node.js project under the `whatabyte` directory and install core dependencies by issuing these commands:

```bash
npm init -y
npm install --save react react-dom next
```

As the name suggests, `next` is the package that will allow you to use the Next.js framework in your project with all of its modules, components, and dependencies.

Next.js is flexible but has one major structural requirement for it to work. Every Next.js project needs to have a `pages` subdirectory child to the project directory. Therefore, create a new `pages` subdirectory like so:

```bash
mkdir pages
```

Every page of your web app will be defined as a React component in a JavaScript file under the `pages` subdirectory. For example, the file `index.js` represents the root path, `/` and a file named `user.js` represents the `/user` path. You'll get a more detailed explanation of these mechanics in the next section.

To make running and building your Next.js application easy, replace the NPM scripts of your `package.json` with the following:

```json
{
  //...
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  //...
}
```

Save the changes made to `package.json`. To run the project, execute this command in the terminal:

```bash
npm run dev
```

Head to [`http://localhost:3000/`](http://localhost:3000/) and bask in the glory of a `404` error. You haven't done anything wrong. This error shows up because the `pages` directory is empty. It needs an `index.js` file inside to render the default `/` home route. You'll do that... Next!

## Creating Your First Next.js Page

To understand how Next.js works, it helps to think about creating websites the classical way using HTML pages. The `index.html` file is the entry point of a website and it contains logic that takes the visitor to any other pages, like `about.html` and `profile.html`.

With Next.js, each page is represented by a JavaScript file under the `pages` subdirectory. Each file, instead of having HTML templates, exports a React component that is used by Next.js to render the page with the default root route being `index.js`. Go ahead and create this file under `pages` subdirectory:

```bash
touch pages/index.js
```

* Windows PowerShell:

```bash
ni pages/index.js
```

Populate `index.js` with this code:


```javascript
// pages/index.js

const Index = () => (
  <div>
    <p>Thank u, next</p>
  </div>
);

export default Index;
```

Without having to restart the app, Next.js detects the new `index.js` and the exported `Index` component and updates the view in the browser automatically.

![Next.js index page](https://images.ctfassets.net/23aumh6u8s0i/2bXaYCcMmJDNz0US5biyQb/62f0e3dbcc6d0cfe90e1e8d8f69b24dd/nextjs-practical-introduction_nextjs-index-page)

If you were using `create-react-app` to build your React application, you'd be looking here at rendering an `App` component instead. The `App` component is the parent or shell component for the whole application. With Next.js, you can think of that component as being implied through the `pages` subdirectory and hierarchy.

To achieve a uniform core interface for each page, you'd want to have a common layout that includes a header, a content container, and a navigation bar. This can be easily done with Next just like you'd do it with `create-react-app`: using components.

## Creating a Next.js Layout Using React Components

Under the `whatabyte` root directory, create a `components` directory:

```bash
mkdir components
```

The name of this directory could be really anything, but it makes sense to stick with well-understood file structure names that make it easier for anyone else to understand the structure of your application.

You need three components for creating a layout:

* `Layout` to hold the core view in place
* `Header` to provide a standard header to all views
* `NavBar` to provide navigation buttons

Thus, create the following files under the `components` directory:

* `Layout.js`
* `Header.js`
* `NavBar.js`

```bash
touch components/Layout.js components/Header.js components/NavBar.js
```

* Windows PowerShell:

```bash
ni components/Layout.js, components/Header.js, components/NavBar.js
```

Open `Header.js` and add the following code to it:

```javascript
// components/Header.js

const headerStyle = {
  backgroundColor: "blue",
  color: "white",
  width: "100%",
  height: "50px"
};

const Header = () => (
  <div className="Header" style={headerStyle}>
    HEADER
  </div>
);

export default Header;
```

In `NavBar.js` add the following:

```javascript
// components/NavBar.js

const navBarStyle = {
  backgroundColor: "red",
  color: "white",
  width: "100%",
  height: "60px"
};

const NavBar = () => (
  <div className="NavBar" style={navBarStyle}>
    NAVBAR
  </div>
);

export default NavBar;
```

In `Layout.js`, use the `Header` and `NavBar` components to render any content passed through `props.children` within a `Content` container:

```javascript
// components/Layout.js

import Header from "./Header";
import NavBar from "./NavBar";

const layoutStyle = {
  display: "flex",
  flexDirection: "column",
  height: "100%",
  width: "100%"
};

const contentStyle = {
  flex: 1,
  display: "flex",
  flexDirection: "column"
};

const Layout = props => (
  <div className="Layout" style={layoutStyle}>
    <Header />
    <div className="Content" style={contentStyle}>
      {props.children}
    </div>
    <NavBar />
  </div>
);

export default Layout;
```

These three components use inline CSS styling to give improve their structure and presentation.

Finally, update `index.js` to use the `Layout` component:

```javascript
// pages/index.js

import Layout from "../components/Layout";

const Index = () => <Layout>Welcome to WHATABYTE!</Layout>;

export default Index;
```  

![Next.js index page using a layout component](https://images.ctfassets.net/23aumh6u8s0i/69v0dEitl6ISUXJtGPylY/7b08e470423209df73b4c8340384968b/nextjs-practical-introduction_nextjs-index-page-using-a-layout-component)

> The look and feel of the interface will improve in the next part of this tutorial.

In the browser, the index page now shows a blue box serving as a header, a white box with a message serving as content, and a red box serving as the navigation bar. With a layout in place, you are ready to create more pages with a consistent structure.

## Creating More Pages Using Next.js

The _WHATABYTE_ app has four core views:

* Explore: To show trending restaurants and dishes
* Near Me: To show restaurants near the user
* My Cart: To show the orders of the user
* Profile: To show the user information such as name, address, and billing data

As you may be thinking, you'll need to add new files under the `pages` directory to represent each of these pages. You are right. The plan here is to create a route for each view:

* `/explore`
* `/nearme`
* `/mycart`
* `/profile`

To create these views, create the following files under the `pages` directory and add their respective content:

```bash
touch pages/explore.js pages/nearme.js pages/mycart.js pages/profile.js
```

* Windows PowerShell:

```bash
ni pages/explore.js, pages/nearme.js, pages/mycart.js, pages/profile.js
```

- `explore.js`:

```javascript
// pages/explore.js

import Layout from "../components/Layout";

const ExploreView = props => <Layout>{`Explore View`}</Layout>;

export default ExploreView;
```

- `nearme.js`:

```javascript
// pages/nearme.js

import Layout from "../components/Layout";

const NearMeView = props => <Layout>{`Near Me View`}</Layout>;

export default NearMeView;
```

- `mycart.js`:

```javascript
// pages/mycart.js

import Layout from "../components/Layout";

const MyCartView = props => <Layout>{`My Cart View`}</Layout>;

export default MyCartView;
```

- `profile.js`:

```javascript
// pages/profile.js

import Layout from "../components/Layout";

const ProfileView = props => <Layout>{`Profile View`}</Layout>;

export default ProfileView;
```

In the browser, you can visit [`http://localhost:3000/explore`](http://localhost:3000/explore) and see the new Explore page up and running! You can try any of the other paths as well.

<include src="TweetQuote" quoteText="Learn how to bootstrap a Next.js application to create pages and a page layout."/>

## Get Your Head In the Next.js Game

Your Next.js pages need to have a document title shown on the page tab or window title bar of the browser. To add a document title, you need to use the [`<title>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) HTML element which can only be used within a web page's `<head>` block.

Next.js pages are created with a `<head>` block that has sensible defaults such as the following:

```html
<head>
  <title class="next-head"></title>
  <meta charset="utf-8" class="next-head">
  <meta
    name="viewport"
    content="width=device-width,minimum-scale=1,initial-scale=1"
    class="next-head">
</head>
```

However, notice that the `title` tag is empty. To modify the `head` block, Next.js offers a [built-in `Head` component](https://github.com/zeit/next.js/#populating-head) in the `next/head` module which appends elements to the `<head>` block of a page. To modify the document title, you'd nest a `title` HTML element within the `Head` component.

Since you need the document title to be present on every page, the `<head>` block should be modified within the `Layout` component template. Open `components/Layout.js` and update its content as follows:

```javascript
// components/Layout.js

import Head from "next/head";

// Component imports remain the same

// Style objects already defined

const Layout = props => (
  <div className="Layout" style={layoutStyle}>
    <Head>
      <title>WHATABYTE</title>
    </Head>

    <Header />
    <div className="Content" style={contentStyle}>
      {props.children}
    </div>
    <NavBar />
  </div>
);

export default Layout;
```

The browser tab or window hosting your page should now reflect the "WHATABYTE" title.

The `<head>` block can also contain other important metadata (data that describes data) like scripts, stylesheets, character encoding, name, and much more.

> For more information, visit the [`<head>` block](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) and [metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes) MDN docs.

<include src="TweetQuote" quoteText="Learn how to get started with Next.js, a universal JavaScript framework based on React."/>

## Next Steps

The current layout of the application is not working as it should. The `.Content` container, within the `Layout` component, is expected to stretch out to fill the space left by the `Header` and `NavBar` components as its `contentStyle` object specifies the `flex: 1` CSS property. However, this flexible property depends on the height value of the its parent, the `.Layout` container.

Despite the `height` of the `.Layout` container being specified in its `layoutStyle` object as `100%`, this container is not filling out the full height of the viewport. In turn, this could only mean that its parent doesn't have a definite height.

If you open the browser Dev Tools and look at the structure of the Index page, you'll notice that the parent container for the app is a `div` element with the ID `__next`. Clicking on that element shows that it has no height or width; therefore, its descendant containers have no height value to inherit and use for dynamic sizing.

To fix this, you'd need to give the `__next` container a `height` and `width` of `100%`. But Next.js doesn't come with a default global index stylesheet like with `create-react-app`. The solution is to style components in the "Next.js way" or to use custom SCSS, which is the topic of the next second part of this tutorial.

## Recap

In this first part, you have learned how to use Next.js to create pages that integrate a page layout. Using a page layout gives your pages consistent high-level structure. To give the elements within each page better styling and positioning, you need to rely on CSS.

So far, you applied basic styling to your pages using inline style objects. However, Next.js offers more scalable and powerful mechanisms to apply styles to your pages. In the next part of this tutorial, your pages will go from this...

![Another Next.js view with basic layout](https://images.ctfassets.net/23aumh6u8s0i/2D9tCkdKRpVwyNcCJxThNf/94870998bf1d698363b2fdb6ddeb51e3/nextjs-practical-introduction_another-nextjs-view-with-basic-layout)

... to this!

![Next.js polished layout](https://images.ctfassets.net/23aumh6u8s0i/1URWqzEEl1HZEdGTmW8vD4/37d1dfb6885b42030cbd1fb789349274/nextjs-practical-introduction_nextjs-polished-layout)

### [Continue to Part 2: Next.js Styling and Theming](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/)


Next.js Practical Introduction: Pages and Layout

Learn how to use Next.js to add navigation and routing to server-side rendered React applications.



In this tutorial series, you'll be provided with a practical introduction to how Next.js can help you build web applications. 

Created by [ZEIT, a cloud company for hosting frontends and serverless functions](https://zeit.co/), Next.js is a React framework capable of creating applications that run both on the client and the server, otherwise known as Universal JavaScript applications. This framework helps you build universal apps faster by streamlining basic features like client-side routing and page layout while simplifying advance features like server-side rendering and code splitting.

Part one of this Nextjs series shows developers [how to create pages and layouts](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-1/). In the second part of the series, you learned [how to add styling and create themes](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/). In this third part of the series, you'll learn how to navigate to pages and implement routing using [using Next.js 9](https://nextjs.org/blog/next-9), the most recent framework version at the time of writing. [Familiarity with the React library](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/) is recommended.

## Setting Up the Project

If you are starting from this part, you can get the app that was built in the previous, second part by cloning the repo and checking out the `part-2` branch:

```bash
git clone git@github.com:auth0-blog/whatabyte-next-intro.git whatabyte
cd whatabyte
git checkout part-2
```

If you haven't [connected to GitHub using SSH](https://help.github.com/en/articles/connecting-to-github-with-ssh), please clone the repo with the HTTPS URL:

```bash
git clone https://github.com/auth0-blog/whatabyte-next-intro.git whatabyte
cd whatabyte
git checkout part-2
```

The repository is cloned into the directory called `whatabyte` on your local machine. If the directory doesn't exist, it is created.

With the branch checked out, proceed to install the project dependencies:

```bash
npm install
```

Finally, execute the following command in your terminal to run the app:

```bash
npm run dev
```

To see the app in action and start following the tutorial, visit [`http://localhost:3000`](http://localhost:3000) on your browser.

## Understanding Next.js Routing

The _WHATABYTE_ app has four core routes:

* `/explore`: To show trending restaurants and dishes
* `/nearme`: To show restaurants near the user
* `/mycart`: To show the orders of the user
* `/profile`: To show the user information such as name, address, and billing data

From these four core routes, the `/explore` route will be the main route. Thus, the root path, `/`, should redirect to `/explore`.

First, to get familiar with navigation in Next.js, you'll navigate to the Explore page from the Index page by adding a hyperlink inside the content container of the Index page. You can do this easily by using the [Next.js `Link` component](https://nextjs.org/docs#with-link) inside `index.js` as follows:

```javascript
// pages/index.js
import Link from "next/link";

import Layout from "../components/Layout";

const Index = () => (
  <Layout>
    <br />
    <Link href="/explore">
      <a> Welcome to WHATABYTE! Start Exploring Now</a>
    </Link>
  </Layout>
);

export default Index;
```

The Next.js `Link` component takes a route or navigation path as the value of its `href` property. You can embed any other component within `Link` as long as that component can take an `href` prop.

After the view updates in the browser, visit [`http://localhost:3000/`](http://localhost:3000/) and click on the link. It will take you to the Explore page.

![Next.js app using the Link component](https://images.ctfassets.net/23aumh6u8s0i/p60hqwOc0JhYZ0QZfr89b/9450c893ce78d695ecd3d01ad20313bd/nextjs-practical-introduction_nextjs-app-using-link-component)

Using this link to navigate to another page is good for testing but what the app needs is navigation through the `NavBar` component. To do so, you'd need a `NavButton` component to make the creation of four navigation buttons standard and easy to maintain. 

To make the buttons look nice, you'll use the [FontAwesome icons](https://fontawesome.com/icons?d=gallery). Using another console window or tab, install the following packages:

```bash
npm i @fortawesome/fontawesome-svg-core \
  @fortawesome/free-solid-svg-icons \
  @fortawesome/react-fontawesome
```

* Windows PowerShell:

```bash
npm i @fortawesome/fontawesome-svg-core `
  @fortawesome/free-solid-svg-icons `
  @fortawesome/react-fontawesome
```

Creating the navigation bar dynamically would be much easier if you can encapsulate all of its configuration in a file. Under the `whatabyte` directory, create a `config` subdirectory:

```bash
mkdir config
```

Within that new subdirectory, create a `buttons.js` file within it:

```bash
touch config/buttons.js
```

* Windows PowerShell:

```bash
ni config/buttons.js
```

Then, populate `buttons.js` as follows:

```javascript
// config/buttons.js

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faCompass,
  faMapMarkerAlt,
  faUser,
  faShoppingCart
} from "@fortawesome/free-solid-svg-icons";

const navButtons = [
  {
    label: "Explore",
    path: "/explore",
    icon: <FontAwesomeIcon icon={faCompass} />
  },
  {
    label: "Near Me",
    path: "/nearme",
    icon: <FontAwesomeIcon icon={faMapMarkerAlt} />
  },
  {
    label: "My Cart",
    path: "/mycart",
    icon: <FontAwesomeIcon icon={faShoppingCart} />
  },
  {
    label: "Profile",
    path: "/profile",
    icon: <FontAwesomeIcon icon={faUser} />
  }
];

export default navButtons;
```

Then, under the `components` directory, create a `NavButton.js` file that exports the `NavButton` component:

```bash
touch components/NavButton.js
```

* Windows PowerShell:

```bash
ni components/NavButton.js
```

Then, populate `NavButton.js` with the following:

```javascript
// components/NavButton.js

import Link from "next/link";

import "./NavButton.scss";

const NavButton = props => (
  <Link href={props.path}>
    <div className="NavButton">
      <div className="Icon">{props.icon}</div>
      <span className="Label">{props.label}</span>
    </div>
  </Link>
);

export default NavButton;
```

The `NavButton` needs its proper styling. Create `NavButton.scss` as a sibling file:

```bash
touch components/NavButton.scss
```

* Windows PowerShell:

```bash
ni components/NavButton.scss
```

Then, populate `NavButton.scss` with the following [style rules](https://sass-lang.com/documentation/style-rules):

```scss
// components/NavButton.scss

.NavButton {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  height: 100%;

  cursor: pointer;

  .Icon {
    font-size: 20px;
  }

  .Label {
    font-size: 12px;
    text-transform: capitalize;
  }
}
```

Import the button configuration file in the `Layout` component and pass its data as the `navButtons` props to the `NavBar` component:

```javascript
// components/Layout.js
import Head from "next/head";

import Header from "./Header";
import NavBar from "./NavBar";

import "./Layout.scss";
import "./index.scss";

import navButtons from "../config/buttons";

const Layout = props => {
  const appTitle = `> WHATABYTE`;

  return (
    <div className="Layout">
      <Head>
        <title>WHATABYTE</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta charSet="utf-8" />
      </Head>

      <Header appTitle={appTitle} />
      <div className="Content">{props.children}</div>
      <NavBar navButtons={navButtons} />
    </div>
  );
};

export default Layout;
```

It's better for the `Layout` component to be the one responsible for passing the button configuration to the `NavBar` component as it is in charge of enforcing a consistent structure for each page of the application. If you wanted to keep `Layout` as a presentational component, then you could wrap it into a container component that passes it the button configuration data.

To render the buttons within the `NavBar` component, update the content of the `NavBar.js` file as follows:

```javascript
// components/NavBar.js

import "./NavBar.scss";
import NavButton from "./NavButton";

const NavBar = props => (
  <div className="NavBar">
    {props.navButtons.map(button => (
      <NavButton
        key={button.path}
        path={button.path}
        label={button.label}
        icon={button.icon}
      />
    ))}
  </div>
);

export default NavBar;
```

If your app is not running, execute `npm run dev` in the terminal. Otherwise, visit [`http://localhost:3000/`](http://localhost:3000/) directly and then click on the Profile button. You'll be taken to the Profile page. Try using the other navigation buttons. 

> If the labels and icons of the buttons look too big, refresh the page.

Did you notice a bit of delay when you navigated from page to page? If you look at the terminal window or tab where the server is running, you may see a message from Next.js explaining that the pages need to be compiled when you first load them, causing a small delay:

```bash
Note that pages will be compiled when you first load them.
```

The navigation bar becomes much more functional and expressive by having those buttons with icons and labels on them. However, adding a visual indicator of what view is active by looking at the navbar would further improve the user experience. You'll learn how to do that in the next section by applying the `.active` CSS class to `NavButton` components dynamically.

<include src="TweetQuote" quoteText="Learn how to add navigation and routing to Next.js apps."/>

## Using High-Order Components with Next.js

The Next.js `Link` component has two main props:

- `href` specifies a path inside the `pages` directory to use as a route.

- `as` is used to customize the path rendered in the browser URL bar. 

 
There's no "active" class prop that we can pass to it. To style it, you need to do so within its underlying components.

The Next.js router keeps track of the active page through a `router.pathname` property. To inject the `pathname` prop in your component, you can use the [`withRouter` higher-order component](https://nextjs.org/docs#using-a-higher-order-component). Using this prop with conditional styling will let you have a distinctive style for the active page button. 

Open `components/NavButton.js` and update its content to this:

```javascript
// components/NavButton.js

import Link from "next/link";
import { withRouter } from "next/router";

import "./NavButton.scss";

const NavButton = props => (
  <Link href={props.path}>
    <div
      className={`NavButton ${
        props.router.pathname === props.path ? "active" : ""
      }`}
    >
      <div className="Icon">{props.icon}</div>
      <span className="Label">{props.label}</span>
    </div>
  </Link>
);

export default withRouter(NavButton);
```

If the `path` prop matches the `router.pathname` prop, the `active` class is added to the `NavButton` class name. Save your changes and test the navigation buttons in the browser. Once you click on a button, its icon lights up into an orange-red-like color.

![Next.js nav bar with active view indicator](https://images.ctfassets.net/23aumh6u8s0i/7CGRo1E2kEu4n0r74at5x1/c43e0ae420ce84103ca404111249cc58/nextjs-practical-introduction_nextjs-nav-bar-with-active-view-indicator)

## Recap

In this part of the tutorial, you have learned how to use Next.js built-in components to navigate to pages within your app and to represent the state of the router through navigation UI elements. 

You've done a lot so far throughout this tutorial and there is a lot more than could be done using Next.js! The last part of this practical introduction to Next.js will teach you how to create a login page and add user authentication to your app using Passport.js and Auth0.

Again, you can reference [Part 2 for adding styling and creating themes, here](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-2/) and [Part 1 for creating pages and a page layout](https://auth0.com/blog/next-js-practical-introduction-for-react-developers-part-1/)

> Can't wait to learn about Next.js authentication? Feel free to read Bruno's [Next.js Authentication Tutorial](https://auth0.com/blog/next-js-authentication-tutorial/).

<include src="asides/AboutAuth0" />


Next.js Practical Introduction: Navigation and Routing

Learn how to handle styling and theming while using Next.js to build server-side rendered React applications.

Next.js Practical Introduction: Styling and Theming

indermohan-singh

Indian expat living and working in Vienna, Austria. Besides programming,  I love Music. I sing Bollywood and Indian Classical Music. Perfect by Ed Sheeran is my Go to song for Karaoke. I also like to run and in the process of running a marathon. I am also the author of "Ionic 2 Blueprints" and co-authored "Ionic Cookbook". Apart from that, I am a GuestAuthor at Auth0 and LogRocket Blogs.

Mobile Developer

Indermohan Singh

Learn how to create an Audio Player app using Angular, Material Design and RxJS.

Building an Audio Player app with Angular and RxJS

ramiro

I am an internet guy who loves reading and asking questions—those are the two things that helped me the most as an autodidact 🤓. If I am not learning about the latest trends in digital marketing or listening to house music, you can probably find me watching a tennis tournament. And also, I manage Social Media at Auth0 ✌️

Manager, Social Media

Ramiro Nunez Dosio

Our 10 most-popular developer posts in 2018 ranging from front-end development to open source contributions.



Time flies when you are having fun. It's December already and we are getting ready to wrap up this year. 2018 was a prolific year for the Auth0 blog: we published more than 200 posts (😱) where we tackled a diverse amount of topics: frontend and backend technologies, data breaches, GDPR, Cybersecurity, Company Culture, and of course, Identity.

We believe looking back is key to look ahead. That is why this week, we are going to take a look back at the best and most impactful posts we have published in 2018.

One article wouldn't be enough to review this amazing year, that's why we have decided to split this year in review into 3 parts: Developer Posts, [Security Posts](https://auth0.com/blog/10-most-popular-security-posts-in-2018/), and [Identity Posts](https://auth0.com/blog/10-most-popular-identity-posts-in-2018/).

Without much further ado, here's the roundup of our 10 most-popular developer posts this year!

![Auth0's 10 Most-Popular Developer Posts](https://images.ctfassets.net/23aumh6u8s0i/6d6NAZbouw2Vm6KKuUxGkp/332d039ec84578561690ab2702ec30bf/auth0-blog-best-of-2018-developer-posts)

## <a name="Auth0s10Most-PopularDeveloperPostsin2018-How-tosTutorialsandMor"></a>Auth0's 10 Most-Popular Developer Posts in 2018 - How-to's, Tutorials, and More

> The following posts are not listed in any particular order.

1. <a href="#TheCompleteGuideToDeployingJavaScriptApplications-Part1" target="_self">The Complete Guide To Deploying JavaScript Applications - Part 1: Database, and API Deployment</a>
2. <a href="#ReactiveProgramminginPythonhttps" target="_self">Reactive Programming in Python</a>
3. <a href="#ReactTutorial" target="_self">React Tutorial: Building and Securing Your First App</a>
4. <a href="#DevelopingWebAppswithASP.NETCore2.0andReact-Part1https" target="_self">Developing Web Apps with ASP.NET Core 2.0 and React - Part 1</a>
5. <a href="#UsingPythonFlaskandAngulartoBuildModernWebApps-Part1https" target="_self">Using Python, Flask, and Angular to Build Modern Web Apps - Part 1</a>
6. <a href="#Vue.jsKanbanBoard" target="_self">Vue.js Kanban Board: The Development Process</a>
7. <a href="#BestPracticesinAndroidDevelopmenthttps" target="_self">Best Practices in Android Development</a>
8. <a href="#Real-TimeChartsusingAngularD3andSocket.IOhttps" target="_self">Real-Time Charts using Angular, D3, and Socket.IO</a>
9. <a href="#DevelopingReal-TimeWebApplicationswithServer-SentEventshttps" target="_self">Developing Real-Time Web Applications with Server-Sent Events</a>
10. <a href="#AFirstTimersGuidetoanOpenSourceProjecthttps" target="_self">A First Timers Guide to an Open Source Project</a>

## <a name="TheCompleteGuideToDeployingJavaScriptApplications-Part1"></a>1. [The Complete Guide To Deploying JavaScript Applications - Part 1: Database, and API Deployment](https://auth0.com/blog/the-complete-guide-to-deploying-javascript-applications-part-1/)

Atwood's law states that _Any application that can be written in JavaScript, will eventually be written in JavaScript._ In 2018, eleven years after this law was proposed, JavaScript is now the most popular language in the world. In this tutorial, you'll learn how to deploy your JavaScript applications to different cloud platforms such as Google Cloud, Microsoft Azure, Netlify, and others.

<AmpContent>
<a href="https://auth0.com/blog/the-complete-guide-to-deploying-javascript-applications-part-1/">
  <amp-img width="1.5" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/53GC5Ijur7QUmJR6wFiEOr/168205ab0c6003fa00829e1155e70236/awscreatetable" alt="Amazon DynamoDB"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/the-complete-guide-to-deploying-javascript-applications-part-1/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/jsdeploy/awscreatetable.png" alt="Amazon DynamoDB"/>
  </a>
</div>

</NonAmpContent>

## <a name="ReactiveProgramminginPythonhttps"></a>2. [Reactive Programming in Python](https://auth0.com/blog/reactive-programming-in-python/)

In this tutorial, you’ll be learning how to use the RxPy library to create asynchronous and event-based programs by implementing observables, observers/subscribers, and subjects. You will start by getting our data stream from the GitHub API with a Tornado web socket and then you will filter and process it asynchronously. [In this GitHub repository](https://github.com/valerybriz/RxGithubSearcher), you can find the code that we are going to create in this tutorial.

<AmpContent>
<a href="https://auth0.com/blog/reactive-programming-in-python/">
  <amp-img width="1.5" height="0.7" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/4nxuqP7IqV1gHEsO9abqjL/9a49e46dab847b8f010d9b3ed92d0609/combine-latest" alt="RxPy combineLatest marble diagram"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/reactive-programming-in-python/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/10-most-read-technical-articles-in-2018/combine-latest.png" alt="RxPy combineLatest marble diagram"/>
  </a>
</div>

</NonAmpContent>

## <a name="ReactTutorial"></a>3. [React Tutorial: Building and Securing Your First App](https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/)

In this article, you will learn the basic concepts of React. After that, you will have the chance to see React in action while creating a simple Q&A (Questions & Answers) app that relies on a backend API. If needed, you can check [this GitHub repository to check the code that supports this article](https://github.com/auth0-blog/react-tutorial). Have fun!

<AmpContent>
<a href="https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/">
  <amp-img width="1.5" height="0.95" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/SMBzTsEDRhGQGjRdfOXat/abf9d57a0f2163d77c95c30aaaf0204c/q-and-a-app" alt="React Q&A app"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/react-tutorial-building-and-securing-your-first-app/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/react-tutorial/q-and-a-app.png" alt="React Q&A app"/>
  </a>
</div>

</NonAmpContent>

## <a name="DevelopingWebAppswithASP.NETCore2.0andReact-Part1https"></a>4. [Developing Web Apps with ASP.NET Core 2.0 and React - Part 1](https://auth0.com/blog/developing-web-apps-with-asp-dot-net-core-2-dot-0-and-react-part-1/)

In this series of posts, you will build a Web application based on ASP.NET Core 2.0 and React. To solve the identity management feature, you will integrate this stack with [Auth0](https://auth0.com/). In this first part of the series, you are going to use ASP.NET Core 2.0 to develop the APIs of your application. [The final code can be found in this GitHub repository](https://github.com/andychiare/netcore2-auth0).

<AmpContent>
<a href="https://auth0.com/blog/developing-web-apps-with-asp-dot-net-core-2-dot-0-and-react-part-1/">
  <amp-img width="1.5" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/3VdEYdUZjg1dZ8CjKW7FFy/e6dacc131f59c2ab0459cb72a6addb6a/creating-project" alt="Creating an ASP.NET Core Web App with Visual Studio"> </amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/developing-web-apps-with-asp-dot-net-core-2-dot-0-and-react-part-1/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/dotnet-core-react/creating-project.png" alt="Creating an ASP.NET Core Web App with Visual Studio"/>
  </a>
</div>

</NonAmpContent>

## <a name="UsingPythonFlaskandAngulartoBuildModernWebApps-Part1https"></a>5. [Using Python, Flask, and Angular to Build Modern Web Apps - Part 1](https://auth0.com/blog/using-python-flask-and-angular-to-build-modern-apps-part-1/)

In this series, you will learn how to create modern web applications with Python, Flask, and Angular. You will use this stack to build a single-page application (SPA) and a backend API to expose exams and questions so users can test their knowledge regarding different technologies. [In this GitHub repository](https://github.com/auth0-blog/python-flask-angular-1), you can find the final code created throughout the first part of the series.

<AmpContent>
<a href="https://auth0.com/blog/using-python-flask-and-angular-to-build-modern-apps-part-1/">
  <amp-img width="1.5" height="0.75" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/1IfSLdFZd6LkXpiDgD6GWX/30ef9e44980a5b9fd549b8115db508d3/fetching-data" alt="Using Angular to fetch data from a Flask application"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/using-python-flask-and-angular-to-build-modern-apps-part-1/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/flask-angular/fetching-data.png" alt="Using Angular to fetch data from a Flask application"/>
  </a>
</div>

</NonAmpContent>

## <a name="Vue.jsKanbanBoard"></a>6. [Vue.js Kanban Board: The Development Process](https://auth0.com/blog/vuejs-kanban-board-the-development-process/)

In this article, you will use Vue.js (the progressive
JavaScript framework) to build an interactive Kanban board in the browser. The complete source code for [this project is available on a GitHub repository](https://github.com/elkdanger/kanban-board) and [there is a demo available online](https://kanban.elkdanger.co.uk) of the finished project.

<AmpContent>
<a href="https://auth0.com/blog/vuejs-kanban-board-the-development-process/">
  <amp-img width="2" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/34JnBo0Yc1RwsWU3fPhGgy/68881fae75371f2ef43ba9cf3b6913ac/new-item-component" alt="Kanban board preview"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/vuejs-kanban-board-the-development-process/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/vuejs-kanban/new-item-component.png" alt="Kanban board preview"/>
  </a>
</div>

</NonAmpContent>

## <a name="BestPracticesinAndroidDevelopmenthttps"></a>7. [Best Practices in Android Development](https://auth0.com/blog/best-practices-in-android-development/)

Best practices are simply professional standards that are acceptable in a field. In this post, you will look at such practices as it relates to Android development.

<AmpContent>
<a href="https://auth0.com/blog/best-practices-in-android-development/">
  <amp-img width="1" height="0.96" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/xUNLk6pd2SlY3RpC03DxS/aea85be3d402071f014e2f1aa1149106/viewmodel-lifecycle" alt="The lifecycle of an Activity as compared to that of a ViewModel"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/best-practices-in-android-development/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/android-best-practices/viewmodel-lifecycle.png" alt="The lifecycle of an Activity as compared to that of a ViewModel"/>
  </a>
</div>

</NonAmpContent>

## <a name="Real-TimeChartsusingAngularD3andSocket.IOhttps"></a>8. [Real-Time Charts using Angular, D3, and Socket.IO](https://auth0.com/blog/real-time-charts-using-angular-d3-and-socket-io/)

Charts create some of the most catchy sections on any business applications. A chart that updates in real time is even more catchy/useful and adds huge value to users. Here, you will see how to create real-time charts using Angular, D3, and Socket.IO. You can find the final code produced throughout this article in [this GitHub repository](https://github.com/auth0-blog/angular-d3-socketio).

<AmpContent>
<a href="https://auth0.com/blog/real-time-charts-using-angular-d3-and-socket-io/">
  <amp-img width="1.6" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/5KHFbR84G0MCW5LuWqjRkl/0eef204a5b72bb81cf017ed7c08766b2/d3-charts-with-static-data" alt="Showing a D3 chart with static data in an Angular application."></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/real-time-charts-using-angular-d3-and-socket-io/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/angular-d3-socketio/d3-charts-with-static-data.png" alt="Showing a D3 chart with static data in an Angular application."/>
  </a>
</div>

</NonAmpContent>

## <a name="DevelopingReal-TimeWebApplicationswithServer-SentEventshttps"></a>9. [Developing Real-Time Web Applications with Server-Sent Events](https://auth0.com/blog/developing-real-time-web-applications-with-server-sent-events/)

Server-Sent Events (SSE) is a standard that enables Web servers to push data in real time to clients. In this article, we will learn how to use this standard by building a flight timetable demo application with React and Node.js. However, the concepts you will learn following this tutorial are applicable to any programming language and technology. [You can find the final code of the application in this GitHub repository](https://github.com/andychiare/server-sent-events).

<AmpContent>
<a href="https://auth0.com/blog/developing-real-time-web-applications-with-server-sent-events/">
  <amp-img width="2.1" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/7MwSxNH2e21wVVivNZQZlk/4355791a943ddbaeaf02a8fd4a9bb9a9/developing-real-time-web-applications" alt="Real-time flights tracker timetable"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/developing-real-time-web-applications-with-server-sent-events/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/server-sent-events/developing-real-time-web-applications.png" alt="Real-time flights tracker timetable"/>
  </a>
</div>

</NonAmpContent>

## <a name="AFirstTimersGuidetoanOpenSourceProjecthttps"></a>10. [A First Timers Guide to an Open Source Project](https://auth0.com/blog/a-first-timers-guide-to-an-open-source-project/)

On open source in general, contributions by first-timers and code newbies are encouraged, because that is the essence of open source: Learning and collaboration, together, for the benefit of everyone. It can be scary and a little overwhelming the first time, but there are projects and [events like Hacktoberfest](https://auth0.com/blog/celebrate-hacktoberfest-with-auth0/) out there tailored to helping you to get involved and gain confidence in making your first contribution.

<AmpContent>
<a href="https://auth0.com/blog/a-first-timers-guide-to-an-open-source-project/">
  <amp-img width="1.86" height="1" layout="responsive" src="https://images.ctfassets.net/23aumh6u8s0i/2gqWE52GkPXd9SGFSNWjnC/95fd686c507fb7e58d3ce19975b68c87/step-2-github-generates-a-fork-repository-for-you" alt="GitHub will generate a copy of the repository"></amp-img>
</a>

</AmpContent>

<NonAmpContent>

<div class="clickable-image">
  <a href="https://auth0.com/blog/a-first-timers-guide-to-an-open-source-project/">
  <img class="no-lightbox" src="https://cdn.auth0.com/blog/a-first-timers-guide-to-an-open-source-project/step-2-github-generates-a-fork-repository-for-you.png" alt="GitHub will generate a copy of the repository"/>
  </a>
</div>

</NonAmpContent>

## <a name="WhatsNex"></a>What's Next?

We are already preparing our content pipeline for 2019. The world of technology keeps evolving very fast and it's our duty to keep our blog fresh and updated with all its upcoming trends and changes. We have a commitment to keep improving the quality of our products, services, and content. We'd like to take this opportunity to thank all of our readers for their consistent support and feedback.

Is there anything that you'd like us to cover in 2019? Any particular trend, topic, or technique? Please let us know in the comments below or through social media ([Twitter](https://twitter.com/auth0), [LinkedIn](https://www.linkedin.com/company/auth0)). As always, you can subscribe to our newsletter to receive a weekly digest of our blog content.

Happy Holiday Season!

<include src="asides/AboutAuth0" />


10 Most-Popular Developer Posts in 2018

RxJs 6 is out to provide developers with improvements in modularity, a boost in performance and easier to debug call stacks.



RxJs 6 is out and with it new exciting additions and changes! [Ben Lesh](https://twitter.com/BenLesh) [highlights that RxJS 6](https://twitter.com/BenLesh/status/988922021705756672) brings cleaner imports while having a smaller API, a backward compatibility package to update without changing your code, and automatic code migration for TypeScript.

These changes provide developers with improvements in modularity, a boost in performance and easier to debug call stacks. The RxJS team has made a solid effort on making this release as backward compatible as possible. However, in an effort to reduce the API surface of the RxJS library, some breaking changes were introduced.

<include src="TweetQuote" quoteText="RxJS 6 brings improvements in modularity, a boost in performance and easier to debug call stacks. The RxJS team has made a solid effort on making this release as backward compatible as possible"/>

Let's explore what the RxJS team has included and changed in this new release.

## RxJS 6 Backward Compatibility

To make the migration path from RxJS 5 to RxJS 6, the RxJS team has released a sibling package called `rxjs-compat`. This package creates a compatibility layer between the APIs of `v6` and `v5`.

The team recommends that most developer upgrade existing applications by installing both `rxjs` and [`rxjs-compat`](https://www.npmjs.com/package/rxjs-compat) at `^6.0.0`:

```bash
npm install rxjs@6 rxjs-compat@6 --save
```

This package allows you to continue running your existing codebase without issues while you implement the RxJS 6 upgrades. It supports functionality that is removed with the release of RxJS 6.

The bundle size of your application will increase with the installation of `rxjs-compat`; this effect is amplified if your project also integrates with Webpack < `4.0.0`. Therefore, it is recommended that `rxjs-compat` is removed from your project once the upgrade process has been completed.

<include src="TweetQuote" quoteText="rxjs-compat makes it easy to upgrade to RxJS 6 as it creates a compatibility layer between the APIs of v6 and v5. This layer provides your codebase with functionality that is being removed in v6 so that you can upgrade gradually."/>

> Upgrading to RxJS 6 may introduce type errors in your codebase that were not previously shown.

## Limitations of Upgrading to RxJS with rxjs-compat

There are only two breaking changes that are not covered by the `rxjs-compat` package:

### TypeScript prototype operators

In the rare instance that your codebase defines its own TypeScript prototype operators and modifies the `Observable` namespace, your operator code would need to be updated in order for TypeScript to compile.

From the release notes examples, a user-defined prototype operator can be created as follows:

```javascript
Observable.prototype.userDefined = () => {
  return new Observable((subscriber) => {
    this.subscribe({
      next(value) { subscriber.next(value); },
      error(err) { subscriber.error(err); },
      complete() { subscriber.complete(); },
   });
  });
});

source$.userDefined().subscribe();
```

To compile the previously custom operator, the following changes would need to be made:

```javascript
const userDefined = <T>() => (source: Observable<T>) => new Observable<T>((subscriber) => {
    this.subscribe({
      next(value) { subscriber.next(value); },
      error(err) { subscriber.error(err); },
      complete() { subscriber.complete(); },
   });
  });
});

source$.pipe(
  userDefined(),
)
```

### Synchronous error handling

Calling `Observable.subscribe()` within a `try/catch` block is no longer supported. Instead, replace the `try/catch` block with asynchronous error handling done with the `error` callback in the `Observable.subscribe()` method.

As shown in the release notes:

```javascript
// deprecated
try {
  source$.subscribe(nextFn, undefined, completeFn);
} catch (err) {
  handleError(err);
}

// use instead
source$.subscribe(nextFn, handleError, completeFn);
```

`Observable.subscribe()` now _must_ define an `error` callback to handle errors asynchronously.

## Changes to Make Before Dropping the RxJS Compatibility Layer

As mentioned earlier, `rxjs-compat` provides a temporary compatibility layer between the APIs of `v5` and `v6`. Essentially, `rxjs-compat` provisions your codebase with functionality from `v5` that it relies on, allowing you to gradually upgrade your codebase to `v6`. To complete the upgrade process and remove the `rxjs-compat` dependency from your project, your codebase would need to be refactored to stop relying on that `v5` functionality which includes:

### Changes to `import` paths

The recommendation for TypeScript developers is to use [`rxjs-tslint`](https://github.com/reactivex/rxjs-tslint) to refactor `import` paths.

The following rules have been designed by the RxJS team to help JavaScript developers refactor `import` paths:

- `rxjs`: Contains creation methods, types, schedulers, and utilities.

```javascript
import {
  Observable,
  Subject,
  asapScheduler,
  pipe,
  of,
  from,
  interval,
  merge,
  fromEvent
} from "rxjs";
```

- `rxjs/operators`: Contains all pipeable operators.

```javascript
import { map, filter, scan } from "rxjs/operators";
```

- `rxjs/webSocket`: Contains the web socket subject implementation.

```javascript
import { webSocket } from "rxjs/webSocket";
```

- `rxjs/ajax`: Contains the Rx ajax implementation.

```javascript
import { ajax } from "rxjs/ajax";
```

- `rxjs/testing`: Contains the testing utilities for RxJS.

```javascript
import { TestScheduler } from "rxjs/testing";
```

<blockquote class="twitter-tweet" data-conversation="none" data-lang="en"><p lang="en" dir="ltr">Have you tried updating your app using rxjs-tslint?</p>&mdash; Ben Lesh 🛋️👑🔥 (@BenLesh) <a href="https://twitter.com/BenLesh/status/989268922556862464?ref_src=twsrc%5Etfw">April 25, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### Use Piping Instead of Chaining

Use piping instead of chaining as new operator syntax. The result of one operator is piped into another operator.

Don't remove `rxjs-compat` until you have refactored all chained operators into piped operators. If you are a TypeScript user, `ts-lint` can automate this refactoring to some extent for well-typed code.

During [ng-conf 2018](https://www.ng-conf.org/sessions/introducing-rxjs6/), Ben Lesh explained [why we should use pipeable operators](https://youtu.be/JCXZhe6KsxQ?t=2m30s):

![Ben Lesh explains why developers should use pipeable operators](https://images.ctfassets.net/23aumh6u8s0i/3WMn85RnW3N0ztWOCEhYJr/d5de9ed4df276d7f126daad274d4688d/ng-conf-ben-lesh-rxjs-6)

Follow these steps to reactor your operator chains into pipes:

- Install all operators used from `rxjs/operators`.

> **Note** Some operators have a name change due to name collisions with JavaScript reserved words! These include: `do` -> `tap`, `catch` -> `catchError`, `switch` -> `switchAll`, `finally` -> `finalize`.

```javascript
import { map, filter, catchError, mergeMap } from "rxjs/operators";
```

- Attach a [`pipe()`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pipe) method to the source and wrap all the operators within it. Ensure that the `.` is removed from each operator name and that they are comma-delimited. Remember that some operators need to change their names.

The following is an example of a pipeable refactoring from the release notes:

```javascript
// an operator chain
source
  .map(x => x + x)
  .mergeMap(n =>
    of(n + 1, n + 2)
      .filter(x => x % 1 == 0)
      .scan((acc, x) => acc + x, 0)
  )
  .catch(err => of("error found"))
  .subscribe(printResult);

// must be updated to a pipe flow

source
  .pipe(
    map(x => x + x),
    mergeMap(n =>
      of(n + 1, n + 2).pipe(
        filter(x => x % 1 == 0),
        scan((acc, x) => acc + x, 0)
      )
    ),
    catchError(err => of("error found"))
  )
  .subscribe(printResult);
```

Notice how we use `pipe()` twice in the above code as internal sources are also piped.

### Use Functions instead of Classes

Functions have replaced classes that operate on observables. All [observable classes](https://github.com/ReactiveX/rxjs/tree/5.5.8/src/observable) have been removed. Their functionality is replaced by existing operators, new operators, or functions. Each of their replacement has the same functionality that each class had.

For example:

```javascript
// removed
ArrayObservable.create(myArray)

// use instead

from(myArray)

// you may also use

new operator fromArray().
```

For a complete list of the `v6` creation functions that replace `v5` classes, please visit the [RxJS documentation](https://github.com/ReactiveX/rxjs).

**Special case:**

- [`ConnectableObservable`](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/ConnectableObservable.ts) is hidden from direct use in `v6`. To access it, use the operators [`multicast`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-multicast), [`publish`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-publish), [`publishReplay`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-publishReplay), [`publishLast`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-publishLast).
- [`SubscribeOnObservable`](https://github.com/ReactiveX/rxjs/blob/master/spec/observables/SubscribeOnObservable-spec.ts) is hidden from direct use in `v6`. To access it, use the operator [`subscribeOn`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-subscribeOn).

### Removing resultSelector

Result selectors are a RxJS feature that is not widely used and in some cases wasn't even documented. However, result selectors did bloat the codebase significantly; thus, the RxJS team decided to deprecate or remove them.

For developers making use of result selectors, they would need to replace the `resultSelector` parameter with external result-selection code.

For two functions, [`first()`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-first) and [`last()`](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-last) these parameters have been removed and must be updated before removing `rxjs-compat`.

For other functions that have `resultSelector` as a parameter, such as mapping operators, this parameter has been deprecated and their implementation has been re-written in a much more compact form. If you remove `rxjs-compat`, these function will continue to work; however, the RxJS team states that they must be removed before the `v7` release.

For more details on this rare implementation, please visit the [RxJS documentation](https://github.com/ReactiveX/rxjs).

## Other RxJS 6 Deprecations

### `Observable.if` and `Observable.throw`.

[`Observable.if`](http://reactivex.io/rxjs/file/es6/observable/if.js.html) has been replaced by [`iif()`](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/iif.ts) and [`Observable.throw`](http://reactivex.io/rxjs/file/es6/observable/throw.js.html) is now [`throwError()`](https://github.com/ReactiveX/rxjs/blob/master/src/internal/observable/throwError.ts). You can use `rxjs-tslint` to convert these deprecated `Observable` method calls into function calls.

The release notes gives us the following example:

#### Observable.if > iif()

```javascript
// deprecated
Observable.if(test, a$, b$);

// use instead

iif(test, a$, b$);
```

#### Observable.error > throwError()

```javascript
// deprecated
Observable.throw(new Error());

//use instead

throwError(new Error());
```

### Deprecated Methods

According to the migration guide, other methods have been deprecated and refactored:

**merge**

```javascript
import { merge } from "rxjs/operators";
a$.pipe(merge(b$, c$));

// becomes

import { merge } from "rxjs";
merge(a$, b$, c$);
```

**concat**

```javascript
import { concat } from "rxjs/operators";
a$.pipe(concat(b$, c$));

// becomes

import { concat } from "rxjs";
concat(a$, b$, c$);
```

**combineLatest**

```javascript
import { combineLatest } from "rxjs/operators";
a$.pipe(combineLatest(b$, c$));

// becomes

import { combineLatest } from "rxjs";
combineLatest(a$, b$, c$);
```

**race**

```javascript
import { race } from "rxjs/operators";
a$.pipe(race(b$, c$));

// becomes

import { race } from "rxjs";
race(a$, b$, c$);
```

**zip**

```javascript
import { zip } from "rxjs/operators";
a$.pipe(zip(b$, c$));

// becomes

import { zip } from "rxjs";
zip(a$, b$, c$);
```

## Recap

RxJS 6 brings some breaking changes but they are mitigated by the addition of the `rxjs-compat` package that allows you to gradually migrate while keeping your `v5` code operational. For TypeScript users, which cover the majority of Angular developers, `tslint` offers a great deal of automated refactoring to make the transition even easier.

As always, any upgrades and code changes may invite bugs into the codebase or even make elusive ones resurface. Solid testing practices should always be in place to ensure that your users keep receiving the same quality experience that you were providing them when `v5` was part of your codebase.

Watch the complete introduction to RxJS 6 by Ben Lesh:

<p style="text-align: center;">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/JCXZhe6KsxQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</p>

<include src="asides/AboutAuth0" />


RxJS 6: What's new and what has changed?

eHk3ciM

I am the Group Manager, Developer Content at Okta, and a Google Developer Expert in Web Technologies and Angular. I'm passionate about identity, authentication, constant learning, and developer communities. As a developer advocate, engineer, mentor, and international speaker, I love learning from and sharing with other inhabitants of the tech space.

Group Manager, Developer Content

Kim Maida

Explore building an app in the functional front-end language Elm. Part 2 focuses on adding authentication to an Elm App.

Creating Your First Elm App: From Authentication to Calling an API (Part 2)

Explore building an app in the functional front-end language Elm. Part 1 focuses on Elm history, architecture, syntax, and calling an API.

"front-end"