Lotanna Nwose

Learn about how lazy loading is handled by Angular and the reasoning behind it with practical illustrations.

![lazy-loading-angular-img1](//images.ctfassets.net/1es3ne0caaid/3EXxli3tynRHDNA43lrEhX/f0e1fff5e3c6dae1ff72f855a5d9ceff/lazy-loading-angular-img1.jpeg)

## Prerequisites

To be able to follow through in this article's demonstration you should have:


- Node version 11.0 installed on your machine.
- Node Package Manager version 6.7 (usually ships with Node installation).
- Visual Studio Code (as it will be used in the demo)
- [Angular CLI](https://cli.angular.io/) version 7.0
- The latest version of Angular (version 7.0)

```
    // run the command in a terminal
    ng version
```

Confirm that you are using version 8, and update to 8 if you are not.

- Download the [Augury Chrome extension here](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en).
- Download this tutorial's starter project [here](https://github.com/viclotana/typicode-app) to follow through the demonstrations.
- Unzip the project and initialize the node modules in your terminal with this command:

```
    npm install
```

Other things that will be nice-to-haves are:

- A working knowledge of the Angular framework at a beginner level.
- Familiarity with the Angular constructor will be a plus but not a requirement.

## Why is lazy loading important

Firstly, bundling involves aligning our code components in progression and putting them in one JavaScript chunk that it passes to the browser, this is called eagerly loading components and it is the default behavior of Angular and every other framework. However, as your application grows, we notice that bundle gets very cumbersome in size and this can quickly make using your application very hard and especially slow. 

With code splitting, the bundle can be split to smaller chunks where the most important chunk can be loaded first and then every other secondary one lazily loaded.

Also, while building applications we know that as a best practice consideration should be made for users using mobile internet data and others with really slow internet connections. We the developers should always be able to control the user experience even during a suspense period when resources are being loaded to the DOM.

## How Angular handles lazy loading

The way Angular handles lazy loading is through modules. Every application has a central module called `ngModule`, which is located in the app module file and contains all the imports and component declarations. This module is what is then bundled at compilation and pushed to the browser, so when the Angular team wanted to facilitate lazy loading they did so through modules. Splitting the central module into smaller bundles and then loading the most important first in the DOM.

![lazy-loading-angular-img2](//images.ctfassets.net/1es3ne0caaid/4Rm5NmJI8Mgyd3tFWvEUj6/6b27c639b1cc333b50ea471b6d88ee69/lazy-loading-angular-img2.jpeg)

This is how lazy loading is configured through routing with component modules. 
There are four main steps to setting up a lazy loaded feature module:

1. Create the feature module.
2. Remove eager loading capabilities.
3. Create the feature module's routing module.
4. Configure the routes.

## What you will build

![lazy-loading-angular-img3](//images.ctfassets.net/1es3ne0caaid/uunXnn9UuSuHoGiwYr6do/bb1b71623d1e3be8cf906697853fddab/lazy-loading-angular-img3.gif)

This is a simple user-blog application that uses Angular services to make get requests to a remote server for building demo or test applications. It has four components: details, posts, sidebar and the users component.

This is the demo that will be used to illustrate lazy loading in this tutorial, if you followed this post from the start you must have downloaded and unzipped this project and you must have downloaded [Augury](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en) too. Let us start going through the three steps listed above:

## Creating feature modules

For every feature or in our application’s case component, we have to create a module. This is because as you have learnt, lazy loading can only be carried out at the module level of abstraction of the Angular application instance. Open up the unzipped project with VS Code and open a new terminal. To create a new module, use the Angular CLI command below:

```
    ng generate module components/details
```

This creates a details module inside the details component, in the same way create modules for posts and users components respectively.

```
    ng generate module components/posts
    ng generate module components/users
```

Copy the code below into your newly generated details module file:

```typescript
    // src/app/components/details/details.module.ts
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { DetailsComponent } from './details.component';
    import { RouterModule } from '@angular/router';
    import { DetailsRoutes } from './details.routes';
    @NgModule({
    declarations: [DetailsComponent],
    exports: [DetailsComponent],
    imports: [
    RouterModule.forChild(DetailsRoutes),
    CommonModule
    ]
    })
    export class DetailsModule { }
```

This declares the detail component and lists it to be exported to the app module on request. Another very important thing here is that the router module is pointed to the details route we are yet to create. 

If you are a little confused at this point, look back at the flowchart image you saw at the start of this post. You will do exactly the same thing in the remaining two module files, so copy the code block below into the users module.

```typescript
    // src/app/components/users/users.module.ts
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { UsersComponent } from './users.component';
    import { RouterModule } from '@angular/router';
    import { UsersRoutes } from './users.routes';
    @NgModule({
    declarations: [UsersComponent],
    exports: [UsersComponent],
    imports: [
    RouterModule.forChild(UsersRoutes),
    CommonModule
    ]
    })
    export class UsersModule { }
```

Then go ahead and also copy the code block below into the posts module file:

```typescript
    // src/app/components/posts/posts.module.ts
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { PostsComponent } from './posts.component';
    import { RouterModule } from '@angular/router';
    import { PostsRoutes } from './posts.routes';
    @NgModule({
    declarations: [PostsComponent],
    exports: [PostsComponent],
    imports: [
    RouterModule.forChild(PostsRoutes),
    CommonModule
    ]
    })
    export class PostsModule { }
```

## Remove eager loading capabilities

Now that the modules have been generated to lazily load these component, the next thing is to remove the eager loading capability from these components. To do that, open your `app.module.ts` file and remove import statements of these components. Your `app.module.ts` file will now look like this:

```typescript
    // src/app/app.module.ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { HttpClientModule } from '@angular/common/http';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
    import { SidebarComponent } from './components/sidebar/sidebar.component';
    @NgModule({
    declarations: [
    AppComponent,
    SidebarComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
```

You can see that all the imports have been removed from the app module, this ensures that Angular does not default to eagerly loading them on initialization. 

## Create the feature module's routing module

Each of the components to be loaded lazily has to have a separate routing module created for them. You can either generate a module with the CLI or manually create the file yourself. We have tried generating modules, so this time you will create the files manually. In the details component folder, create a file call it `details.routes.ts` , then do the same in the posts component folder and the users component folder.


![lazy-loading-angular-img4](//images.ctfassets.net/1es3ne0caaid/6Mp1Ja08GmAhdQlQkEffiD/3acbf905e0fd8ba735c1585ac98548de/lazy-loading-angular-img4.png)

Inside the `details.routes.ts` file, copy in the code below:

```typescript
    // src/app/components/details/details.routes.ts
    import { Route } from '@angular/router';
    import { DetailsComponent } from './details.component'
    export const DetailsRoutes: Route[]=[
    {
    path: '',
    component: DetailsComponent
    }
    ]
```

Here, the lazily loaded component's route is set, in this same way, you will do it for the posts and the users components respectively. 

```typescript
    // src/app/components/posts/posts.routes.ts
    import { Route } from '@angular/router';
    import { PostsComponent } from './posts.component'
    export const PostsRoutes: Route[]=[
    {
    path: '',
    component: PostsComponent
    }
    ]
```

Also, copy the code block below into the `users.route.ts` file:

```typescript
    // src/app/components/users/users.routes.ts
    import { Route } from '@angular/router';
    import { UsersComponent } from './users.component'
    export const UsersRoutes: Route[]=[
    {
    path: '',
    component: UsersComponent
    }
    ]
```

## Configure the routes

This is the final stage, at this point you have finished setting up the modules for all the components you want to lazily load and their separate routes. You have to tell your main app routing module that these routes should be lazily loaded. copy the code block below into your `app-routing.module.ts` file:

```typescript
    // src/app/app-routing.module.ts
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    const routes: Routes = [
    {
    path: '',
    loadChildren: './components/users/users.module#UsersModule'
    },
    {
    path: 'details/:id',
    loadChildren: './components/details/details.module#DetailsModule'
    },
    {
    path: 'posts',
    loadChildren: './components/posts/posts.module#PostsModule'
    }
    ];
    @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
    })
    export class AppRoutingModule { }
```

Here you tell Angular it should be loaded lazily by specifying loadChildren in the place of components in an eager loading situation. Everything in the four stages are completely setup, it is time to run your application:

```
    ng serve
```

You will see that while bundling up the application, it is now split into those modules we created.

![lazy-loading-angular-img5](//images.ctfassets.net/1es3ne0caaid/1v2P7zl6im8UEu7pkb9I7c/19ed2a1cb341957848504bc45b273afa/lazy-loading-angular-img5.png)

## Inspecting with Augury

Augury is one of the most used Angular application debuggers and profilers. One of the great features which is really of importance to us is the router tree analysis. If you have not, you can download the [Augury Chrome extension here](https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd?hl=en). Open your browser on [http://localhost:4200/](http://localhost:4200/) go to the settings and open developer tools and select the **Augury** tab.


![lazy-loading-angular-img6](//images.ctfassets.net/1es3ne0caaid/5kP7QN4YPKe2kirzdvdM3K/6bb9cfb959c239af96282a763b4bd575/lazy-loading-angular-img6.png)

Here you see that all components present are lazy loaded and currently, the only component loaded to the DOM is the users. You will also notice that the other components will be lazily loaded to the DOM (on request)as you interact with the app.


![lazy-loading-angular-img7](//images.ctfassets.net/1es3ne0caaid/5vhYMukwkkXs0fMilFRnM1/c62635794d1da0a09d18003ed50f9421/lazy-loading-angular-img7.gif)

[Here is the link to the complete illustration code on GitHub](https://github.com/viclotana/lazy-loading).

## Conclusion

This is an introduction to how Angular handles lazy loading at the module level of abstraction with the help of routers. The use cases of applying lazy loading might not be obvious for small Angular projects, but it is very clear that big projects with different nests of components will load faster and be more resource efficient with it. Happy hacking!

This tutorial will explore how lazy loading is handled by Angular and the reasoning behind it with practical illustrations. Big projects with different nests of components will load faster and be more resource efficient with lazy loading, which this tutorial will demonstrate.

Lazy loading in Angular 7

no pusher tech

Ayooluwa Isaiah

In this tutorial, we’ll go over how this feature works in Chatkit. In the end, you should have a chat app that looks and works like this:


![unread-messages-react-img1](//images.ctfassets.net/1es3ne0caaid/14YkltKozJBTGo9QERerJm/acc324dde657d086f2bb9ab5f5854a1a/unread-messages-react-img1.gif)

Most chat apps present the unread count for messages in a room somewhere in the application interface. This allows the user to scan the interface and quickly see how many unread messages they have and in what rooms.

## Prerequisites

This tutorial assumes prior experience with working with React and Chatkit. If this is your first attempt at using Chatkit, you should probably [start here](https://pusher.com/tutorials/messaging-react-chatkit) first, then come back to this tutorial at a later time.

You also need to have Node.js (version 8 or later), and npm installed on your machine. Installation instructions can be found on [this page](https://www.npmjs.com/get-npm).

## Sign up for Chatkit

Open [this link](https://dash.pusher.com/chatkit) in a new browser tab, and create a new Chatkit account or sign into your existing account. Once you are logged in, create a new Chatkit instance for this tutorial and take note of your **Instance Locator** and **Secret Key** in the **Credentials** tab.


![unread-messages-react-img2](//images.ctfassets.net/1es3ne0caaid/4lnRxg6gJbhvmHh44gEKyF/b6828d8eda8ba9b1dbe5a091177346ec/unread-messages-react-img2.png)

Also make sure your Test Token Provider is enabled as shown below. One enabled, the endpoint from which the test token will be generated will be displayed for you to copy and paste.


![unread-messages-react-img3](//images.ctfassets.net/1es3ne0caaid/5JPVqpecv91wpSV8krqeIJ/600a62b1a88f065250422c9747745d87/unread-messages-react-img3.png)


Next, click the **Console** tab and create a new user and room for your instance. You can [follow the instructions on this page](https://docs.pusher.com/chatkit/quick_start/javascript#create-a-user) to learn how to do so. Once the room has been created, take note of the room ID as we’ll be using it later on.

![unread-messages-react-img4](//images.ctfassets.net/1es3ne0caaid/7n36dkDeV3E0zXj7fTEShn/d931dd24adaf76a4c9be63e00d96b8b0/unread-messages-react-img4.png)


## Create a new React app

Run the command below to install [create-react-app](https://github.com/facebook/create-react-app) globally on your machine, then use it to bootstrap a new react React application:

```
    npm install -g create-react-app
    create-react-app chatkit-unread-messages
```

Once the app has been created, `cd` into the new `chatkit-unread-messages` directory and install the following additional dependencies that we’ll be needing in the course of building the chat app:

```
    npm install @pusher/chatkit-client prop-types skeleton-css --save
```

You can now start your development server by running `npm start` then navigate to http://localhost:3000 in your browser to view the app.


## Add the styles for the app

Open up `src/App.css` in your code editor, and change it to look like this:

```css
    // src/App.css
    
    .App {
      width: 100vw;
      height: 100vh;
      display: flex;
      overflow: hidden;
    }
    
    .sidebar {
      height: 100%;
      width: 20%;
      background-color: blanchedalmond;
    }
    
    .login {
      padding: 5px 20px;
    }
    
    .sidebar input {
      width: 100%;
    }
    
    .chat-rooms .active {
      background-color: whitesmoke;
      color: #181919;
    }
    
    .chat-rooms li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
      font-size: 18px;
      color: #181919;
      cursor: pointer;
      border-bottom: 1px solid #eee;
      margin-bottom: 0;
    }
    
    .room-list h3 {
      padding-left: 20px;
      padding-right: 20px;
    }
    
    .room-unread {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      font-size: 16px;
      text-align: center;
      padding: 5px;
      background-color: greenyellow;
      color: #222;
    }
    
    .chat-rooms li:hover {
      background-color: #D8D1D1;
    }
    
    .chat-screen {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: calc(100vw - 20%);
    }
    
    .chat-header {
      height: 70px;
      flex-shrink: 0;
      border-bottom: 1px solid #ccc;
      padding-left: 10px;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .chat-header h3 {
      margin-bottom: 0;
      text-align: center;
    }
    
    .chat-messages {
      flex-grow: 1;
      overflow-y: scroll;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      margin-bottom: 0;
      min-height: min-content;
    }
    
    .message {
      padding-left: 20px;
      padding-right: 20px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
    }
    
    .message span {
      display: block;
      text-align: left;
    }
    
    .message .user-id {
      font-weight: bold;
    }
    
    .message-form {
      border-top: 1px solid #ccc;
    }
    
    .message-form, .message-input {
      width: 100%;
      margin-bottom: 0;
    }
    
    input[type="text"].message-input {
      height: 50px;
      border: none;
      padding-left: 20px;
    }
```

## Create a basic chat application

Let’s set up a basic chat interface so that we can add the functionality to show the unread message count. The code below should be straight-forward enough to understand if you’ve worked with Chatkit before:

```javascript
    // src/App.js
    
    import React, { Component } from "react";
    import {
      handleInput,
      connectToChatkit,
      connectToRoom,
      sendMessage,
    } from "./methods";
    
    import "skeleton-css/css/normalize.css";
    import "skeleton-css/css/skeleton.css";
    import "./App.css";
    
    class App extends Component {
      constructor() {
        super();
        this.state = {
          userId: "",
          currentUser: null,
          currentRoom: null,
          rooms: [],
          messages: [],
          newMessage: "",
        };
    
        this.handleInput = handleInput.bind(this);
        this.connectToChatkit = connectToChatkit.bind(this);
        this.connectToRoom = connectToRoom.bind(this);
        this.sendMessage = sendMessage.bind(this);
      }
    
      render() {
        const {
          rooms,
          currentRoom,
          currentUser,
          messages,
          newMessage,
        } = this.state;
    
        const roomList = rooms.map(room => {
          const isRoomActive = room.id === currentRoom.id ? 'active' : '';
          return (
            <li
              className={isRoomActive}
              key={room.id}
              onClick={() => this.connectToRoom(room.id)}
            >
              <span className="room-name">{room.name}</span>
            </li>
          );
        });
    
        const messageList = messages.map(message => {
          const arr = message.parts.map(p => {
              return (
                <span className="message-text">{p.payload.content}</span>
              );
          });
    
          return (
            <li className="message" key={message.id}>
              <div>
                <span className="user-id">{message.senderId}</span>
                {arr}
              </div>
            </li>
          )
        });
    
        return (
          <div className="App">
            <aside className="sidebar left-sidebar">
              {!currentUser ? (
                  <div className="login">
                    <h3>Join Chat</h3>
                    <form id="login" onSubmit={this.connectToChatkit}>
                      <input
                        onChange={this.handleInput}
                        className="userId"
                        type="text"
                        name="userId"
                        placeholder="Enter your username"
                      />
                    </form>
                  </div>
                ) : null
              }
              {currentRoom ? (
                <div className="room-list">
                  <h3>Rooms</h3>
                  <ul className="chat-rooms">
                    {roomList}
                  </ul>
                </div>
                ) : null
              }
            </aside>
            {
              currentUser ? (
                <section className="chat-screen">
                  <ul className="chat-messages">
                    {messageList}
                  </ul>
                  <footer className="chat-footer">
                    <form onSubmit={this.sendMessage} className="message-form">
                      <input
                        type="text"
                        value={newMessage}
                        name="newMessage"
                        className="message-input"
                        placeholder="Type your message and hit ENTER to send"
                        onChange={this.handleInput}
                      />
                    </form>
                  </footer>
                </section>
              ) : null
            }
          </div>
        );
      }
    }
    
    export default App;
```

Create a new `methods.js` file within the `src` directory and add the following code into it:

```javascript
    // src/methods.js
    
    import { ChatManager, TokenProvider } from "@pusher/chatkit-client";
    
    function handleInput(event) {
      const { value, name } = event.target;
    
      this.setState({
        [name]: value
      });
    }
    
    function connectToChatkit(event) {
      event.preventDefault();
      const { userId } = this.state;
    
      const tokenProvider = new TokenProvider({
        url:
          "<test token provider endpoint>"
      });
    
      const chatManager = new ChatManager({
        instanceLocator: "<your chatkit instance locator>",
        userId,
        tokenProvider
      });
    
      return chatManager
        .connect()
        .then(currentUser => {
          this.setState(
            {
              currentUser,
            },
            () => connectToRoom.call(this)
          );
        })
        .catch(console.error);
    }
    
    function connectToRoom(roomId = "<your chatkit room id>") {
      const { currentUser } = this.state;
      this.setState({
        messages: []
      });
    
      return currentUser
        .subscribeToRoomMultipart({
          roomId,
          messageLimit: 10,
          hooks: {
            onMessage: message => {
              this.setState({
                messages: [...this.state.messages, message],
              });
            },
          }
        })
        .then(currentRoom => {
          this.setState({
            currentRoom,
            rooms: currentUser.rooms,
          });
        })
        .catch(console.error);
    }
    
    function sendMessage(event) {
      event.preventDefault();
      const { newMessage, currentUser, currentRoom } = this.state;
      const parts = [];
    
      if (newMessage.trim() === "") return;
    
      parts.push({
        type: "text/plain",
        content: newMessage
      });
    
      currentUser.sendMultipartMessage({
        roomId: `${currentRoom.id}`,
        parts
      });
    
      this.setState({
        newMessage: "",
      });
    }
    
    export {
      handleInput,
      connectToRoom,
      connectToChatkit,
      sendMessage,
    }
```

Make sure to replace the `<test token provider endpoint>`, `<your chatkit instance locator>` and `<your chatkit room id>` placeholders above with the appropriate values from your Chatkit dashboard.

Open the app in a few different tabs and join the chatroom under different usernames. Send a few messages for each user. It should work just fine, similar to the GIF below:

![unread-messages-react-img5](//images.ctfassets.net/1es3ne0caaid/6XlTQXYcX2fZRg8b6Z5OKg/c859b0a7867658d8733c542bde4ec791/unread-messages-react-img5.gif)


## Show the unread message count

Chatkit provides an `unreadCount` [property](https://pusher.com/docs/chatkit/reference/javascript#room-properties) that we can hook into to display the number of unread messages for the current user in a room. But how do we know when a user has read a message? This is where [read cursors](https://pusher.com/docs/chatkit/reference/javascript#cursors) come in.

When a user enters a room, messages in the room are loaded into the chat interface according to the `messageLimit` property. At this point, it is safe to say that the user has read all the messages in that room and we can indicate this by setting a read cursor on the last message.

Change the `onMessage` hook in the `connectToRoom` function as follows:

```javascript
    // src/methods.js
    
    function connectToRoom(roomId = "21431542") {
      const { currentUser } = this.state;
      this.setState({
        messages: []
      });
    
      return currentUser
        .subscribeToRoomMultipart({
          roomId,
          messageLimit: 10,
          hooks: {
            onMessage: message => {
              this.setState({
                messages: [...this.state.messages, message],
              });
    
              const { currentRoom } = this.state;
    
              if (currentRoom === null) return;
    
              return currentUser.setReadCursor({
                roomId: currentRoom.id,
                position: message.id,
              });
            },
          }
        })
        .then(currentRoom => {
          this.setState({
            currentRoom,
            rooms: currentUser.rooms,
          });
        })
        .catch(console.error);
    }
```

What this means is that, if the user leaves the room by any means (such as by going offline, or switching to another room) any messages sent after the last read cursor position would count towards the `unreadCount`.

We can then use the `onRoomUpdated` [connection hook](https://pusher.com/docs/chatkit/reference/javascript#connection-hooks) to update the room in the application state and display the unread count in the chat interface. Add the hook as shown below:

```javascript
    // src/methods.js
    
    function connectToChatkit(event) {
      // [..]
    
      return chatManager
        .connect({
          onRoomUpdated: room => {
            const { rooms } = this.state;
            const index = rooms.findIndex(r => r.id === room.id);
            rooms[index] = room;
            this.setState({
              rooms,
            });
          }
        })
        .then(currentUser => {
          this.setState(
            {
              currentUser,
            },
            () => connectToRoom.call(this)
          );
        })
        .catch(console.error);
    }
```

Finally, we want to display a room’s unread count if the number of unread messages is greater than zero. Update the `roomList` variable in the `render()` method of our chat app as shown below:

```javascript
    // src/App.js
    
    const roomList = rooms.map(room => {
      const isRoomActive = room.id === currentRoom.id ? 'active' : '';
      return (
        <li
          className={isRoomActive}
          key={room.id}
          onClick={() => this.connectToRoom(room.id)}
        >
          <span className="room-name">{room.name}</span>
          {room.unreadCount > 0 ? (
            <span className="room-unread">{room.unreadCount}</span>
          ): null}
        </li>
      );
    });  
```

You can simulate unread messages by creating a different room and switching to it as one user, then send messages to the first room as another user. It will display the unread count for any of the users as appropriate:

![unread-messages-react-img6](//images.ctfassets.net/1es3ne0caaid/1Y9HPyWwhLiFjTqBQTQGhL/0d5074dbd9f7b07b681c92cb2f188a83/unread-messages-react-img6.gif)


## Wrap up

In this tutorial, you learned how add unread message count to your Chatkit app. We explored how to use read cursors to determine if a user has read a message, and how to display the number of unread messages in the application interface.

You can checkout other things Chatkit can do by viewing its extensive [documentation](https://docs.pusher.com/chatkit). Don't forget to grab the complete source code in this [GitHub repository](https://github.com/ayoisaiah/chatkit-unread-messages).

Most chat apps present the unread count for messages in a room somewhere in the application interface. In this tutorial, learn how add unread message count to your Chatkit app, how to use read cursors to determine if a user has read a message, and how to display the number of unread messages in the application interface.


Most chat apps present the unread count for messages in a room somewhere in the application interface. In this tutorial, learn how add unread message count to your app, how to use read cursors to determine if a user has read a message, and how to display the number of unread messages.

How to show unread message count with React

Chatkit

Aman Mittal

This tutorial is a step-by-step guide to connect AWS Amplify and AWS AppSync services with your React Native application. Build a cross-platform mobile app by integrating frameworks like React Native and Expo CLI, with services AWS AppSync and Amplify.

Build a serverless app with React Native and AWS Amplify

How to build a serverless mobile app with React Native and AWS Amplify

Neo Ighodaro

Ephemeral messages are messages that last for a short while. This tutorial will show you how to build a chat app for Android that implements ephemeral messages: the media messages will be erased from the chatroom and all connected devices after the other user has seen the message. This is great for privacy.

Ephemeral messages are messages that last for a short while. This tutorial will show you how to build a chat app for Android that implements ephemeral messages: the media messages will be erased from the chatroom and all connected devices after the other user has seen the message.

Building ephemeral media messaging for Android

In this turorial, you will be introduced to errors tracking in Angular 7 using the errorHandler class and Rollbar.

![angular-errorhandler-rollbar-img1](//images.ctfassets.net/1es3ne0caaid/3yB85QZ84GXIMsJLPTe0ta/5a8a3b9a1972e2ba153ec581a3816684/angular-errorhandler-rollbar-img1.png)

This is the last part of the Angular 7 error handling series, you can refer to [the first part here](https://pusher.com/tutorials/error-handling-angular-part-1), and [the second here](https://pusher.com/tutorials/error-handling-angular-part-2) and [the third part here](https://pusher.com/tutorials/error-handling-angular-part-3).


## Prerequisites

To be able to follow through in this article's demonstration you should have:

- Node version 11.0 installed on your machine.
- Node Package Manager version 6.7 (usually ships with Node installation).
- [Angular CLI](https://cli.angular.io/) version 7.0
- The latest version of Angular (version 7)

```
    // run the command in a terminal
    ng version
```

Confirm that you are using version 7, and update to 7 if you are not.
Other things that will be nice-to-haves are:


- A working knowledge of the Angular framework at a beginner level.
- Familiarity with Angular services will be a plus but not a requirement.

In this series, you have been introduced earlier to handling client side errors and then HTTP errors gracefully in Angular 7 with tools like errorHandlers, Interceptors and even RxJS operators. In this post you will be shown how to track these errors in a remote tracking environment.

## The problem

Let’s review the problems we face with testing and error tracking in production. You can skip this if you read part three.

### Tracking errors
When your Angular application is running in the development server with ng serve you can easily track errors in the application. The fastest way you can do this for JavaScript errors is with the errorHandler as it was illustrated in [this introductory post here](https://pusher.com/tutorials/error-handling-angular-part-1). The errorHandler logs this error for you, the developer, in the browser console you test your application with. This is standard procedure for the development environment.

### ErrorHandler limitations
When you build out the application in production and ship it to your users however, there is a big problem that should be obvious by now. Testing the shipped applications become an issue. If your application is in say beta stage, you might maybe send it to family and friends to use, you have to also be on those different devices to be able to spot the errors in their various browser consoles. This is of course not a scalable solution if you have many users who might not even be in the same location as you. 

### Leaving error reporting to users
Initially, the solution to this problem will be to build a system in such a way that your users can report errors on the application. However, this is rarely the case as users have been reported to be really impatient and this is confirmed by the [statistics on the high churn rate of users](https://www.statista.com/statistics/384224/monthly-app-launches-churn/) with applications. The more likely situation that is more commonly seen in the place of error reporting is one-star ratings and high churn rate.

A user is more likely not to use your application and even give a bad review of it than they are to report the error experienced while using the app. This is very practical and it shows an underlying question of responsibility. The responsibility of reporting errors should not be on the user but the developer of the application.

### Remote error tracking
What if there was a way you can still track errors in your application from all the users using the application in real time, remotely and in a centralized location. Thanks to advancement in code testing and monitoring services that has improved in web development over the years, you can now. There are a lot of services in the market right now that lets you do exactly that, some of which are Sentry, Rollbar, Airbrake, Raygun and a host of others.

In this article, you will be introduced to Rollbar and how it uses the Angular errorHandler class to remotely track and report errors in your Angular applications. 

## Introducing Rollbar

[Rollbar](https://rollbar.com/) is a software as a service product that shows you exception and crash reports in real-time in one centralized dashboard so you can track and debug bugs in record time. In your dashboard, similar errors are automatically grouped using Rollbar's fingerprinting technology to reduce noise, and all errors include detailed data to help you assess impact and assign priority.

Rollbar automatically collects all the data you need to replicate and debug an error, presented in ways optimized for debugging speed and it works with JavaScript source maps. With [Telemetry](https://en.wikipedia.org/wiki/Telemetry), you can debug client-side JavaScript errors faster. It works like a black box recorder, but for errors.

## Getting started

To get started using Rollbar, visit [the website here](https://rollbar.com) and click the **Sign Up** button to create an account. You will see options to sign up with GitHub, Google account or any email account. If successfully created, you will see this welcome screen displayed..

![angular-errorhandler-rollbar-img2](//images.ctfassets.net/1es3ne0caaid/31qfrdmImEkqvr6yOJfs1Q/d45c5666167c9ee2539d60f7b37074d9/angular-errorhandler-rollbar-img2.png)

The next step is to click the **LET'S DO IT** button at the end of the page to open the new project creation page.

## Creating your first project

The next page that appears on the interface will show you input elements where you can type in the name of the new project you want to create. 

![angular-errorhandler-rollbar-img3](//images.ctfassets.net/1es3ne0caaid/51Tp1s4UgzhbbISFQfgC2J/b6aef478577c38bbb2383207dacef491/angular-errorhandler-rollbar-img3.png)

I call mine ng-errors, you can call it any name of your choice. After deciding on that, click **CONTINUE** and proceed to the next stage of the onboarding process, which is to choose the SDK. For Angular 7, choose the **Angular 2+** tab in the array of other languages and frameworks, then click **CONTINUE**.

The very next interface you will see is your Rollbar dashboard, which shows installation instructions along with the SDK configuration containing your unique private access token.

## Using Rollbar

If you have followed this post from the start, you should have Angular 7 all setup in your machine, you have also now setup a Rollbar account and created a new project. Now download this demo project from our [introductory article here](https://github.com/viclotana/ng_errors). After unzipping it, open the project folder in VS Code and install Rollbar for browser use in a terminal inside the project with this command:

```
    npm install rollbar
```

This installs the Rollbar SDK into the project, making the Angular API available for use. Now you have to make changes in two files, go into the `error.service.ts` file and copy in the code block below:

```typescript
    // src/app/error.service.ts
    import * as Rollbar from 'rollbar';
    import {
    Injectable,
    Inject,
    InjectionToken,
    ErrorHandler
    } from '@angular/core';
    const rollbarConfig = {
    accessToken: 'COPY THIS FROM YOUR DASHBOARD',
    captureUncaught: true,
    captureUnhandledRejections: true,
    };
    export const RollbarService = new InjectionToken<Rollbar>('rollbar');
    @Injectable()
    export class RollbarErrorHandler implements ErrorHandler {
    constructor(@Inject(RollbarService) private rollbar: Rollbar) {}
    handleError(err:any) : void {
    this.rollbar.error(err.originalError || err);
    console.log('error occured here brooo');
    }
    }
    export function rollbarFactory() {
    return new Rollbar(rollbarConfig);
    }
```

This code block comes directly from the Rollbar Angular API, you can now modify the error handler in any custom way you like so long as you do not change class names. I added a console log message just to see the number of times errors are logged. Also, if you copy the code exactly from here, you will get an invalid token error which will be fixed when you use your own unique token from your dashboard. 

The next thing to do is to make sure to import and register the new error handler and the service in the `app.module.ts` file. Copy in the code below to do that:

```typescript
    // src/app/app.module.ts
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule, ErrorHandler } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { RollbarErrorHandler, RollbarService, rollbarFactory } from './error.service';
    import { ErrorComponent } from './error/error.component';
    @NgModule({
    declarations: [
    AppComponent,
    ErrorComponent
    ],
    imports: [
    BrowserModule,
    AppRoutingModule
    ],
    providers: [
    {
    provide: ErrorHandler,
    useClass: RollbarErrorHandler,
    },
    {
    provide: RollbarService,
    useFactory: rollbarFactory,
    },
    ],
    bootstrap: [AppComponent]
    })
    export class AppModule { }
```

To test it, run your application in development environment:

```
    ng serve
```

This displays our application below


![angular-errorhandler-rollbar-img4](//images.ctfassets.net/1es3ne0caaid/1ZHkE0EbEomTmJCChfTEnp/ffb9ae432d68fcc1137d930dee854c49/angular-errorhandler-rollbar-img4.png)

To trigger an exception click the button with try catch, once you do that the app breaks. Now go to your Rollbar dashboard in your browser and you will see the error tracked in real time.


![angular-errorhandler-rollbar-img5](//images.ctfassets.net/1es3ne0caaid/5BzksWQLBUp4CfGtHFJHAy/e18f3fe32985524e3eff5b8e48540e06/angular-errorhandler-rollbar-img5.png)

If you click on the error, you will see a very well detailed and comprehensive analysis of the said error. With a lot of important sections including tracebacks, occurrences, number of users experiencing the error and even possible community solutions to the error, based off a wide range of data already collected on similar errors by Rollbar.


![angular-errorhandler-rollbar-img6](//images.ctfassets.net/1es3ne0caaid/3Odgeq9FzDtP7yWDKGjJcS/80968714ce0466cad81ef06bc6c4835e/angular-errorhandler-rollbar-img6.png)

## Collaboration tool

Rollbar also provides a very significant feature that makes it seamless for you and your development team to be on top of your workflow with error tracking for your application. You can create a team, or be invited into one where you can all now get updates and email alerts on these errors as they occur and so you can work together towards fixing them.

![angular-errorhandler-rollbar-img7](//images.ctfassets.net/1es3ne0caaid/1G25qFfPlI1opMfGRgUi4d/5b3a8edc90f14951fc2de5dfed8a13b2/angular-errorhandler-rollbar-img7.png)

## Numerous integrations

Rollbar also has a very seamless platform to integrate your application with your core open source development environment, be it GitHub, GitLab or Bitbucket. This way, you will not only be able to track errors, but have a straightforward way of fixing them and running tests all in a painless approach. 


![angular-errorhandler-rollbar-img8](//images.ctfassets.net/1es3ne0caaid/3meP6gL59vIUu5Gb4sSGuz/56178887064152948a886423d85e3a07/angular-errorhandler-rollbar-img8.png)

## Deploy tracking

Not only is Rollbar great for source control integration, it is also great for tracking your application deployment and continuous integration. There a lot of ways you can deploy your Angular application and Rollbar integrates with most of them to ensure you have a pain-free workflow, be it Heroku, or MS Build or Powershell or Circle CI.


![angular-errorhandler-rollbar-img9](//images.ctfassets.net/1es3ne0caaid/l1eWZCidF9wMRFAPkTp1e/d4a1db627000447a190a51c8805cfdfc/angular-errorhandler-rollbar-img9.png)

## About security

Rollbar ensures the complete security of your application data. As part of this commitment,  they have a variety of industry-standard security technologies and procedures to protect your information from unauthorized access, use, or disclosure, strongly adhering to HIPAA and ISO 27001 compliance and meet industry best practices where applicable. Learn more about the security policy and their compliance [here](https://docs.rollbar.com/docs/security).

## Conclusion

Rollbar is one of the best error tracking services around for web applications. In addition to the well laid out documentation, it has a good number of integrations with tools you might already be using in your workflow and that makes adopting it an attractive option. Try Rollbar today!

This tutorial series will introduce you to errors in Angular 7. In this final part, part four, learn about errors tracking in Angular 7 using the errorHandler class and Rollbar. Rollbar is one of the best error tracking services around for web applications.

Introduction to error handling in Angular 7 - Part 4

Introduction to error handling in Angular 7: Part 4 - Rollbar 

Suragch

The tutorial will help you understand what each part of the Beams API does in a client iOS app. You will look at an iOS project demonstrating the full API of the iOS Beams SDK, and receive pointers for how to set the demo project up as well as how to send push notifications to test it.


Pusher Beams client API demo for iOS

Beams

Wern Ancheta

Automated software for monitoring chat rooms helps prevent users' bad behavior from affecting other users. This tutorial will explain how you can moderate profanity by masking it and automatically banning users who engage in it. We’ll be using React Native and WebPurify to implement moderation.

Profanity moderation in a React Native chat app

Finally the stable official support for React Hooks!

![create-react-app-img (1)](//images.ctfassets.net/1es3ne0caaid/6b4BASUhPUTMEXKLEI6crg/a73e5830fb475f5ed85956e9a7d823df/create-react-app-img__1_.png)

> Create React App is a tool built by developers at Facebook to help you build React applications. It saves you from time-consuming setup and configuration. You simply run one command and create react app sets up the tools you need to start your React project — [Guil Hernandez](https://teamtreehouse.com/library/using-create-react-app)

Create-React-App which is arguably one of the most popular boilerplates of all times with 67,000 stars and used by over 5,000 projects on GitHub released its third [version (3.0.0)](https://github.com/facebook/create-react-app/releases/tag/v3.0.0) a few days ago; with a whole lot of improvements. Even though we all know React does not require build dependencies, it however depends on a lot of important tools to make the magic we see when we run npm start. 

Some of these tools include Babel, Webpack and Jest and a host of others which handle making code lighter for production, all kinds of testing and helping code to be modular and generally ease the way we code.


> Over time, these tools get updated to newer versions and it starts to become a pain to keep up with Create-React-App and the new versions of its supporting tools.

So the team of 167+ contributors who dedicated their lives to the maintenance of our lovely boilerplate came up with this very powerful version. In this article, we shall quickly look at the new features in [Create-React-App v 3.0.0](https://github.com/facebook/create-react-app/releases/tag/v3.0.0)

## Support for React hooks

React introduced Hooks officially in [version 16.8](https://reactjs.org/blog/2019/02/06/react-v16.8.0.html) which allowed changes to the way components can be written introducing things like stateful logic in functional components usually meant for classes alone. This new development encourages writing purer components and more optimal React code. However, [there are rules](https://reactjs.org/docs/hooks-rules.html) set in place by the React team to prevent abuse of hooks and these rules are that:


- Hooks cannot be called from regular functions but only from functional components.
- Hooks are to be used only at the top level of your functional component and not inside nested functions or even conditional statement blocks.

In this new version, alongside the support of the use of Hooks, Create-React-App ships with an ESLint plugin called [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks) that enforces these rules and other syntax conventions of hooks. This way, builds are sure to fail when any rule is broken. You can [learn more about this plugin here](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app) and also [how to make your IDE display these linting output here](https://facebook.github.io/create-react-app/docs/setting-up-your-editor#displaying-lint-output-in-the-editor).

## Linting support for TypeScript

Aside from the React hooks linting, this new version also ships with support to lint TypeScript code through the [typescript-eslint](https://github.com/typescript-eslint/typescript-eslint) plugin. You can see the list of rules enforced through this plugin in the link [here](https://github.com/facebook/create-react-app/blob/eee8491d57d67dd76f0806a7512eaba2ce9c36f0/packages/eslint-config-react-app/index.js#L89:L98) or setup your IDE to reflect them from [this guide](https://facebook.github.io/create-react-app/docs/setting-up-your-editor#displaying-lint-output-in-the-editor). You can easily use TypeScript in your React application with a line of command:

```
    yarn create-react-app my-typescript-app --typescript
```

## Browserlist support

You can now use the browserlist config in your React project’s `package.json` file to control the browser output of your JavaScript files. Another exciting thing is that one configuration can be used for the development environment and another entirely different one can be used for production. A typical example can be this:

```json
    "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
```

Here, the production build will target all browsers that cover more than 0.2% of global usage which is almost every browser, while the development build will only target the last versions of Chrome, Firefox and Safari.

With this kind of clarity, you can install a babel polyfill as a project dependency and then import it in your root JavaScript file and browserlist will now include them when needed. By default, browserslist default targets a almost all browsers in production, you can change the default settings though from the [guide here](https://github.com/browserslist/browserslist#queries). 

## PostCSS Normalize support

This new version ships with support for Normalize.css so to handle a reset CSS, by default PostCSS Normalize will be used. It will use your browserlist settings to produce styles that fit each browser covered in the config. Remember to always add `@import-normalize`at the beginning of any of your CSS files to activate it. Read more about this change [here](https://facebook.github.io/create-react-app/docs/adding-css-reset).

## Absolute imports with jsconfig.json and tsconfig.json

So in this new version, we can now have a less stressful way to access import paths for our Node path environments, we no longer have to be bothered about all the paths complexities with slashes that becomes clumsy at some point. We can now have absolute import paths for both JavaScript and TypeScript files alike, this makes for more presentable code. To set this up, create a `jsconfig.json` file for JavaScript (or `tsconfig.json` for TypeScript) in the root directory and copy in the code below:

```json
    {
      "compilerOptions": {
        "baseUrl": "src"
      },
      "include": ["src"]
    }
```

With this your import statement that was initially like this:

```
    import Sidebar from 'project_name/src/components/Sidebar';
```

Can be as simple as this:

```
    import Sidebar from 'components/Sidebar';
```

## Jest 24

This version also brings a Jest update to life. Jest is a unit testing framework that runs in a Node JS environment instead of a browser. From the old Jest version 23 to the new [version 24.7.1](https://jestjs.io/), this new Jest version ships with a lot of new features including improved asset messages and logs, support for TypeScript and a lot of bug fixes.

## Breaking changes

Some of these new features will introduce breaking changes to your project’s workflow and it is very important that you be aware.


- The `--watchAll=false` from Jest replaces the `--no-watch` flag which is now removed from the start script.
- Both the NODE_ENV and PUBLIC_URL status has now been changed into readonly.
- Custom functions has now been added to generate asset manifest.
- There are some differences in snapshot serialisation in Jest and it may lead to slight changes to your tests after upgrading.

The official changelog for this version can be found [here](https://github.com/facebook/create-react-app/releases/tag/v3.0.0).

## Conclusion

Now you have seen all the new features of the React popular boilerplate, my favorite is the browserlist support. Read the [breaking changes](https://github.com/facebook/create-react-app/releases/tag/v3.0.0) and upgrade your version today. Happy hacking!

Create React App just released its third version (3.0.0). A tool to help you build React applications, it saves you from time-consuming setup and configuration. This tutorial will explore all the new features of the React popular boilerplate, including the browserlist support.

New features of Create-React-App version 3.0

# Step by step guide to migrating an Android app from Layer to Pusher

## Introduction

As software developers, keeping your code up to date with recent technology is vital. You must always be ready to do so when the need arises. Today, we will learn how we can migrate the chat functionalities of our app from [Layer](https://layer.com) to [Pusher Chatkit](https://pusher.com/chatkit). For our migration use case, we will be looking at an [existing Android app](https://github.com/neoighodaro/migrate-layer-pusher/tree/master/LayerSample) built with Layer. 

## Creating a Chatkit app

Before you go ahead, you need to create a Chatkit instance. Open your [Chatkit dashboard](https://dash.pusher.com/chatkit) and create a new instance. Name it **migrate-layer**.

![layer-android-migration](//images.ctfassets.net/1es3ne0caaid/1iPufZUcFZ9EMvWylhQqLS/969c1102cc255235ddcd6b010ae983e6/layer-android-migration.png)


## Updating dependencies

First things first, you have to remove the Layer dependency and replace it with Chatkit’s dependencies. Open your app module `build.gradle` file and add this:

```
    implementation 'com.pusher:chatkit-android:1.3.3'
```

Remember to sync your gradle files so that the Chatkit dependency will be downloaded for you.


## Authentication

The next part of the Layer application we will migrate is the authentication part. As it is common with messaging apps, there must be a way you authenticate and authorize your users. In Layer, you would do that by calling this method:

```javascript
    layerClient.authenticate()
```

But before you call this method, it is expected that your `layerClient` object is initialized with your Layer app keys and there has been a successful connection. Let’s say you have a login activity where you perform the authentication, you are expected to implement these methods in the activity:

```javascript
    override fun onConnectionConnected(p0: LayerClient?) {}
    
    override fun onConnectionError(p0: LayerClient?, p1: LayerException?) {}
    
    override fun onConnectionDisconnected(p0: LayerClient?) {}
    
    override fun onAuthenticated(p0: LayerClient?, p1: String?) {}
    
    override fun onDeauthenticated(p0: LayerClient?) {}
    
    override fun onAuthenticationError(p0: LayerClient?, p1: LayerException?) {}
    
    override fun onAuthenticationChallenge(p0: LayerClient?, p1: String?) {}
```

And so, you are expected to call the `layerClient.authenticate()` method inside the `onConnectionConnected` callback because that is the callback that guarantees that `layerClient` has connected successfully.

Once the `layerClient.authenticate()` method is called, the `onAuthenticationChallenge` callback is triggered. Inside this callback, you will perform a request to your server to generate a token for you. You will need to pass the user’s id and a nonce (the `p1` in the callback). 

Here is a sample implementation of a [Node.js server](https://github.com/layerhq/layer-identity-token-nodejs) for your token. When you get your token, you can call:

```javascript
    layerClient.answerAuthenticationChallenge(tokenFromServer);
```

And your authentication should be successful.

Now, let us see how you can reduce this hassle and callbacks when using Chatkit. When authenticating users in Chatkit, it is best to do so with your custom written backend.

The first thing you will do is pass the user ID to your server. The server will create a new user with the Chatkit server SDK. Here is an endpoint that creates a new user:

```javascript
    app.post("/users", (req, res) => {
      const userId = req.body.userId;
      chatkit
        .createUser({
          id: userId,
          name: userId
        })
        .then(() => {
          res.sendStatus(200);
        })
        .catch(err => {
          console.log(err);
          if (err.error === "services/chatkit/user_already_exists") {
            console.log(`User already exists: ${userId}`);
            res.sendStatus(200);
          } else {
            res.status(err.status).json(err);
          }
        });
    });
```

Notice that if we notice that the user already exists, we still return success. The main aim of this endpoint is to be sure that Chatkit has a reference or recognizes that user ID. If it does not, we won’t be able to obtain a token.

After you’ve confirmed that the user exists on Chatkit, you can now connect to Chatkit and request a token like so:

```javascript
    val chatManager = ChatManager(
            instanceLocator = "CHATKIT_INSTANCE_LOCATOR",
            userId = yourUserId,
            dependencies = AndroidChatkitDependencies(
                    tokenProvider = ChatkitTokenProvider(
                            endpoint = "http://localhost:3000/token",
                            userId = yourUserId
                    )
            )
    )
    
    chatManager.connect { result ->
      when (result) {
        is com.pusher.util.Result.Success -> {
          // result.value
        }
    
        is com.pusher.util.Result.Failure -> {
    
        }
      }
    }
```

> You will have to replace `CHATKIT_INSTANCE_LOCATOR` with your instance locator on your Chatkit dashboard.

You will notice that the `ChatManager` for Chatkit is the equivalent of `LayerClient`. The two objects are responsible for initializing the chat functions with their respective dashboard keys. Unlike the `LayerClient`, the `ChatManager` not only  initializes the app with your ChatKit keys, it fetches the token required for that user and then returns a `CurrentUser` object. With Chatkit, you don’t have to override so many authentication callbacks. 

Here, we created a chat manager instance and then made a connection to get the user’s details. 
This is something similar to what you have on Layer. Notice that you are passing the instance locator, your user ID variable (`yourUserId`) and your token endpoint to your chat manager instance.

Your token endpoint should be handled by your custom created server too. If you’re using Node.js, the endpoint will look just like this:

```javascript
    app.post("/token", (req, res) => {
      const result = chatkit.authenticate({
        userId: req.query.user_id
      });
      res.status(result.status).send(result.body);
    });
```

The result of a successful connection (`result.value`) is an instance of `CurrentUser`. You should store this object globally, maybe the `Application` class so that you can access it across your whole application.

## Conversations vs Rooms

While you have conversations in Layer, in Chatkit, they are rooms. After successful authentication, ideally, the user should see whom they can chat with, it could be a group or an individual.

To see the conversations a user belong to in Layer, you would do something like this:

```kotlin
    val list = LayerSampleApp.instance.layerClient.conversations
```

While in Chatkit, you can view the rooms a user belong to by using this:

```kotlin
    // fetch all  user's room
    val roomlist = currentUser.rooms
    
    // get rooms user can join
    currentUser.getJoinableRooms { 
        // handle result
    }
```

And if you want to get rooms a user can join, you use this:

```kotlin
    currentUser.joinRoom(room!!,callback = { result ->
        // handle result
    })
```

## Fetching messages

In Layer, to fetch previous messages, you would have something like this:

```kotlin
    val messageList = LayerSampleApp.instance.layerClient.getMessages(LayerSampleApp.instance.conversation)
```

This snippet fetches all messages in a particular conversation. To do this in Pusher, you will have a snippet like so:

```kotlin
    PusherSampleApp.instance.currentUser.fetchMultipartMessages(
        roomId = PusherSampleApp.instance.room.id,
        callback = {
            when (it){
                is Result.Success -> {
                    var messageList = it.value
                }    
            }    
        }
    )
```

This snippet fetches previous messages in the room. By default, the limit is 10 messages, but you can update it by using the `limit` parameter in the `fetchMultipartMessages` method. 

In Chatkit, you can subscribe to a room to get notified of notable events that occur in the room. One of which is when a new message comes in. You can do so like so:

```kotlin
    val room = PusherSampleApp.instance.room
    PusherSampleApp.instance.currentUser.subscribeToRoomMultipart(
        roomId = room.id,
        listeners = RoomListeners(
            onMultipartMessage = {
                runOnUiThread {
                    // add message to adapter
                }
            }
        ),
        messageLimit = 20, // Optional
        callback = { subscription ->
        
        }
    )
```

The advantage of using this over the `fetchMultipartMessages` method is that `subscribeToRoomMultipart` method fetches previous messages based on your limit and still listens for new messages for you.


## Sending messages

In Layer, for you to send a message, you need to send the message to a conversation (somewhat similar to a room in Pusher). Here is a snippet of how that is done:

```kotlin
    val messageText = "Yipee! We're migrating"
    val messagePart = layerClient.newMessagePart("text/plain", messageText.toByteArray())
    
    LayerSampleApp.instance.conversation..send(messagePart?.message,object:LayerProgressListener {
        override fun onProgressUpdate(p0: MessagePart?, p1: LayerProgressListener.Operation?, p2: Long) {}
    
        override fun onProgressStart(p0: MessagePart?, p1: LayerProgressListener.Operation?) {}
    
        override fun onProgressComplete(p0: MessagePart?, p1: LayerProgressListener.Operation?) {}
    
        override fun onProgressError(p0: MessagePart?, p1: LayerProgressListener.Operation?, p2: Throwable?) {}
    
    })
```

In this snippet, you are just sending a plain text to the conversation in question.

To do this with ChatKit, you need the `CurrentUser` object that was returned after successful authentication. You can either send a usual text or a message that has some attachments. Here is an example of sending a simple message:

```kotlin
    PusherSampleApp.instance.currentUser.sendSimpleMessage(
        roomId = room.id,
        messageText = "We just migrated!!!",
        callback = { result ->
            when (result){
                is Result.Success -> {
                    // MessageID -- result.value
                }
    
                is Result.Failure -> { }
            }
        }
    )
```

In this snippet, we are just sending a mere text message to a room. If you want to send a more complex message, you can do use the `sendMultipartMessage` method like so:

```kotlin
    PusherSampleApp.instance.currentUser.sendMultipartMessage(
        roomId = room.id,
        parts = listOf(
            NewPart.Inline("This is a regular text part", "text/plain"),
            NewPart.Url("https://pusher.com/", "text/html"),
            NewPart.Attachment(
                type = "image/jpeg",
                file = File("/path/to/myImage.jpg").inputStream(),
                name = "myImage.jpg",
                customData = mapOf("source" to "camera")
            )
        ),
    
        callback = { result ->
    
        }
    )
```

In this snippet, we are sending a message with three different parts:


- A normal text. We added this using the `NewPart.Inline` class and by passing a *text/plain* type.
- A `URL`. We added this using the `NewPart.Url` class and passing the `text/html` type.
- An attachment. We added this using the `NewPart.Attachment` class. In this case, the attachment is an image.
## Conclusion

In this tutorial, we have seen how we can migrate the main features of a Layer app to Chatkit. Chatkit has a bunch of other features such as typing indicators, read receipts that you can use and make your chat apps seamless. You can checkout the [GitHub repo](https://github.com/neoighodaro/migrate-layer-pusher) for further exploration.

This tutorial provides a step-by-step guide on how to migrate a chat app from Layer to Pusher Chatkit. This tutorial provides a full code example showing how to convert an existing an existing Android app from Layer to Chatkit. 

This tutorial provides a step-by-step guide on how to migrate an Android chat app from Layer to Pusher Chatkit. This provides a full code example showing how to convert an existing an existing Android app from Layer to Chatkit. 

Learn & Discover Pusher

Lazy loading in Angular 7

How to show unread message count with React

How to build a serverless mobile app with React Native and AWS Amplify

Building ephemeral media messaging for Android

Introduction to error handling in Angular 7: Part 4 - Rollbar

Pusher Beams client API demo for iOS

Profanity moderation in a React Native chat app

New features of Create-React-App version 3.0

Step by step guide to migrating an Android app from Layer to Pusher

Products

Developers

Company

Connect