 Thank you all for joining. I'm noticing the formatting is a little off on this computer, but hopefully that doesn't affect things in a noteworthy way My name is Ashraf I'm the founder at debug Academy. I formerly worked as a technical architect at Acquia for a few years and Ultimately, I am a self-taught Drupal developer who has also picked up React a number of years ago as I'm sure you all started to see the industry shift towards that direction, you know, very JavaScript heavy very Much a lot of passion and interest in decoupled projects so Why should Drupal developers be interested in JavaScript or in learning JavaScript? Again, as I'm sure many of you have noticed JavaScript frameworks have really dominated the discourse on the web There are so many decoupled use cases We have mobile apps, but in the future I imagine that the decoupled use cases are going to continue to present themselves in the forms of you know apps on your watches potentially devices like Alexa and whatever the Google equivalent of Alexa is called and I forget what it's called, but There's also of course Drupal and even WordPress at least WordPress.com has a react app Powering managing multiple WordPress websites at once. So the surface area that can be addressed with Decoupling your projects is much more vast than what you could accomplish on a non-decoupled project But for those of us who have been doing web development for a while You might remember back when everybody really disliked JavaScript People used to say like oh you use JavaScript. That's a joke. You're like, why would you do that? But all of a sudden a couple of years ago it became really popular and If you're wondering why that happened It's because in 2009. That's when ES5 the ES5 version of JavaScript came out and Notice there were no updates after that 2010 2011 12 13 14. There were no updates to the JavaScript language and Various reasons for that notice Between 1999 and 2009 there were also no updates and also noticed that ES4 never came out due to some, you know, disagreements in the spec But it got back on track in 2015 and that's when ES6 came out. It came along with a number of improvements to the language itself and Also a goal of having annual releases to continue to improve the language and you can see they've been doing a pretty good job at that as well 2016 17 18 19 each of those years they released updates to the JavaScript language and and So the question becomes What version can I use today? Because as you may know PHP Most of Drupal is server side, which means as long as your server supports it You're fine to use it JavaScript on the other hand like CSS and HTML is client side primarily Which means if the person visiting your website if their browser does not support The the JavaScript you're using then you can't use it so When you're writing CSS or JavaScript you have to make sure that whatever you're writing is compatible with The browsers that people are visiting your website on So yes, five which is the last uncool version of JavaScript is very well supported but IE 11 has limited support for ES6, which is the first version that people actually enjoy using and Drupal 9 does support IE 11 So does that mean I can't use ES6 or above because I'm working on a Drupal 9 website There are a couple of Considerations well as you look at this sad little child a couple of considerations to keep in mind One even though Drupal 9 supports IE 11, maybe your client doesn't care about it and then you don't have to worry about it. You can use ES6 But even if your client does care about IE 11 There are compilers you can use to transpile your ES6 back down to ES5 So what that means is think of SAS if you're familiar with SAS and CSS You write your code in SAS, but you don't deliver the SAS at the end of the day to your end user You compile your SAS to CSS and that's what the end user sees It's very similar with ES6. You can write your JavaScript in ES6 You can compile it down to ES5 and you can deliver that to the end user now This is hopefully a temporary measure But it would apply to things like ES6, ES7, etc now the way that Drupal core handles this is They actually have files in Drupal core and instead of using a .js extension they use .es6.js and this is sort of to have a marker on the files to say this file is using features from ES6 and Eventually maybe in Drupal 10 they might rename all of those ES6 files to just .js because they might not need to compile them down anymore When we finally dropped IE 11 support again in Drupal 10 as is the plan I did throw in an issue link down here. There is an issue for extending that Compilation process that core is using and making it available to contrive and even custom modules it has not merged in yet, but Their progress has been made on it So you might get lucky you might have a patch you can apply from that issue so that you can also Leverage that same compilation process, but if even if you cannot Text editors VS code for example, they have a lot of plugins that will compile ES6 back to ES5 search for something You know note.js Babble, etc. plugins You can use those to transpile your code You can sort of manually mimic the process if you don't have the expertise on your team to recreate The build workflow that is available in Drupal core and if you're using Something like aqueous BLT tool that Very likely if you run BLT front-end it may actually compile the JavaScript down to ES5 for you Okay, so now that we know we can use it Let's start to think about what you know, what's the All right, JavaScript is more enjoyable to write. Is that enough reason to use it? You know, why do people want to use it? First of all, so for those of you who are truly new to JavaScript We give a high-level introduction PHP runs basically before the page is built its server side It runs before the page is given to the user JavaScript on the other hand runs after the user receives the page and that's why sometimes You'll see something similar with CSS and fonts loading But sometimes the page will load and maybe it you know half a second later or 30 seconds later The page will finish loading and then all of a sudden it's interactive and that's because again JavaScript Runs or can run on a fully built page Some of the things that JavaScript can do that PHP cannot do it can traverse the DOM and I am aware of You know certain plugins and symphony components you can use to traverse the DOM But I'm referring to you know after the page is built after it's reached the user JavaScript can traverse the DOM which means it can crawl the contents of the page It can find a div and it can change the text for example within that div And that's the second bullet it can manipulate the DOM The DOM refers to the document object model Which is basically all of the elements on the page and a bit more JavaScript can react to user interactions Just like in CSS you hover over a link and the link color changes JavaScript can for example react to a user scrolling on the page It can periodically run code you can set a timer every 30 seconds run the following code with JavaScript And its code is asynchronous which we'll talk about a bit more So I mentioned the DOM again that stands for document object model and The DOM exists whether or not you're using JavaScript You know if you build an HTML page you deliver that page to your user The DOM is a representation of everything on the page and again JavaScript has the ability to add modify remove Elements within the DOM so you can target the h1. You can delete it replace it with different texts You can replace it with something entirely different You can create HTML elements on the fly and insert them into the page And more you can add and remove Elements sometimes when you hover over a menu link JavaScript might be responsible for creating a drop-down link or Adding a class to whatever it is that you hover it over to adjust the styling Now I mentioned also that JavaScript is asynchronous PHP is not an asynchronous programming language and what asynchronous pretty much means is Or well, let me say PHP PHP for example if you run If you write a couple of lines of code one after the other Even if one of those lines of codes is an API call that takes 30 seconds to run PHP is going to wait for that line of code to finish. It's gonna wait all 30 seconds before it goes to the next line and runs the next line JavaScript on the other hand if you make an API call using JavaScript that takes 30 seconds to run It may start to making that API call, but it's not going to wait until it's finished It's immediately going to skip ahead to the next line and run that line and the line after that and the line after that so in JavaScript, it's possible for you to Finish running lines two through ten before you finish running line one and that's the meaning of asynchronous It doesn't necessarily run in order. It doesn't necessarily wait for each line to finish before running the next line It's one of the things you have to get used to when going from PHP to JavaScript Now let's talk about some of the new features You know, what is it that changed in JavaScript that makes people now like using it more than they used to? Let's talk about this the variable this and this is One of the hardest things for me to teach because somehow whenever I'm on these slides I use the word this in conversation so many times and muffles the message so in JavaScript there is a variable named this and The variable this refers to the global object by default However, if you are inside of an object and you use the variable this and use the variable this The variable this refers to the object itself. Okay, so it has a scope of the object that it's written inside of and that's even true if you Create a method for that object and you write this inside of that method So that doesn't sound too terrible but Methods and functions are not the same a method is a member of an object So if again, you create an object in JavaScript and the object has a method The variable this inside of that method will refer to the object However, if you create a function inside of that method Functions in JavaScript are also technically objects So if you create a function inside of an object the function will automatically Receive its own this value so its own variable named this which points to not the outer object, but to the function and What ends up happening is it becomes hard to keep track of the variable this So you have this on the outermost level You have this in an object you have this in a function you have this in a function in a function and They all refer to different things So traditionally there have been some workarounds to that problem One of the common solutions is to create another variable. You might create a variable named underscore this and set it equal to Whichever instance of this that you want to refer to so for example If you're interested in the global object this and that's what you want to keep working with everywhere else you could say underscore this is equal to the global this and Now Within your functions, you can keep referring to underscore this. You know, you're gonna be reliably interacting with the global Objects or I should say the global this Variable another option is Referred to as binding so if you can see the bold text dot bind You can add that to the end of a function declaration You create a function and at the closing curly brace of the function you write dot bind and you put This in parentheses and what ends up happening is inside of that function Instead of creating its own this variable that refers to the function object Instead of doing that it will take whichever variable you're binding and it will use that variable as The value for its own this variable Now this is all hard to talk about right it's it might be it might be hard to follow Especially if you haven't done this a lot. So now let's see how ES6 fixes that issue So it's referred to as the fat arrow function some people refer to it as the arrow function But basically Instead of creating a function Using the traditional syntax instead of typing the word function followed by a function name followed by parentheses You can get rid of the word function you can go straight to putting the parentheses and instead of Putting curly braces right after those parentheses you can put again. This is what they refer to as the fat arrow So it's an equal sign and a greater than sign And by doing that You're still creating a function, but basically it's like the function is no longer an object So the function does not get its own scope for or its own variable this So you no longer have to worry about you know I created a function inside of a function inside of a function. There are three different values for this if you create your functions Using the following syntax It will not create an additional scope for the variable this so a lot of developers who learn JavaScript in the past few years they aren't even aware of The whole you know dilemmas with the variable this they just always use the syntax And they never have to worry about the scope of the variable this There are a number of ways to actually write functions and all of them comply with What I just described they all have that feature of not creating a new variable scope for the variable this As long as you use any of the Syntaxes that do not include the word function then you will you know reap those benefits another one of the changes is Traditionally, we would use var to declare variables. We would say var underscore this equals this But now there are two other ways to declare variables let and const And to simplify it simplify your process when deciding should I use var let or const? You can sort of follow this workflow. Should I use var? No Should I use let if I need to change the value then yes use let should I use const? If I will not need to reassign the value or if it's an object or an array which you know They are mutable, so it's also okay to use const for those So basically you should use const if you're not going to need to re-declare the variable you're only going to declare it once You should use let otherwise Const cannot be reassigned. So if I say const Age equals 40. I cannot then say age equals 41. It won't let me change that value So what's the difference? Why shouldn't we use var? Take a look at this example. In this example, we are declaring three variables Using each method of declaration. We're declaring using var let and const Right after that, there's an if statement. We just said if true to make sure it always executes Inside of that if if statement we are declaring three new variables using the same variable names and the same variable types and and Look after that if statement in before the if statement and inside of the if statement we Use the same values, but notice after the if statement when we log each of those variables The value is different when it was declared as a var. So let's talk about why when you use var Var is not block scoped So that means When I create a variable using var I've created it for example in the function. I've created it in That variable will carry through into all of the Children into all the if statements for example or all of the switch statements and so on So inside of the if statement in this example When I did when I redeclare my var, I'm not actually redeclaring it It's the same variable Because var is not scoped to that block level var doesn't care that it's inside of curly braces It just inherits the same variable from outside But let and cons on the other hand they recognize we are inside of an if statement and we were created inside of an if statement We're not going to mess with anything outside of this if statement We exist only inside of these curly braces So that's the real difference So it tends to be safer to use let and cons because you're not going to accidentally Overwrite a value outside of your if statement or outside of your function or Etc. Okay Doing on time pretty good I've been moving a little quickly because normally this is an hour and a half presentation, but now I realize I've got plenty of time Okay, so in PHP When you create a function You have the ability to set default parameters. So you can create a function and you can say You know function The variable x equal to one and what that means is if someone calls on your function And they don't pass a value x will have a value of one But if you do pass a value x will have whatever value you pass So that's a default parameter sort of like a fallback value if none is passed in So in ES6 you now have the ability to do the same thing in JavaScript You can set default values on functions. The behavior is slightly different because in PHP We have null which is the end all be all of Emptiness no null means there truly is no value whereas in JavaScript null means you have a value of null So in JavaScript if you pass in null, it's not the same as leaving it empty It will not there goes my wedding ring I'll get that after it will not inherit to the value that is is the default value if in JavaScript if you want it to Use the default value you have to actually type the word undefined or type nothing at all Now this is a nice feature So if you've used Drupal and twig and you compare it to theming in Drupal 7 where we had the TPL PHP files Remember in Drupal 7 we would actually write PHP files and maybe you would print out strings using quotation marks and Can catenate strings and all that stuff and we don't really have to do that anymore in twig In ES6 and above there are now what are called template literals and Basically in your JavaScript code you can use not single or double quotes, but you can use back ticks So very similar to a single quote just a little more slanty so you can use those back ticks to surround your HTML code and And Basically, it allows you to use single quotes double quotes, etc. Etc inside of your Content without sort of breaking the string but also if you notice on the last line of this there's a dollar sign and some curly races and what that allows you to do is Almost toggle back and forth between I'm writing a string and I'm writing JavaScript You see so inside of this again, what's called a template literal? I can put back ticks I can write all the HTML in the world and I don't really have to worry about escaping it But if I want to write some JavaScript code if I want to write some conditional logic I can put a dollar sign and curly braces and anything in between those curly braces Takes you out of template literal land back into JavaScript land where you can write whatever JavaScript you like what people normally use that for is What you can see here sort of a shorthand if statement Where you know if this value is true then return the following text Otherwise return some alternative text another nice interesting but nice feature is destructuring and What I like to think of it as is the ability to mass declare variables So imagine you were given a node object from Drupal and you were given it To your JavaScript file now imagine you wanted to create a variable named title with the nodes title named created with the node created date and Author with the authors ID You might think that you have to write let Title equal node dot title let created equals node dot created let was last one author equal node author But instead of doing that line by line you can use what's called destructuring So you type the word let and then you type if it's for an object you type Curly braces and then you write the names of all of the properties in the object that you sort of want to extract and What it does is it does two things it declares the variables so in this example on the screen it declares two variables one named debug one named Drupal and To the right of the equal sign you see an object so in the example. I was speaking about where you have a node You would actually basically be writing let curly brace Title comma created comma author equal node and what it does is it extracts those three values from the object It gets the title property the created property and the author property and it creates three new variables in JavaScript Again title created an author and it creates those three variables and it also populates them with the corresponding values from the object So it's a shorthand way to both extract values from an object and declare variables It works if the variables you want to declare Have the same name as the properties you want to extract So that's the top half the bottom half is also referred to as destructuring, but that is array destructuring So instead of the top half where we said we want to pull specific properties Which happened to have specific names the bottom half We're saying we want to pull specific values from the array and we can actually name these ones whatever we like because rather than Based on the array key. It's actually based on the position in the array. So You type again let you could also do this with const Or var, but you type let and you put those square brackets type whatever variable name You like and then you put comma separated lists and in this example We have the word one comma a blank comma the word three and what what is actually happening is we're creating a variable named One which will automatically take the first value from that array The second position which is intentionally blank. We are not creating a variable We are skipping the second position in that array and in the third position We're creating a variable named three and it's progressing to the third value from that array taking that value Populating the new variable and when I say taking that value, I don't mean removing. I mean copying So of course the values are still inside of the array as well You might start to notice a pattern with some of these new features They're all just about doing things faster writing less code repetitive operations That's you know now have shorthand versions So there's also something called enhanced object literals which Again in the past you would have to or in the past if you were to create a variable Named the letter a let's say And it had a value If you then wanted to create an object which had a property whose name was the same as the variable's name You would have to manually type in that property name So if you wanted to create an object where you said The property name is going to be the letter a the property value is going to come from the variable a You used to have to type a colon a but in ES6 if You want to create an object whose property name is the same as a variable name and whose Value is the same as the variables value. You no longer have to type curly brace Name of the variable colon value of the variable You just type You create your object and you just put the variable in the object and what that does is it automatically creates a New property whose name is the same as the name of the variable and whose value comes also from that variable So, you know another example if you are working with a node and Someone passes you a variable named title and you want to go to your node object You want to create a title property on your node object and you want to pass that title property The variable that was just given to you you could basically create your object and you can say object equals curly brace or node equals curly brace and You can put the title variable directly and automatically it will create an object with a property named title and It will take that value from the title variable that you pass Some of these things are a little tricky to talk about so make sure you go, you know play with these afterwards There are websites like JS fiddle net which you can just pull a website up and try these things out and See for yourself and on websites like that sometimes you can Turn on automatic compilation So you can write yes six on the left and it will immediately Transform it to yes five on the right so you can try out these features and see what's happening Another nifty feature is the spread operator It allows you to in the examples has two dots. It should have it should actually have three But it allows you to basically take all of the values from an array or take all of the values from an object and Pass them individually So imagine you had an object or imagine you had an array With a couple of nodes that you wanted to pass into a function and you wanted to pass them in You want to make your function call? Let's say the function was named merge nodes So you want to call merge nodes and you want to pass it node one comma node two comma node three If you have an array that contains node one node two node three Let's say that this array is named all nodes What you can do is you can call your function merge nodes and in parentheses you can type dot dot dot all nodes and JavaScript will automatically Sort of explode that array. It will take all the values out of that array It will pass them one by one as a comma separated list of arguments This is actually especially useful if you want to let's say clone an object because in JavaScript sometimes you Especially in react sometimes you want to clone an object you want to replace it with a new object and the easiest way to do that is to create a new object by typing your curly braces Take the old objects and put it as the value inside of that new object But start it with dot dot dot So if you create a new object and its only value is dot dot dot some other object What ends up happening is it takes that other object? It takes every single value from it every property value pair and it Passes them into the object as a comma separated list and it basically builds you an entirely new object with all of the same properties and values And again, you can do the same thing with arrays You can do the same thing with arguments to functions and again, this is very common in React it's it's also useful if someone's giving you an Array or an object and you don't know how many parameters it has or what the parameters are called Then you can use that to pass all of the parameters into another function individually In PHP we might do something like a for each loop where you loop through an object and you I Don't know pass each of the values one by one within that loop Maybe something like that But in JavaScript you just type dot dot dot and it will separate those values out for you and pass them as separate arguments Now earlier I mentioned that JavaScript is asynchronous and I gave the example of if on the first line You made an API call. It's very likely that the next 10 lines would finish running before the first line finishes But sometimes that's problematic if I want to make an API call and then I want to format the data I receive from the API call and this is a very common bug You know, you don't want to make the API call and then format it and have the formatting code run before the API call finishes So sometimes you want to tell JavaScript? You know, I know you're asynchronous by default, but I want these lines to be synchronous And so there's a concept introduced in ES6 Referred to as promises where instead of making your API call directly where you say You know go get this value from this URL and then immediately format it instead of doing that You can make a promise where you say Values from the API are equal to a new promise and inside of that promise you make your API call and What ends up happening is? the line one Technically finishes running immediately, but the value stored in that variable is a promise So when you get to line two and line three again line one does have a value, but the value is a promise and What a promise is it's it's a guarantee that later on We will convert into some other value will convert into an object an array an integer something else now That's that's I've painted part of the picture right because what next right? I say I have a promise It will be something else later Promises are the venable I'm not making up these words. This is how it's talked about. I'm so for each promise You can say for example I make an API call then Do something else so you might say promise The first promise is to make an API call then which means wait for it to finish when it finishes Do the following so then maybe you're going to format the output? Maybe you're going to display it And you can have multiple thens one after the other You can also as you see here you can have a catch so sort of like a try catch block in PHP So you can have multiple thens and you can have a catch So you would have a catch in case any of those calls failed So within that promise you might have some code to detect did this API call fail if it did fail Let me throw an error and that will skip all of the rest of the then calls and it'll go straight to the catch And you can handle that error If you're familiar with try and catch in PHP you might also be familiar with finally Finally allows you to run code Regardless of whether it was successful. So whether it was caught or whether it finished normally Finally runs at the end. Yes, six did not introduce finally. I believe yes nine did so You know Drupal core I think they're going as far as yes six if you're writing custom code You can use yes nine as long as you're compiling it down But I think the way you should handle it is as soon as you write any code, which is yes nine for example You should rename your file from dot j s to dot yes nine dot j s Sort of give yourself some information You know, we cannot stop compiling this file until yes nine is fully supported by all of the browsers And because of that because of the fact that there are maybe features that you want to use that are in yes seven or above You you do sort of have to Not don't take it for granted that these there are new features and we can use all of them You really need to sort of keep track. So most teams restrict themselves to Yes, six they usually say There are features in yes seven but on this project. We're not going to use those We're gonna make sure we stick to yes six. So whenever you're looking up these new features You might want to go to a site like can I use calm and search for the feature you're using that would tell you across browser compatibility But through there or through the Mozilla website The MDN documentation you can find which version of JavaScript Did the feature come out with or will the feature come out with? Okay now With Drupal if you're gonna do a decoupled Drupal site for example, you are going to make API calls and So you have to ask or you will encounter this question. How do I make those API calls? Fetch is the native option. That's available in JavaScript it can return a promise and It gets the job done There's Axios, which is a third-party plugin. You can download that with npm npm install Axios It's a very intuitive and very easy to use you can basically do something like Axios get this URL and it'll behave exactly how you expect it to Fetch on the other hand Requires you to write more code to get the expected results because for example if you make an API call and The end point says error, you know Error, this was an invalid request fetch is gonna say the API call worked success. They told us it's an error But Axios would say hey, they told us it was an error. You probably think that should be treated like an error So I'm gonna throw an error so Axios kind of gets the job done without you needing to think about it too much Ajax comes with jQuery you might be used to that if you've been doing Drupal That's the upside of it familiarity Downside is it requires jQuery and it's typically excessive So decoupled projects typically are not built on built on top of Ajax for the API calls So what should you use? Comes down to personal preference if you want to write less code and you want your job as a developer to be easier use Axios But if you want your website to have less code So if you don't want to download a third-party dependency use fetch So that will make you write more code, but it will make your website have less code I'd say most websites probably Axios if you're building something like Amazon comm where every bite matters because you have so many visitors Maybe you want to use fetch Okay in Drupal. There are a number of ways to expose the data through API Or I should say exposing data to JavaScript JSON API is available in core and therefore it's essentially the standard Option there is graph QL Nice thing about graph QL. You can download it as a contrib module But it can be installed either server side or client side and what it does for you is Think of it as Middleware between your back end and your front end so it can take as many inputs as it needs to from the back end It can say all right We're gonna take some sort one of the sources of data is going to be from Drupal One of the sources is going to be a third-party API and what it outputs is another API It's essentially an API endpoint which can be formatted however you like so JSON API it's It's a spec that Drupal core follows very closely The data is exposed in a very, you know predictable way graph QL on the other hand Is more like a middleware you can have JSON API data go to graph QL Graph QL can reformat it in a way that's easier for your front-end developers to use and then you can pass it through to them some teams prefer graph QL because Again, you format it however you like for your front-end team So your front-end team might not even know you're using Drupal because you truly can format it however you like And if you ever migrate from Drupal 7 to 8 to 9 to WordPress and then back to Drupal You can keep graph QL the whole time. You can keep your front-end API exactly the same So your front-end developers don't even know you switched So that's the upside of graph QL And then through the DOM JavaScript has access to the DOM So if you're only doing a little bit of decoupling think about whether you need an API endpoint at all Sometimes you can just expose some data in twig and then you can traverse the DOM sort of scrape that data from your own page Pass it into your React component or whatever you like and use it that way That makes sense if you're doing like one component or something very small But it doesn't typically make sense for a fully decoupled website So what are the advantages of decoupling? again, it gives you the ability to write your content once, you know in Drupal and Disperse it to multiple sources again the watch the mobile app the website billboard etc Separation of concerns so you can focus on the back-end development work front-end developers can Focus on front-end using JavaScript and CSS and they don't need to learn twig They don't need to learn something that's designed for the back-end tool that you're using so It also Makes it so that you can potentially hire front-end developers who don't know Drupal at all don't know PHP at all They know React or they know something that you know That is popular at the time That's one of the advantages of Decoupling it makes it much easier to build a team of front-end developers very quickly And also, there's a vast community very very large community of people, you know using react using Vue.js, etc And so it's often much easier to get help on your questions and such and there are also just like Drupal has modules React and Vue, etc. They have also Contributed components. They have basically design systems that are contributed Where you can say oh you have like a really fancy slider widget. So material UI is one of them For react you can get all these react components And then you can just start passing in your Drupal data and all of a sudden you have a really good looking website That's highly interactive Drawbacks of decoupling. There's an additional point of failure. So now you have two completely separate tech sex The front-end safeguards built into something like Drupal are lost. So for example Content validation on the front-end You have to recreate that Also, the accessibility Drupal is pretty accessible out of the box But if you throw away all of Drupal's front-end, most of the accessibility work that's done is in the front-end So you're going to have to redo it and that's no small feat I actually think that doesn't get enough attention But also the caching layers Drupal has a very thorough caching system with cache tags and such As soon as you fully decouple Now you have to worry about my whole front-end being served with JavaScript and browsers like to cache JavaScript So if I make an update to my front-end, it's possible my users won't receive that update, right? It's not enough for me to clear Drupal's cache if their browser cached it. So that's a whole nother layer You have to worry about. There are there are solutions, but they're not all that simple So it does make caching for complex websites more difficult So what should you use? I would say you should do a fully decoupled project If your site exists on multiple mediums So if I have a mobile app that Features most of the content that my main site uses then I'm already decoupling my mobile app if the data comes from Drupal I'm already decoupling the mobile app. I already have to maintain that API So at that point you can sort of double-dip and benefit by Decoupling your website as well Especially if there's not one single primary source of data if you're pulling in data from multiple sources Progressively decoupled think of it like partially decoupled That makes sense if you want to include some external information on your website, but really it can probably fit into a block So for example on the debug academy website We have an internal task Management sort of system that is a react app and that is decoupled But the rest of the site the front-end the course list page that that all comes from Drupal We don't really benefit much from Decoupling all of that so we are to progressively decoupled most of the site is not decoupled one page is decoupled pseudo decoupled is Sort of where you might be scraping some data from the page and decoupling it or you're Or you're also You know Yeah, basically that you're you're serving the front-end from Drupal, but you're supplementing it You're enhancing it with some react apps, but really the primary source is twig That might make sense if the if you need your Non-developers to be able to manage layout if you want them to use tools like layout builder It might make sense to do very light decoupling Otherwise, it's usually best not to decouple a Drupal website And one more note Just because JavaScript makes sense for your project. It doesn't necessarily mean that decoupling or that you need to use react this Website, I don't know what will happen if I click this link because it is the Nope, it did not pop up Because it is the conference Screen there we go. Okay, so this is an example of a decoupled app that I'm working on and I said decoupled. This is an app that I'm working on and It is somewhat interactive I Put in numbers here the numbers on the right side change you know, I can I Can just trying to show you that it does change even more so you see even another set of inputs appears And it is all sort of interactive It almost reaches the point where I want to use react because there are so many moving parts that Need to be updated at the same time But it's still a small enough number that I don't need to use react So in this case we chose not to use react because we felt like we could wrap our heads around You know, there are three numbers on the right that need to change There are two sets of inputs that need to change under certain scenarios We can manage that with a couple of functions in JavaScript If there were a lot more moving parts, I would have gone with react if we had Five more areas of the website that change, you know dynamically, I would probably go to react I think we're on the last slide Okay, yeah, and that's basically it. I run debug academy We are in a booth go all the way to the right as far as you can Next next to the coffee in the expo hall Feel free to come by say hello. We do have an architect series So even if you're an experienced Drupal developer, we can Teach you all about performance about maintainability of your code How to do front ends in Drupal quality assurance and more We have also if you are looking to get into back-end development We've got short courses on php symphony as well as advanced module development And of course we have a couple of classes on react and advanced react Specifically geared towards a Drupal audience. So if you're maybe a programmer comfortable writing code Maybe you're an experienced php developer That those courses would be good for you because we dive right into the code We don't spend too much time saying this is what a variable is because we expect you to have that background from For example php or javascript and we get right into integrating it with Drupal and react Yeah, most of these classes are short term and if anyone you know is looking to start their career in Drupal We also have a part-time three month course where we do a pretty deep dive in all things Drupal and help people start their careers I hope you found this helpful and I hope to see you in the expo hall