 Thank you everyone for coming. I was really skeptical if anyone was going to come considering what Dree said in his keynote. So just to recap, here's a short video of what happened. Right now I'm really intrigued in Ember. So just to plug my talk, I'll do a marketing 101 for React. So this is a small comparison of Ember and React. So React came out relatively later compared to Ember. But as you can see, people have shown a significantly larger amount of interest in React compared to Ember. Also, as time progresses, we have seen that people are really interested in React compared to other frameworks. But like everything, you have to take all the numbers with a grain of salt. And you can just rely on these stars and folks. So hello, Dublin. I hope you are having a fantastic DrupalCon VR. So I'd like to thank everyone who has made this amazing event possible, and I'd like to thank the sponsor who keep on progressing DrupalCon every year. I would also like to thank the selection committee for allowing another, yet another, how to build a headless Drupal website session. I guess we can't have enough of those. So a quick introduction. My name is Basam Ismail, and I work as a senior front-end developer for Acquia. You can find me online under the handle skip note. It's almost everywhere, Twitter, GitHub, anywhere else. And I blog at basam.co. Prior to this, I was working at Accelerant, where I got to work on a large decoupled Drupal website with a React front-end. It's legacy.com, so you can check it out. Good afternoon, everyone. Great to see you all here. I'm sure you're all excited as we are. Amalia Khan, I work for Accelerant as a front-end developer, and I work remotely from Kashmir. You can find me on Twitter as Aalia Khan. We are also leading Drupal Kashmir communities and open-source Srinagar communities, Engineering Kashmir, since last four weeks. So as they say, it's not about what you'll do, it's about who you'll meet and what you'll do together. So I'm really glad that we're all here to justify this quote. Just a show of hands, who here is a front-end developer? Great, who is a back-end developer? Cool, and who has worked with React? Awesome, wonderful. Since we are the only session between lunch and you, so we'll try to keep it short and sweet. Let's get started. We'll start by understanding why would you expose data through Drupal. Next, we'll see what React is and how is it useful for building large-scale applications. Pause that, we'll briefly go through Redux and see how it is useful for managing our application state. And finally, we'll look into how React applications can be connected to Drupal as a data source. Exposing Drupal, so yeah, the question is, why would you expose data through Drupal? One of the reasons could be, you know, building re-choosing interfaces. Examples like some of these applications handling really complex UI, client-side frameworks. Building these such complex applications, there are, you know, the interaction and that has a lot of moving part, or moving parts on the front end, where requirements, you know, are beyond trivial problems like toggling UI or sending off age-extract requests. At strand, things start falling apart. So one of the reason is that, you know, building complex UI. Another reason could be Internet of Things. We all know that Internet is a center of everything today, and every day millions and millions of devices get connected to it. So we try to connect everything we can get our hands on. Important thing here is to note that some of these devices don't even have browsers, and some of these devices even don't have screens as well. So we are not even sure what next revolutionary Internet device would be there, and but we are sure that, you know, if it'll have an Internet, and even if it doesn't have an Internet browser in it. Lastly, the next obvious reason is developer experience. There are extensive conversations going on decupting Drupal in Drupal community these days, and decupting Drupal let developers fully control their applications and achieve great user interfaces. And here you are good to celebrate the freedom between front-end and back-end, different teams in your project. Now, you know, front-end is not dependent on back-end and back-end is no more dependent on front-end. So they can, you know, take a full advantage and full expertise of their own domains. And also, if we talk about debugging or, you know, we can greatly achieve time travel debugger or hot code loading in these frameworks right now. Yeah, so. All right, so coming to React, as we all know, React is the new shiny thing right now. It's the fact. But it's not for, just not for no reason. So you might see like several large corporates are using these React for building client-side applications. These are client-side applications that are mission-critical and that's billions of users. So as you can see, Facebook, Facebook that created React is using all, it's building all of its web applications and even mobile applications using React Native. And similarly, all these other companies are using React as their client-side frameworks. But apart from building web applications, React is also being used for building native applications like it's used for building the UI for the Atom Editor. It's used for the UI of the terminal called Hyperterm. It's used by Nylis for building their email client and similarly for used by data scientists for building a tool for themselves. So React is being used in several different places other than your browser. It's even used on the server as a templating engine. It's used on your terminals for building charts. There are component, React components that you can use for building, for making audio and like creating MIDI players. So there are like a lot of uses for React. One of the important things to note about React is that it's not a framework like Ember or Angular. So it just gives you the view layer and you have to bring like choose all the other components that you need from the React ecosystem. So in case you need the router, you'll use a React router or some different version of it or some different router as per your needs. And if you need state management system, you can use MobX or Redux. But there's no like a set standard that other frameworks like Angular or Ember provide you. So moving on, the major selling point for React is that it lets you build large applications that are composed of smaller encapsulated components. So what I mean by this is that here's a React component and it has all its styling in there. It has the markup in there. As you can see the H3 tag, the P tags, span tags and it even has a UI logic there. So everything is encapsulated in a single component. This helps in unlike other frameworks where you have to move from a controller to a model to a template to a factory to something and that makes it very difficult to refactor your code. It makes it difficult to test your code. And with React you can just bundle everything in a single file or it can be split into multiple files. But the main logic remains in one place and which makes it extremely simple to test. So you can take your single component and you can plug it with your other components and you can compose a larger application. So say for example, you want to build this UI as a React application. So you can have all of this as a session list component and this session list component could be composed of multiple session components and each of these session components can further be made up of multiple components based on your requirement like how complex they are. So you can like go a level down whenever there is complexity. So before we move forward, we'll do a quick primer on React. So here's a React component. It's a pure function, an anonymous function, no magic here, no classes, no nothing. So this component takes some data as props. So I have destructured it in line. So I don't need to write props.title props.speaker or props.experience and it returns a UI component which is just a bunch of markup. And this markup is, this HTML like syntax is what we call JSX. So this compiles down to React functions. So basically you have your React component and which takes some data and returns a UI. So if you want to be fancy, you can say that your UI is a function of your application state. Another advanced way to create React component would be to grab the component class from your React module and you can extend that class and this gives you a bunch of features like for example your component now can have its own state. So with this state you can pass data to the render object or you can use it even to bind, you can even use it to bind functions and methods. So this would save you time instead of referencing this keyword, you can just do it in the constructor. Also with it you get life cycle hooks. So say for example whenever a component is shown on the page, you can trigger a function whenever it's, before it's shown on the page you can trigger a function whenever it's unmounted you can trigger a function and there is a handful more of these functions available to you. Also with the component-based React components you can even add event handlers. So for example you can add a click handler there. So whenever you click on the UI you can trigger a click action. And lastly you have the render method which on every change renders the UI again instead of updating it using the virtual DOM. So we won't get into that because that's a lot of stuff. So coming to MVC or, so coming to MVC the architecture we have been using in most of our frameworks be it backend or frontend. It's composed of three main things, controller views and models. And in MVC the views and the models are tightly coupled and this can be between multiple components. So all of your components one of your, if one of your components view is linked to a different components model you'll have to change two different components and this can go on and on and this is where Redux comes in. So say for example you have this kind of UI it's a video player page and it has a delete button to delete the current video. It has a video player, it has a comments related to the current video and it has a number of videos in the current playlist. So say for example I click and let's consider all these things are different components. So you have a video player, you have a comments section, you have a list of videos in the playlist and you have a component showing the number of videos in the playlist. So consider you click on the delete button. How many places do we need to update the component? Like all these things needs to be updated and this is where Redux comes in. As per the docs, Redux is a predictable state container for JavaScript applications. So what this basically means is you have a single store that provides all the state to all your components. So that's your application state instead of each model having its own, each component having its own state, you have all the state in one place and you pass it down to your root component which trickles down to the subcomponents. And this is like your state tree would look like this. It would be a large JavaScript object with lot of data regarding related to your multiple components. And the three main principles of Redux are actions and action creators, reducer and the store. So to understand these things, we'll go through a simple counter application. So whenever you click on the plus button, you trigger the increment action. Whenever you press on the decrement button, you trigger the decrement action and your current value will show up in the middle. So first we'll look at action and action creators. So to make any change to your Redux application, you have to trigger some actions. So actions are basically simple, action creator is simply a pure function that returns an action object which needs to have a type. So it's a simple object that has a type property which can be a string so that it's easy to deserialize. Next we have reducers. So reducer is again a pure function. It takes the current state and it takes an action. So for example, here we are taking the action and we are switching over it, switching over the action type. So in case it's increment, we take the current state and we increment it. In case the action type is decrement, we reduce the state by one. And in case the action type is something different, we return the current state. So this is the action. This is also an important thing to note is that there are no mutations. So you always return a new state. So the reducer takes some action and it takes the initial state and it returns the new state. Next we have the store. So to create a store in Redux, we grab the create store function from the Redux module. And to it we pass the reducer that we created, like the reducer we created right here. And so we pass it the reducer and the store variable will now have a bunch of methods. Like we can get the current state and we can dispatch actions through it. So with get state we get the current state and with dispatch function we can dispatch few actions like increment or decrement that we created previously. So now to use Redux with React, we have a binding module. But an important thing to note here is that Redux can be used with other frameworks as well. Angular uses Redux for managing state. So even there's a module for Ember as well. So it can be even used on back end. So it's not specific to React and front end only. So to use Redux with your React component, you just wrap your, the parent component, which is app here with a provider component that React-Redux provides and you give it the store that we created earlier. And that's it. You'll have your parent component wrapped with the state of your application. So as you can see here, we have wrapped our router in a provider. So in the previous slide I wasn't using a router but it was app. So imagine it's app, instead of router you would have app here and it would be wrapped with the provider component. So whenever right now you have your component the root component wrapped with the provider component but in case you want to access the state in a child component that's deeply nested. So either you can pass the data down via props or what you can do is you can use the connect function that can tap into the state and get the data from there. So here we are importing the connect function from React-Redux binding and we are passing it our component which lets us get the state specific to the sessions. So also whenever we connect a component, we connect a React, we connect a React component with the store we get the dispatch function as a props through which we can call the action creator and pass some state. So here's our React component and we are grabbing the dispatch from the props and here we are using the dispatch function to call the add session method on click event. So React is based on, as you can see, React is based on all the functional principles like immutability where your store is read only and the only way to change is to call the action creators. It's based on composition where you pass it multiple pure functions that can be used for logging your current state for managing asynchronous data or other use cases. And as we talked earlier, everything is a pure function so nothing too complex, no magic there, no observables. And a disclaimer would be that to use, you don't necessarily need to use Redux with your React applications. It only comes into play when your application is quite large and there are too many things to manage. So yeah, we'll take a look how to use React with Drupal. To get started, we'll use 8.2 version. We'll start by creating a session content type with the following fields about speaker description experience and speaker. Next, we'll enable these modules which are in D8 core, which will allow us to expose data. After that, we'll create a view and set path as API slash sessions, which will expose data when you'll go to the following URL, your site name slash API slash sessions. You'll be able to see all the data from the session nodes here. So that would be something like this. This is how your data is going to be reflected as a ViewsRestExport. There are a couple of ways we can connect React to Drupal. Let's talk about progressive decoupling. There will have, in progressive decoupling, we'll have a React component in our Drupal system and this can be inside nodes, blocks, pages, or any other entities. Inside your theme, we have a custom theme con and we'll add React components, components folder here, and we'll have a transpiled file in our JS folder as sessionlist.js. And we can include these transpiled files into our con.libraries.yaml file. Next, this is our con.libraries.yaml file. Here we have a session component it has a dependency on React Depts, which is a bundle of React and React DOM and other libraries which are required. This is a con.library. In our current component file, we'll get data from Drupal by fetching at this URL, con.dbd slash api dot slash sessions. When component will mount, we'll fetch that data from Drupal and update the component state. When we'll get the data from the above request, we'll map through it and pass it to the session component props here as session key index session. So yeah, we'll pass that data as a de-structured session props here and this session list component will actually render our UI. We'll create a custom block in Drupal where all the components will mount and for that we'll create a simple normal div and place it in a content region. This is a session listing of session node listing which you'll be able to see when we add it to a specific region. Inside modules. Okay, so another way to progressively decouple React applications with Drupal would be to create a module. So what we'll do is we'll create a module called sessions list and it will again have a components folder where all our React components will be and we can create a template file where these components will mount. So next we'll have the routing.ml file. So it would be a page and so whenever you go to this page you'll see the component and in our controller we'll get our initial state of the component so we'll look into it. So here's our routing file. So whenever I go to this URL, I call this controllers, this class is index function and the page will have the session page title. So here's my controller. It's called whenever I go to the slash sessions page and here I'm using guzzle to get some data, get the view data and if the request is all right I pass it to the template. So why we are doing this is because instead of like whenever our component mounts we are sending off an Ajax request. So instead of doing that we are passing the initial data directly to our template. So whenever the component is mounted it just gets the data from our template and like here you can see we have created the template, here we have an ID where the component is mounted and we have a script tag where we are passing the initial state. So the react component will take the initial state from here. So instead of like sending out a Ajax request it will just get the data from the DOM and it will boot up a lot faster compared to sending the Ajax request. Another way would be to attach the data to Drupal settings variable instead of like passing it to the template. So here I've used it, I've attached it to the Drupal settings as a session variable and so here's my component. So whenever I mount I first check if the component, if the component, if the global window object has an initial state variable and if it does I get the data from there. If not I'll just fetch some data from the server and update my component. So this is how the page would look like if I go to the slash sessions page I'll be like I'll grab some data from the Drupal settings variable and I'll render my component. So next up we have a fully decoupled Drupal so this is where you would have two different servers running two different technologies like one would be running your Drupal website and another would be running Node.js. And to understand how you can go about this, we'll use JSON API and... So yeah, when building fully decoupled Drupal website we'll prefer using JSON API over rest services that are bundled in a Drupal 8 core and you can go ahead and see some of the best features it comes up with in YouTube link on the Drupal JSON API module on Drupal.org. I'll try to explain some of them here. So yeah, it follows the specification. So in case you want to move away from Drupal backend and you want to go to some other backend it can be your front end will not be affected. Your front end work will not be affected. So again, it gives us a cleaner output. I have tried to assemble it here. The output looks like this. This is the rest of view export even with the cardinality one and one value in an attribute. It is appearing as an object whereas JSON API provides us with a cleaner output if we have data and it can gather all the attributes in one single rather than attaching it as an object. It has a sparse field. It has a, you know, you can go ahead and select particular fields which you want to show on your page, for example. For example, here we have a bundle node session fields up there and for example, I just need title and field experience and field speakers. These three fields on my data to be exposed. So I can actually go ahead and mention these three fields or there and I'll grab the data from these three fields on the title, field experience and field speakers. I'm using postman as an, for testing my APIs over here. So yeah, so the limited fields would be there. So you can go ahead and do drush tl json API minus five and this is your, this is your namespace for API and this will be your entity type. The session, this is your, session is your bundle and this is your format params. So this, all these settings you can find if you're using REST which is bundle with core you can go ahead and see these settings into REST.settings.yaml file and modify it accordingly. So since we are getting data from other server, we'll get course error. For that, you will need to go ahead and enable course module. Otherwise, you can also go into your ht access file and add this snippet to ignore that error. Okay, so we have created a small demo application that will take a look a bit later. So here's the application where you can add, you can, we are using Drupal as a backend for providing the data where we add sessions and we can like perform all the crowd operations. So we'll just look at few patterns that are like common in such applications. For example, to fetch sessions, you hit the following URL. So when you go to api slash nodes slash sessions, you get a list of all the session nodes and here we are dispatching two functions, one before getting the sessions and one action when we get the data from the following fetch request. So this is for getting the entity collection and if you want to get a single entity, you pass it the specific ID of that entity and you'll get the data. But a thing to note here is that this isn't the NID, but a specific ID that REST, sorry, the JSON API provides. Next, if you want to perform a delete action, you have to add some authentication. So here I'm using hard coded basic auth data. So it's base 64 encoded admin user and admin password. So I just hit the following URL with the method of delete and the node gets deleted and post that I can like switch URLs and all. So that's up to me. And instead of basic authentication, I can even use a simple OR2. There's a module simple OR2, which is a bit better compared to basic OR2. And when adding new sessions, here's the, if you can see the post variable, here's the shape of the data that you have to post. So you need to have a type of the bundle, the content type there. And as attributes, you'll have all the variables like the title, the speaker, the experience required. So that would be a JSON object there. And again, to post some data, you need basic authentication or any other kind of authentication. So this is the data we'll post and this is the URL we'll post to. The same URL we get the collection of data from. And to perform a patch request, it's almost similar to the post request, but the only difference here is that you have to provide the NID of the node that you want to update, not the ID, but the NID here. So which can be a bit confusing. And you post, you send a patch request to the URL where you want to update it. Another important thing when it comes to react application is that you would want to switch pages. So for that you can use a react router. So here's a simple react router component which loads different components on different pages. So I have imported a bunch of components and whenever I go to say, for example, session slash new, I will load the new session component. And in case I want to add authentication to it, so I don't want anyone to go to the new sessions page unless they are authenticated. So I can wrap it in a container component that requires authentication from my store. And this is how I would be sending out all these actions, like for example, to get action, to get sessions, to receive sessions, for adding and updating sessions. So this is the basic action object structure. And this would be the reducer that checks the action type and changes the state and returns a new state instead of updating the existing one. So to a quick demo and here's my Drupal app. So as you can see, there's some content in there. So I have three nodes there. These are session content type and I can see them here as well on the slash sessions page. And if I go to any of these pages, I can look at the content. It's coming from Drupal. I can delete it and I can edit it. So in case I, so this is the react front end session. So it's showing up here. In case I send a delete request, it gets deleted from my Drupal backend as well. So nothing ends here. Yeah, should be deleted here as well. Okay, it's gone now. And in case I want to update a session, you can double click and I can update this session. And it would be reflected on my Drupal backend. So quite simple, nothing too difficult. I can even create new sessions. So okay, nothing broke I guess. It added it here. So I'm not sure like I was making some changes before the presentation, so I'll need to take a look. So coming back to the presentation. So that was the demo and that's it. Thank you for coming. Are there any questions? Yeah, yeah, I'll post it tonight. Okay, anything else? Yeah, actually I have three questions. Sure. So I maintain JavaScript for Drupal Core and we're talking about using more modern JavaScript for development at least. So in your project, do you use only ES6, like the next version of JavaScript because of React? Or do you only use that? Or do you also use, you know, like older JavaScript? It's like ES6 is right now. Yes, 2015 is the current standard right now. So I usually use it for most of my projects. All right, so I wasn't at the beginning of the session but do you have always a compiling step when writing React? Well, React gives you, there's a package called create React apps. So you don't need to configure Webpack and it's bundled with it, but I would prefer Webpack over the other module bundlers. And what about the browser support for your website or apps usually, what do you target? These Webpack would compile down to ES5 so I think it should work fine for browsers up to at least IE8. All right. And now if there were tools to help ES6 development in Drupal Core, would that help or would that be a problem with your current setup? I'm not sure if I got the question. So let's say Drupal Core allows you to write ES6 and we have a whole like Webpack configuration already set up. So would that get in the way of developing with React and some other tools? Or would that help for you to reuse what Core does to compile your React JavaScript into regular JavaScript? I think that should be fine, that shouldn't be an issue. Right, so I guess the question is, can React work with different compilers? Yeah, it can work. You can use Browserify or other compilers as well. Okay. And last one. So if there was one tool in Core, which one would you prefer, I guess? Do you mean the framework? No, I mean the compiling. Okay, like these things keep on moving quite fast or like? Oh yeah, I know. But right now I would choose Webpack. Okay, yeah. And any reason or? Well, it has features like chunking coding. So like you can break your application into multiple files based on multiple parameters, like for example, if you're using React Router, you can break it based on your routes. So whenever you go to a particular route, only then a file loads. So it saves you a lot of bytes there. And it works with like everything, almost everything like JSON files, markdown files, images, and all the other stuff. Right, thank you. Sure. All right, thanks guys. Please rate our session. And thank you.