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

React is one of the most popular JavaScript frameworks, and Spring Boot is wildly popular in the Java ecosystem. This article shows you how to use them in the same app and secure it all with Okta.

Use React and Spring Boot to Build a Simple CRUD App

facundo-giuliani

Facundo is a Systems Engineer from Buenos Aires, Argentina with 15+ years of experience in software development. Full Stack Developer. Auth0 Ambassador. GitKraken Ambassador. Cloudinary Media Developer Expert. He is also an open-source contributor.

Systems Engineer, Full Stack Developer

Facundo Giuliani

Most languages and frameworks support asynchronous programming. But, what is it exactly? Learn about async programming and how to implement it in C#.

You probably already read about asynchronous programming. `async` and `await` words are used everywhere, no matter which programming language we choose. Talking about .NET framework, and C# in particular, we have some native functions, classes, and reserved words that we can use to implement asynchronous tasks and workflows in our projects.

In this article, we will talk about synchronism, parallelism, concurrency, and how to implement asynchronous algorithms in our C# applications.

## Synchronous and Asynchronous Tasks

As a developer, you surely faced scenarios where certain actions or operations took a considerable amount of time to execute. We regularly have to do long-running tasks such as reading a file, calling an API, or downloading a big file. We could wait for one of these tasks to be finished before executing another task. If that's the case, we say we are working in a "synchronous" way. By doing this, the whole application gets blocked and stops responding until the whole task is completed, and we can move on to a new one.

In some cases, we don't have any alternative. If we have Task1 and Task2 that depend on the result of the first action, we will have to wait until Task1 finishes executing to start Task2. But we could have the scenario where the subsequent tasks (or some of them) don't depend on the result of the previous long-running task. If that's the case, we have different strategies and approaches that we could take to make our application faster and in a more performant way.

For example, we could have an application that runs concurrent tasks internally. There is a button and a task executed when it is clicked. Right after the user clicks on the button, the application can trigger a separate thread to run the requested task. In the meantime, the main thread becomes available to execute other actions while the button's task is executed in the background. Doing this, we keep the UI responsive in case the user wants to interact with it.

Another scenario would be needing to run multiple copies of a certain group of actions or instructions. An example of this would be uploading many files at the same time. In this case, our application could trigger one thread per file and execute the necessary code inside of them. Doing this, we would be processing the files in a "parallel" way. In a nutshell, here is the difference between the two concepts: concurrency means the application is making progress on more than one task at the same time, while parallelism is about running multiple tasks simultaneously.

But let's say we have to read a big file, call an API, and do some complex calculations. There is no dependency between the three tasks, but we need the result of all of them to continue the execution of our application and update the UI. In this case, we could execute our tasks "asynchronously" with the three ones running simultaneously and wait for their result to do the subsequent tasks.

## What Is Asynchronous Programming?

We could define asynchronous programming as the way of executing programming code in a thread without having to wait for an I/O-bound or CPU-bound task to finish. I/O-bound operations could be file-system accesses, HTTP requests, API calls, or database queries. And CPU-bound operations would be actions like encrypting data, complex calculations, image or document management.

One of the ideas of asynchronous programming is to divide our logic into *awaitable* tasks so that we don't block the execution of our application. We can call an async method and get a task object that represents it. In the meantime, we can do some not related and not dependant work. After we execute those operations, we await the async task, which may already be finished or not. If the execution is finished, we will get the resulting value from the task and use it in the next dependant operations.

### Benefits

Some of the benefits we have working with asynchronous tasks are:

- We keep the UI of our app responsive.
- We improve the performance of our application.
- We avoid [thread pool starvation](https://medium.com/criteo-engineering/net-threadpool-starvation-and-how-queuing-makes-it-worse-512c8d570527).

### Drawbacks

Although, there are some drawbacks when working with async programming:

- Code gets more complex and harder to maintain.
- There is increased memory allocation, as some objects have to stay alive longer while awaiting other code to be executed.
- It can get hard to find bugs occurring in asynchronous tasks.
- When we're writing an asynchronous piece of code, all our application code tends to become asynchronous.

## Asynchronous Programming Patterns

To perform asynchronous operations in .NET, we can follow three different patterns:

**Asynchronous Programming Model (APM)**: Let's say we have two methods, and we name them `BeginOperation` and `EndOperation`. After calling `BeginOperation`, our application can continue executing tasks on the calling thread while the async task is executed on a different thread. For each call to `BeginOperation`, our app should also call `EndOperation` method to get the results. In .NET, it can be implemented using `IAsyncResult`. Let's see an example of this model:

```csharp
using System;
using System.IO;
using System.Threading;
public sealed class Program
{
    public static void Main()
    {
        var buffer = new byte[100];
        var fs = new FileStream("bigFile.txt", FileMode.Open, FileAccess.Read, FileShare.Read, 1024, FileOptions.Asynchronous);

        IAsyncResult result = fs.BeginRead(buffer, 0, buffer.Length, null, null);

        // Do other things...

        int numBytes = fs.EndRead(result);
        fs.Close();

        Console.WriteLine("Read {0}  Bytes:", numBytes);
    }
}
```

**Event-based Asynchronous Pattern (EAP)**: We start an async method that will trigger a `Completed` event when the task is completed, making the result available to our application. This would be an example of this model:

```csharp
public class ExampleHandler
{
    public event EventHandler OnTriggerCompleted;

    public void Start(int timeout)
    {
        var timer = new Timer(new TimerCallback((state) =>
        {
            OnTriggerCompleted?.Invoke(null, null);
        }));

        timer.Change(timeout, 0);
    }
}

class Program
{
    private static void Main()
    {
        var handler = new ExampleHandler();

        handler.OnTriggerCompleted += (sender, e) =>
        {
            Console.WriteLine($"Triggered at: { DateTime.Now.ToLongTimeString()}");
        };

        handler.Start(3000);

        Console.WriteLine($"Start waiting at {DateTime.Now.ToLongTimeString()}");
        Console.WriteLine($"Processing...");
        Console.ReadLine();
    }
}
```

**Task-based Asynchronous Pattern (TAP)**: We have an `OperationAsync` method that returns a `Task` object, as in the following example:

```csharp
class ClassName
{
    public Task OperationAsync(byte [] buffer, int offset, int count);
}
```

 We can await that method, using `async` and `await` keywords. We will go deeper into this approach in a while.

> Keep in mind that **the APM and EAP approaches are legacy models and they are no longer recommended**. Microsoft recommends using the *Task-based Asynchronous Pattern* to implement async programming in our applications.

## Asynchronous Programming in C#

As we mentioned, async programming in C# can be accomplished by implementing the *Task-based Asynchronous Pattern*. We will have methods that return a `Task` or `Task<T>` object. Defining those methods as async operations will enable us to await them and keep using the same execution thread to run other operations that are not linked to the awaited task.

C# provides us two keywords to handle `Task` objects in an easier way: `async` and `await`. Adding the keyword `async` to a method signature allows us to use the `await` keyword inside the method while instructs the compiler to create a state machine to handle the asynchronicity. On the other hand, the `await` keyword is used to pause the execution of a method and asynchronously wait for a `Task` to finish, while the current thread is sent back to the thread pool instead of keeping it in a blocked state. Everything happens in the background, avoiding us to implement and maintain the complexity of thread management and the state of the calls.

Let's analyze this piece of code:

```csharp
public async Task<User> GetLoggedUserEmailAsync()
{
  int userId = GetId();
  string email = await GetEmailAsync(userId);
  User user = GetUserByEmail(email);
  return user;
}

public async Task<string> GetEmailAsync(int userId)
{
  // Do something
}
```

An async method should return `void`, `Task`, or `Task<T>`, where `T` is the return data type that we need. Returning `void` is normally used for event handlers. The keyword `async` enables us to use the command `await` within the method so that we can wait for the asynchronous method processing as expected.

Notice that the methods end with "Async". Although it is not mandatory, there is a naming convention that an asynchronous method name should end with the word "Async". This convention aims to make it clear to the consumer of the functionality that the method won't complete all of its work synchronously.

In our previous example, `GetId()` is called synchronously. When the execution thread encounters the `await` keyword on `await GetEmailAsync(userId)`, it creates a `Task<User>` that contains the remainder of the `GetLoggedUserEmailAsync` method. This task is executed asynchronously after the `Task<string>` returned by `GetEmailAsync`. So, the `User` object is returned from the `Task<User>` created by the `await` keyword.

## Asynchronous Code in Action

Let's see a short example to review the concepts previously explained. Having the following console application:

```csharp
using System;
using System.IO;
using System.Threading.Tasks;

class Program
{
   static async Task Main(string[] args)
   {
       string filePath = "bigFile.txt";

       // Create a big file
       FileStream fs = new FileStream(filePath, FileMode.CreateNew);
       fs.Seek(1024 * 1024, SeekOrigin.Begin);
       fs.WriteByte(0);
       fs.Close();

       var task = ReadFileAsync(filePath);

       Console.WriteLine("A synchronous message");

       int length = await task;

       Console.WriteLine("Total file length: " + length);
       Console.WriteLine("After reading message");
       Console.ReadLine();
   }

   static async Task<int> ReadFileAsync(string file)
   {
       Console.WriteLine("Start reading file");

       int length = 0;

       using(StreamReader reader = new StreamReader(file))
       {
           string fileContent = await reader.ReadToEndAsync();
           length = fileContent.Length;
       }

       Console.WriteLine("Finished reading file");

       return length;
   }
}
```

In this application, we read a big file, count the number of characters it has, and print different messages in the console. The method that triggers the file reading operation is defined as asynchronous, and it's the one that starts the asynchronous thread reading the text. While the message "A synchronous message" is printed, the reading of the file continues. If we execute the application, we can see how the execution thread behaves based on the output messages:

![Asynchronous sample application output](https://images.ctfassets.net/23aumh6u8s0i/6QF3i0BPAoDOSdF0T1jm07/269b11a895d0f74b415d49aa5b23d106/async-program-console.png)

## Summary

In this article, we talked about how we can manage and organize the tasks in our application based on the dependency and order of execution. We talked about synchronism, parallelism, concurrency, and asynchronism. We described async programming, its benefits, and how we can implement it in our C# applications. You can find the code shown in this article in [this GitHub repository](https://github.com/auth0-blog/c-sharp-async-intro).

If you want to learn more about asynchronous programming in C# and what advanced features we have available, you can go to:

- [Async in depth](https://docs.microsoft.com/en-us/dotnet/standard/async-in-depth) by Microsoft.
- [Asynchronous programming with async and await](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/async/) by Microsoft.
- [Asynchronous Programming Guidance](https://github.com/davidfowl/AspNetCoreDiagnosticScenarios/blob/master/AsyncGuidance.md) by David Fowler.
- [Async/Await - Best Practices in Asynchronous Programming](https://docs.microsoft.com/en-us/archive/msdn-magazine/2013/march/async-await-best-practices-in-asynchronous-programming) by Microsoft.

<include src="asides/DotNetCore" />




Introduction to Async Programming in C#

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

Learn how to use Web Components technologies to build a login button that works in any JavaScript framework.

Beyond JavaScript Frameworks: Universal Login Button Component

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

Fresh out the oven is Angular 6. It brings some new features and enhancement to one of the most popular JavaScript frameworks for crafting mobile, desktop and web applications. Learn what's new in Angular!



---

**TL;DR:** In this article, I'll cover the new features in Angular 6 and several other changes and deprecations.

---

Angular is a very popular framework that is actively [maintained by Google](https://developers.google.com/experts/all/technology/angular). Its popularity and wide adoption have been driven by how it keeps evolving and getting better by the day. Angular powers a lot of web platforms such as _Google Adwords_, _Google Fiber_, _Adsense_, and _Winc_.

The previous major Angular version was Angular 5. We covered the [major features and bug fixes that shipped with Angular 5 before](https://auth0.com/blog/whats-new-in-angular5/). Now, we are going to cover the latest major release, Angular 6, which focuses on making Angular smaller and faster to use.

Let's go through the major changes in Angular 6.


## 1. Improved Service Worker Support

Angular 6 now supports the configuration of navigation URLs in Service Workers. The service worker will redirect navigation requests that don't match any `asset` or `data` group to the specified index file.

<include src="TweetQuote" quoteText="Angular 6 now supports configuration of navigation URLs in Service Workers."/>

By default, a navigation request can have any URL except for those containing `__` and URLs containing a file extension (i.e a `.`) in the last path segment. Sometimes it is great to be able to configure different rules for the URLs of navigation requests (e.g. ignore specific URLs and pass them through to the server).

Now, you can specify an optional `navigationUrls` list in `ngsw-config.json`. which contains URLs or simple globs. Only requests whose URLs match any of the positive URLs/patterns and
none of the negative ones (i.e. URLs/patterns starting with `!`) will be
considered navigation requests and handled the right way by the service worker.

Before now, the service worker would enter a degrade mode where only existing clients would be served if either the client or server was offline while trying to fetch `ngsw.json`. In Angular 6, the service worker remains in the current mode until connectivity to the server is restored.

Furthermore, a helper script, `safety-worker.js`, has been added to the service worker package to enable easy deactivation of an existing service worker in production.

_packages/service-worker/safety-worker.js_

```js
self.addEventListener('install', event => { self.skipWaiting(); });

self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
  self.registration.unregister().then(
      () => { console.log('NGSW Safety Worker - unregistered old service worker'); });
});
```

## 2. Goodbye Template Element

The `<template>` element was deprecated long ago, precisely in Angular 4. It has been removed completely in Angular 6.

The `<ng-template>` element should be used instead.

**Before:**

``` html  

  <template>some template content</template>

```

**Now:**

``` html  

  <ng-template>some template content</ng-template>

```

## 3. Better URL Serialization

Before now, there were issues around routes and URL serialization such as this below:

![What's new in Angular 6 - URL Serialization](https://images.ctfassets.net/23aumh6u8s0i/3IBqTAJniLXU1hZBFJz3em/249f3d8e3460446f7475fb2630207abb/urlissues)
_What's new in Angular 6 - URL Serialization_

In Angular 6, issues like the one above have been fixed and:

* URI fragments will now serialize the same as query strings.
* In the URL path, (portion prior to the query string and/or fragment), the plus sign (`+`) and ampersand (`&`) will appear decoded.
* In the URL path, parentheses values (`(` and `)`) will now appear percent-encoded as `%28` and `%29` respectively.
* In the URL path, semicolons will be encoded in their percent encoding `%3B`.

It's also important to know that parentheses and semicolons denoting auxiliary routes will, in any case, show up in their decoded shape except for parentheses and semicolons used as values in a segment or key/value pair for matrix params which will show up encoded.

## 4. Support Added for Custom Elements

This is crazy. When I discovered this, I jumped! Let me explain before you get too excited.

The support is currently experimental and unstable. It's targeted to land and become stable in the Angular 6.x release cycle.

With this support, developers can simply register Angular Components as Custom Elements. Once registered, these components can be used just like built-in HTML elements. They are HTML Elements, so why not?

So, Angular developers can do something like this:


```js

//my-name.ts

import { Component, Input, NgModule } from '@angular/core';
import { createCustomElement } from '@angular/elements';

@Component({
  selector: 'my-name',
  template: `<h1>Hello my name is {{name}}</h1>`
})

export class MyName {
  @Input() name: string = 'Prosper!';
}

@NgModule({
  declarations: [ MyName ],
  entryComponents: [ MyName ]
})

export class MyNameModule {}

```

```ts
//app.component.ts
import { Component, NgModuleRef } from '@angular/core';
import { createCustomElement } from '@angular/elements';

import { MyName } from './my-name.ngfactory';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private injector: Injector, ngModuleRef: NgModuleRef) {
    const ngElementConfig = createCustomElement(MyName, injector);
    customElements.define('my-name', NgElementConfig);
  }
}
```

### 5. Forms Validation in Angular 6

Before now, `ngModelChange` was always emitted before the underlying form control was updated.

If you had a handler for the `ngModelChange` event that checked the value through the control, the old value would be logged instead of the updated value. This is not the case if you pass the value through the `$event` keyword directly.

Check out this example:

_Passing the value through the $event keyword directly_

``` html  

  <input [(ngModel)]="name" (ngModelChange)="onChange($event)">

```

```js
onChange(value) {
   console.log(value); // logs updated value
}
```

_Using a Handler_


``` html  

  <input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">

```

```js
onChange(ngModel: ngModel) {
   console.log(ngModel.value); // logs old value
}
```

In Angular 6, `ngModelChange` is now emitted after the value is updated on its form control.

<include src="TweetQuote" quoteText="In Angular 6, ngModelChange is now emitted after the value is updated on its form control."/>

```js
onChange(ngModel: NgModel) {
   console.log(ngModel.value); // logs updated value
}
```

## 6. Multiple Validators for Form Builder Array

In previous versions of Angular, you could set only one validator on a `FormArray` field with the `FormBuilder.array` method.

In Angular 6, you can set multiple validators with the `FormBuilder.array` method:

```js
...
ngOnInit() {
  this.speakerForm = this.formBuilder.group({
    text: ['', Validators.required],
    options: this.formBuilder.array([], [MyValidators.correctProposalCount, MyValidators.totalProposals])
  });
}
```

## 7. Token Marking for Runtime Animation Context

In Angular 6, it's now possible to determine which animation context is used for a component at runtime. A token is provided as a marker to determine whether the component is running a `BrowserAnimationsModule` or `NoopAnimationsModule` context at runtime.

## 8. Hello Schematics

**Schematics** is a new scaffolding library that's used by the Angular CLI to generate custom templates. The Angular team has always been keen on improving developer productivity, which explains the birth of **schematics**.

With Schematics, you can easily create Angular libraries like so:

First, install the necessary schematic tools:

```bash
npm i -g  ng-lib-schematics  @angular-devkit/core @angular-devkit/schematics-cli
```

Next, create a new `angular-cli` project:

```bash
ng new avengers --skip-install // avengers is the name of the new library I'm trying to create
```

Finally, you can just run `schematics` like so:

```bash
schematics ng-lib-schematics:lib-standalone --name avengers
```

A new `lib` directory will be generated for you inside the `src` folder. The `lib` directory ships with a sample demo and the build tools necessary for a typical Angular package.

Check out this [deep and excellent guide to Schematics](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2).

## Deprecations and Other Updates

* Angular 6 ships with [Rxjs 6.0.0.](https://github.com/ReactiveX/rxjs)
* `@Injectable` now supports tree-shakeable tokens.
* Service workers now properly handle invalid hashes in all scenarios.
* The router sometimes hits a race condition while a route is being instantiated and a new navigation request arrives. This issue has been solved in Angular 6.
* Avoid overriding `ngInjectableDef` in the decorator if present on the type.

Check out other [Angular 6 updates here](https://github.com/angular/angular/blob/master/CHANGELOG.md).

## Upgrading to Angular 6

The Angular team built an [awesome tool](https://angular-update-guide.firebaseapp.com/) to make upgrading as easy as possible.

![Angular 6 Upgrade](https://images.ctfassets.net/23aumh6u8s0i/6YATIYgiYoEPc8YKmQf71g/08ee8023c2ff4df81ff0758c93a3e4f8/upgrade)
_Angular 6 upgrade tool_

<include src="asides/Angular" />

## Conclusion

**Angular 6** came loaded with new features and significant improvements. Kudos to the Angular team on making Angular faster and better to use.

Have you upgraded to Angular 6 yet? What are your thoughts? Did you notice any significant improvement? Let me know in the comments section! 😊


Angular 6 Release: What’s New?

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

Learn about scope, closures, data flow, and concepts commonly utilized in modern JS frameworks & applications.

Glossary of Modern JavaScript Concepts: Part 2

nilan

Guest Author

Nilan Marktanner

Learn how authentication and authorization works with GraphQL and Auth0 by building an Instagram clone.



## Introduction to GraphQL

GraphQL is a query language for APIs created by Facebook that offers declarative data fetching in the client and is already used by companies such as Coursera and GitHub.

A GraphQL server exposes a schema that describes its API including queries (to fetch data) and mutations (to modify data).

This allows clients to specify their data requirements with queries and send it to one GraphQL endpoint, instead of collecting information from multiple endpoints as is typical with REST. While queries are a very easy and quick way for clients to get exactly the data they need in one request, the GraphQL server has to parse and validate the query, check which fields are included and return the underlying data from the database.

The type-safe schema unlocks new possibilities for tooling, as demonstrated by GraphiQL which is maintained by Facebook. With features like auto completion (as shown in the gif) and an included documentation it offers a great developer experience.

![Autocompletion](https://images.ctfassets.net/23aumh6u8s0i/473lZQBu5YO5rqv6h1TuXp/3da2871a44c8dd2824b6aeb2da6101fd/autocompletio)
_Autocompletion_

Let's learn more about GraphQL queries and mutations by building an Instagram clone.

## Building An Instagram Clone

<iframe width="560" height="315" src="https://www.youtube.com/embed/5uxq8Om-AZQ" frameborder="0" allowfullscreen></iframe>

_User Authentication with Auth0 for React and Apollo_

We want to build an application that displays a feed of posts with an appropriate image and description. Everyone should be able to see these posts, but to prevent spam we only allow registered users to create new ones. We also send occasional email updates to subscribed users.

A simple type schema for our application might look like this:

```js

type User {
  id: String!
  email: String
  emailSubscription: Boolean
  name: String
  posts: [Post]
}

type Post {
  id: String!
  description: String
  imageUrl: String
  author: User
}

```

We have a *User* object type that consists of the fields *emailSubscription* of type Boolean, *email* and *name* of type String, and *posts* of list type Post (denoted by [Post]). The *Post* object type consists of a *description* and an *imageUrl* field of type String and an *author* field of type User.

Additionally, both object types have the *id* field which is a required String (denoted by String!).

These types are then used by our GraphQL server to expose different queries and mutations in its GraphQL schema. Typically, you will see queries to fetch a specific node (single data items) and queries to fetch multiple or even all nodes of a certain type. For mutations, there are usually those for creating, updating and deleting a node of a certain type.

In our case, one available query is *allPosts* which we already saw above:

```js

query {
  allPosts {
    description
    imageUrl
  }
}

```

When we send this query as a HTTP request to our GraphQL server, we get a JSON response with the same structure as the query:

```js

{
  "data": {
    "allPosts": [
      {
        "description": "#Auth0",
        "imageUrl": "https://styleguide.auth0.com/lib/logos/img/logo-blue.png"
      },
      {
        "description": "#GraphQL",
        "imageUrl": "https://raw.githubusercontent.com/facebook/graphql/master/resources/GraphQL%20Logo.png"
      }
    ]
  }
}

```

In our frontend application, we can then use the *allPosts* array in the response to display the posts.

With GraphQL queries, we can choose exactly what information we are interested in. For example, if we also want to display the author id and name for every post, we can simply include it in the query

```js

query {
  allPosts {
    description
    imageUrl
    author {
      id
      name
    }
  }
}

```

which will be reflected in the response:

```js

{
  "data": {
    "allPosts": [
      {
        "description": "#Auth0",
        "imageUrl": "https://styleguide.auth0.com/lib/logos/img/logo-blue.png",
        "author": {
          "id": "nilan-id",
          "name": "Nilan"
        }
      },
      {
        "description": "#GraphQL",
        "imageUrl": "https://raw.githubusercontent.com/facebook/graphql/master/resources/GraphQL%20Logo.png",
        "author": {
          "id": "nilan-id",
          "name": "Nilan"
        }
      }
    ]
  }
}

```

As GraphQL queries are hierarchical, we simply include the *author* object with the desired fields in our query. Note that we changed the query without even touching our GraphQL server. As for creating new posts, we can use the *createPost* mutation exposed by our GraphQL server. Here, we have to supply parameters that describe our new post. If the user with id *nilan-id* wants to create a new post, we could send this mutation:

```js

    mutation {
      createPost(
        description: "Found this #auth0 badge",
        imageUrl: "https://styleguide.auth0.com/lib/logos/img/badge.png",
        authorId: "nilan-id"
      ) {
        id
      }
    }

```

Mutations have responses too. In this case we get the id of the new post in return:

```js

    {
      "data": {
        "createPost": {
          "id": "another-id"
        }
      }
    }

```

Now that we saw queries and mutations in action, we can think about authentication and authorization.

## Authenticating GraphQL Requests

The authentication workflow we are focusing on goes like this:

* a user is signing in with *Auth0 Lock*, obtaining a signed *JSON Web Token* that contains the Auth0 user id associated with that user

* Via the authorization header of the *user* query, the token is sent to the server which validates if the token is correctly signed and if so, also checks if the embedded Auth0 user id refers to a user already registered at the server.

```js

    query {
      user {
        name
      }
    }

```

* for a valid token that contains the Auth0 user id of a user already registered at the GraphQL server, the name will be returned:

```js

    {
        "data": {
          "user": {
            "name": "Nilan"
          }
        }
    }

```

They are then logged into the application and can create new posts.

![Login with Auth0](https://images.ctfassets.net/23aumh6u8s0i/5B1zW7e1i2bGBSig2Z6aP4/1cc1eaadb33db3f2d809471f9c7f2204/login)

* for invalid tokens or valid tokens that contain the Auth0 user id of a user not yet registered at the GraphQL server, the response will be *null*:

```js

 {
    "data": {
      "user": "null"
    }
 }

```

New users will then have to finish the sign up process on a separate page.

![Finish Sign Up Process](https://images.ctfassets.net/23aumh6u8s0i/WqrVZcduJpDrUaRAkzgir/336396987aea9ca1566a25c35c04bf9b/separatepage)

Once the user enters his information and hits the sign up button, we can use the *createUser* mutation to register a new user at the GraphQL server:

```js

mutation {
  createUser(
    email: "new.user@email.com",
    emailSubscription: true,
    name: "New User"
    token: "<JWT>"
  ) {
    name
  }
}

```

and obtain its name:

```js

{
  "data": {
    "createUser": {
      "name": "New User"
    }
  }
}

```

Note that we also pass in the [JWT obtained from Auth0 Lock](https://auth0.com/lock) to associate the new user with the Auth0 user id embedded in the token. If another token that includes the Auth0 user id will be supplied in subsequent requests to the GraphQL server, the request can be associated with the according user. Here, we can simply continue to include the JWT in the *Authorization* header after logging in. If we use the *user* query now:

```js

query {
  user {
    name
  }
}

```

we will obtain a valid response instead of *null*:

```js

{
  "data": {
    "user": {
      "name": "New User"
    }
  }
}

```

We can use the *user* query in the frontend application to show buttons for logout and creating new posts.

An authenticated user can then create a new post by specifying a description and url for the image which will be used for the *createPost* that we saw above.

## Authorization For GraphQL

One last thing that is missing is disallowing users that are not authenticated to create new posts. We can partly control that by hiding functionality in the frontend. However, it is really the responsibility of the GraphQL server to make sure that no unauthorized posts are created.

We can realize this on the server by defining a set of permission rules. These are the permissions we need for our application:

* Everyone can query posts
* Everyone can query users
* Everyone can create users
* Authenticated users can create posts
* Admins can delete posts
* Admins can delete users

Operations not listed are not allowed.

Then the GraphQL server can determine whether an incoming request is authorized by checking the permission list. For example, if the incoming request contains the *deletePost* mutation, the server would reject the deletion of the post as long as the request wasn't made by an admin.

On the other hand, if the request is authenticated and contains the *createPost* mutation, the server would grant the request permission, due to the *Authenticated users can create posts* rule.

> Auth0 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.

## Conclusion

That's it! In this article we learned the basics of GraphQL by building an Instagram clone. We saw how to authenticate GraphQL requests using Auth0 and combine that with permission rules on the GraphQL server. To see how the application looks like, you can play around with [the hosted version of our Instagram clone](http://apollo-auth0.netlify.com).

To setup a GraphQL backend in less than 5 minutes, check out [Graphcool](https://graph.cool). Auth0 integration comes out-of-the-box and works nicely together with the advanced permission system.

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/wSkZFfuAToM" frameborder="0" allowfullscreen></iframe>


Building An Instagram Clone With GraphQL and Auth0

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.


Alternatives to Native Mobile App Development

ryan-chenkie

Ryan is a full-stack JavaScript developer and trainer who mainly works with React, Angular, Node, and GraphQL. He runs a consultancy where he builds apps for companies and also helps established dev teams with their modern JavaScript challenges.<br /><br />Ryan is a Google Developer Expert, the host of the Entrepreneurial Coder Podcast, the author of Securing Angular Applications, and an all-around fanatic about application security.

Developer

Ryan Chenkie

JavaScript modules and build steps are getting more numerous and complicated, but what about boilerplate in new frameworks?



---
**TL;DR:** Frameworks like [Falcor](https://netflix.github.io/falcor/) and [Relay](https://facebook.github.io/relay/) solve some hard problems but come at the cost of requiring a lot of boilerplate. Perhaps the boilerplate is a necessity, but this likely has implications for developer uptake.

To get a sense of each, check out our getting started tutorials for both [Falcor](https://auth0.com/blog/2015/08/28/getting-started-with-falcor/) and [Relay](https://auth0.com/blog/2015/10/06/getting-started-with-relay/).

---

There’s been a lot of talk about JavaScript fatigue lately, and perhaps rightly so. It can be tough to keep up with all the new frameworks, modules, and libraries that pop up every day, and now that we’re in the era of next gen JavaScript and the build step, things can be even more difficult when we throw in transpilation and build tools.

We’ve even got people that are [really angry](https://medium.com/@wob/the-sad-state-of-web-development-1603a861d29f#.x1zwe3db2) about the current state of JavaScript and web development. Personally, I find this a kind of anger to be pretty odd. Everyone is entitled to their opinion of course, but getting mad about technology that is both **optional** and **free** just seems weird.

There’s no shortage of JavaScript fatigue articles of course.

<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">I&#39;m fatigued by JavaScript fatigue articles</p>&mdash; James Kyle (@thejameskyle) <a href="https://twitter.com/thejameskyle/status/680949037516718085">December 27, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

A lot of these articles center around modules and build tools, but I’d like to explore something we haven’t heard as much about: **boilerplate**.

## Where are we Seeing Boilerplate?

One of the cool things about writing content at Auth0 is that I get to explore a lot of awesome new technologies every week. While doing this, it has become apparent that many of these technologies require a fair bit of boilerplate just to get going. Which ones exactly? I’m thinking specifically about frameworks like [Falcor](https://netflix.github.io/falcor/) and [Relay](https://facebook.github.io/relay/). I’ve also seen it with libraries like Flux and Redux, but I think in that case, it’s more of an ecosystem thing. Unidirectional data flow setups in general tend to have more boilerplate.

So let’s talk about Falcor and Relay. To start, what are they? In broad terms, both of them are used to help us with data interactions between the client and server sides of our apps. Falcor was created by Netflix and Relay by Facebook. With both, we set up a single endpoint on the server (virtual JSON model in Falcor and GraphQL endpoint in Relay), instead of sending data to and receiving it from multiple endpoints.

> **Note:** This article doesn't make a direct comparison between Falcor and Relay, but rather looks at the amount of code required to use them. It is recognized that while they have similarities, they don’t serve exactly the same purpose. Also, I know Falcor identifies as a library and Relay as a framework, but let’s keep things simple and just call them frameworks

Falcor gives us powerful features like data de-duping and Relay is great at providing only the data a given React component needs at the time it is needed. Both of the frameworks let us do things that would be really difficult to do manually. So what’s the catch?

> We’ve written full tutorials on these frameworks. Read more about [Falcor](https://auth0.com/blog/2015/08/28/getting-started-with-falcor/) and [Relay](https://auth0.com/blog/2015/10/06/getting-started-with-relay/).

## The High Boilerplate Framework

Looking at the getting started examples for [Falcor](https://netflix.github.io/falcor/) and [Relay](https://facebook.github.io/relay/), it’s easy to see that even a `Hello World` app requires quite a bit of code. That’s fine, a lot of it is just configuration to get the system wired up. Where I see the boilerplate really start to grow is when we get some actual routes set up.

Let’s look at what’s needed to set things up for a single data resource. From our previous tutorials, here’s a bit of what we need for a single route in **Falcor**:

```js
// 1. We needs some data, which is truncated for this example
var model = new falcor.Model({
  cache: {
    events: [
      {
        name: "ng-conf",
        description: "The worlds best Angular Conference",
        location: $ref('locationsById[1]')
      },
      ...
    ]
  }  
});

// 2. We need a data source route
app.use('/model.json', falcorExpress.dataSourceRoute(function(req, res) {
  return new Router([
    {
      // Our route needs to match a pattern of integers that
      // are used as eventIds
      route: "events[{integers:eventIds}]['name', 'description']",
      get: function(pathSet) {

        var results = [];

        // Above we specified an eventIds identifier that is an
        // array of ids which we can loop over
        pathSet.eventIds.forEach(function(eventId) {

          // Next, an array of key names that map is held at pathSet[2]
          pathSet[2].map(function(key) {

            // We find the event the cooresponds to the current eventId
            var eventRecord = eventsData.events[eventId];

            // Finally we push a path/value object onto
            // the results array
            results.push({
              path: ['events', eventId, key],
              value: eventRecord[key]
            });
          });          
        });

        return results;
      }      
    }
  ]);
}));
```

To call it from the front end:

```js
// front-end.js

...

.get(["events", {from: 0, to: 2}, ["name", "description"]]);

...
```

And here’s what we need for **Relay**:

```js
// 1. We need a schema
var userType = new GraphQL.GraphQLObjectType({
  name: 'User',
  description: 'A person who uses our app',
  isTypeOf: function(obj) { return obj instanceof db.User },

  fields: function() {
    return {
      id: GraphQLRelay.globalIdField('User'),
      name: {
        type: GraphQL.GraphQLString,
        description: 'The name of the user',
      },

      // We can set up a relationship between users and conferences here
      conferences: {
        description: 'A listing of the user\'s conferences',

        // Relay gives us helper functions to define the Connection and its args
        type: GraphQLRelay.connectionDefinitions({name: 'Conference', nodeType: conferenceType}).connectionType,

        // argument to tell GraphQL which user to pass back
        // in the resolve block
        args: {
          userToShow: { type: GraphQL.GraphQLInt }
        },

        // The resolve block will complete a query and pass back
        // data for the user id supplied by the arguments we pass in
        resolve: function(user, args) {
          return GraphQLRelay.connectionFromArray(db.getConferencesByUser(args.userToShow), args)
        },
      },
    }
  },
  interfaces: [nodeDefinitions.nodeInterface],
});

// 2. We need to export the schema
// Types and queries are exported with GraphQLSchema
module.exports = new GraphQL.GraphQLSchema({
  query: new GraphQL.GraphQLObjectType({
    name: 'Query',
    fields: {
      // Relay needs this to query Nodes using global IDs
      node: nodeDefinitions.nodeField,
      // Root queries
      user: {
        type: userType,
        resolve: function() {
          return db.getUser(1)
        },
      },
    },
  }),
});

// 3. We also need to export a container
exports.Container = Relay.createContainer(ConferenceApp, {
  // We initially want to get the first user's conferences
  initialVariables: {
    userToShow: 1
  },
  fragments: {
    // Results from this query will be placed on this.props for access in
    // our component
    user: () => Relay.QL`
      fragment on User {
        name,
        conferences(userToShow: $userToShow) {
          edges {
            node {
              id,
              name,
              description
            },
          },
        },
      }
    `
  },
});

```

Again, configuration is a big part of this, but there’s also a fair amount of logic just to gather and prepare our data to be sent back. Now I’m sure there are places where we could trim things up a bit, but even the official guides have a lot of code involved.

In this way, I’ve come to think of Falcor and Relay as High Boilerplate Frameworks. At the same time, they are inherently somewhat complex as well. While they are both great at doing what they do, I think this creates an unfortunate implication: **lots of boilerplate can be confused with complexity and people prefer simple to complex**.

## Approachability

When it comes down to it, most of us like things to be simple. It’s easy to get excited about a technology that makes quick work out of something that used to take a lot of time, effort, and code. I find that even if a framework or library has a learning curve and requires a lot of code for real-world use, I can get on board pretty easily if I can get *something* up and running quickly.

With all the configuration and boilerplate required to get going with Falcor and Relay, one of their downsides is that they are inherently less approachable. Some people haved [pushed for API changes](https://github.com/facebook/relay/issues/124), but I imagine more have abandoned their exploration altogether, which is unfortunate.

## Next Gen JavaScript Compounds the Issue

I recall watching a talk from ng-conf where the speaker said that a lot of the issues and questions the Angular team received were actually JavaScript related and didn’t have a lot to do with Angular. Language misunderstandings will likely always cause some trouble, sure, but I think we’re at a spot now where next gen JavaScript and the need for transpilation tools can easily be conflated with the complexities of a framework. Take this snippet of Relay from the docs for example:

```js
fragments: {
    game: () => Relay.QL`
      fragment on Game {
        scores(
          numToShow: $numToShow,
          sortDirection: $sortDirection
        ) {
          ${Score.getFragment('score')},
        },
      }
    `,
  }
```

If the developer isn’t yet familiar with arrow functions and template strings, even this simple example makes it look like the framework has a bunch of weird stuff when really this is just new JavaScript. If the developer is thrown off just by the language at this point, things don’t get much better when they eventually try to set up a [mutation](https://facebook.github.io/relay/docs/guides-mutations.html#content).

## What Does this Look Like in the Wild?

When setting up simple examples for Auth0’s tutorials I remember thinking that I can’t imagine building a full-fledged app in either of them. I’m curious about the experience of those who have and what their thoughts are about the boilerplate situation.

It would also be interesting to see how the companies that created Falcor and Relay (Netflix and Facebook respectively) make use of them. I wouldn’t be surprised if they have internal tools that provide some further abstraction which simplifies their use.

## Aside: Falcor and Relay Authentication is Easy with Auth0

Auth0 simplifies common authentication needs like social login, multi-factor authentication, and single sign-on. You can <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 an account</a> and get 7,000 regular active users for free.

To add Authentication to Falcor, simply install and setup **express-jwt** and **jwks-rsa** with your Auth0 credentials and add the middleware to your route. Also set up an API like so:

1. Under your account name in the upper right corner of your [**Auth0 Dashboard**](https://manage.auth0.com/#/), choose **Account Settings** from the dropdown, then select the [**Advanced**](https://manage.auth0.com/#/account/advanced) tab. Scroll down to the **Settings** section and turn on the toggle for **Enable APIs Section**. Now you will have a link to manage [APIs](https://manage.auth0.com/#/apis) in your dashboard left sidebar navigation.
2. Go to [**APIs**](https://manage.auth0.com/#/apis) in your dashboard and click on the "Create API" button. Enter a name for the API. Set the **Identifier** to your API endpoint URL. In this example, this is `http://localhost:3001/api/`. The **Signing Algorithm** should be `RS256`.
3. You can consult the Node.js example under the **Quick Start** tab in your new API's settings.

```js
// server.js

...

var authenticate = jwt({
  secret: jwks.expressJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: "https://{YOUR-AUTH0-DOMAIN}/.well-known/jwks.json"
    }),
    // This is the identifier we set when we created the API
    audience: '{YOUR-API-AUDIENCE-ATTRIBUTE}',
    issuer: "{YOUR-AUTH0-DOMAIN}",
    algorithms: ['RS256']
});


app.use('/api/model.json', authenticate, falcorExpress.dataSourceRoute(function(req, res)
  {
    return new Router([
      {...}
    ]);
  }
));

...
```

Then send an `Authorization` header with the requests to your model.

```js
// front-end.js

var token = localStorage.getItem('access_token');

var model = new falcor.Model({
  source: new falcor.HttpDataSource('/api/model.json', {
    // Send the token as an Authorization header
    headers: {
      'Authorization': 'Bearer ' + token
    }
  })
});
```

The steps for Relay are similar, but the endpoint is specific to GraphQL.

```js
// server.js

...

app.use('/graphql', authenticate, graphqlHttp({schema: schema}));

...
```

To add the `Authorization` header, use Relay’s network layer.

```js
// front-end.js

var token = localStorage.getItem('access_token');

Relay.injectNetworkLayer(
  new Relay.DefaultNetworkLayer('http://localhost:3000/graphql', {
    headers: {
      Authorization: 'Bearer ' + token
    }
  })
);
```

**Important API Security Note:** If you want to use Auth0 authentication to authorize _API requests_, note that you'll need to use [a different flow depending on your use case](https://auth0.com/docs/api-auth/which-oauth-flow-to-use). Auth0 `idToken` should only be used on the client-side. [Access tokens should be used to authorize APIs](https://auth0.com/blog/why-should-use-accesstokens-to-secure-an-api/). You can read more about [making API calls with Auth0 here](https://auth0.com/docs/apis).


## A Final Word

Maybe the audience that frameworks like Falcor and Relay are intended for is one that itself is more advanced in terms of tech know-how. Perhaps this audience can see through the complexity and boilerplate requirements and look straight at the benefits that can be gained. Even if this is the case, I think there is a huge camp that understands and appreciates the problems that these frameworks are trying to solve, but are turned off by everything that is required to solve them.

I’m sure the newcomers aren’t alone. I doubt that seasoned developers like writing a lot of boilerplate and I have a feeling they have a special appreciation for simple and approachable APIs.

All this considered, I think High Boilerplate Frameworks like Falcor and Relay would do well to simplify their APIs and make themselves more approachable to noobs and veterans alike.

<include src="TweetQuote" quoteText="High Boilerplate Frameworks like Falcor and Relay would do well to simplify their APIs"/>

What do you think about the boilerplate required in frameworks like Falcor and Relay? Has this hindered you from getting started with them? If you’re working with them, is it hindering productivity, or do the benefits they bring outweigh the amount of boilerplate that is needed?


Rise of the High Boilerplate Framework: A Look at Falcor and Relay

001c9ddc5ceb9829b6aaf24f5d28502a

I am software developer with a keen interest in open-source technologies, Linux, and native development. I've worked on many different platforms Android, iOS, Win32, Linux, FreeRTOS, the Web, and others. I've gone through the whole stack and I enjoy learning and using the latest technologies. I now work as a full-stack developer at Auth0.

Senior Engineer

Sebastian Peyrott

You asked? We listened! Benchmark series is back with even more frameworks and metrics!

"frameworks"