 We are office mates. We live in Cologne, Germany. We rent a four-person office together and have a couch in place of a fourth desk. Campbell and I are very loud in phone meetings. Adam's job is to complain about that a lot and storm out of the room. So, Campbell and Adam work for Forum One, which is based in Washington, DC, does a lot of great Drupal, a lot of non-profit governmental kind of stuff. Adam is Campbell. Adam. We get confused all the time. The Black Ninja Campbell is team lead, back-end developer, project manager, but he hates doing it. Why don't we introduce ourselves? Because then I can say that. So, I'm a team lead, technical team lead, project manager, but I hate doing that. So, the three of us, we share an office space. No, we don't necessarily all work together. So, my name is Campbell Vertesi. You might know me as Oh, the Huge Manatee on D.o. or various other places. I am a technical architect for Forum One, which means that I'm the lead of the developer side of Build Teams. I've been doing Drupal for 10 years officially this con. Scares the hell out of me. Your turn. Okay. Hi, my name is Adam Juran. I'm a senior front-end developer for Forum One in Washington, D.C. I've been a web developer for about 16 years. I've done everything from logo design to schema design, and so I'm really happy as a front-end developer where I get to touch all the parts. And I've been doing Drupal for about, did that sound bad? For about five years. My name is Jam. Horn Cologne on all of the social medias, including Drupal.org. I got started in Drupal about 2000 and looking at the slides today, probably 2006. I had heard about it from Robert Douglas right since the very first Drupal con. And I fell down this deep, dark, beautiful hole very soon after. I've been working for Acquia since 2008. I started in Acquia Engineering in 2011. I moved to the dark side and I've been in marketing ever since then. My current title is open source evangelist and I have the tremendous privilege to speak with a lot of Drupal audiences around the world, coaching Drupal shops how to have better conversations about business benefits with potential clients rather than about widgets. I talk with a lot of business people, governments, about the benefits of adopting open source practices and tools. And I have also had the great privilege through the great Drupal 8 expansion to meet a lot of other open source communities that we are now going to have a lot to do with. As I said, we share an office, especially I meet an awful lot of people and there's been a lot of hype about decoupling and headless and back and forth. And what we're about to do stems from a couple of simultaneous ideas. On the one hand, when I'm out in, let's say, Symphony Land or talking with framework people who essentially hate what we've done with their code. Okay, they're really disturbed to see the fundamental design decision that we've taken as a project, which is empower the end user, make as much as possible available in the UI to configure to assemble. So this whole idea of this beautiful system that we've got to enable people to communicate, build, community, realize their visions without necessarily having a coder there is unique and it makes us, it gives us incredible superpowers. And I think it really gives us a power to change the world. So my hope in maybe six or eight months when Drupal 8 is out and really, really singing, the initial mental model I had for this session comes out of a lot of office BSing that we do all the time. And I want to be able to show up at a Symphony conference, at some PHP conference, at some other technology, very coder heavy technology conference, and build a minimum viable product and launch it talking about business value in 40 minutes. So go from, here's a URL where there's nothing to, here's this, I've done data modeling, I've done views, I've done all this content management, and I'm exporting it to a couple of different things, maybe an app, maybe an Angular, whatever it is, and say, hey, this, right, how long would it take you to do this in content? Because in Drupal I can do it in 40 minutes in the UI. Can I add to that? Please. This is another way of saying that building your data crunching in JavaScript sucks. How many, hands up anybody here who's worked with Angular, React, or any of these other popular... Cool, right, except... Right, so keep your hands up if you've worked with it. All right, so how many of you thought that building the front end using those systems was easy? Keep your hands up. I like to see some hands going down, that makes me feel better. I've only gone to the point where it's easy very recently. All right, now how many of you felt like once you got to the point where you're doing your data analysis and actually combining data sources, that it remained extremely easy? Right. This is the need that D8 can fill. A super great content management system that's amazing at managing content. Whatever else anybody thinks about Drupal, Drupal's more or less the best thing out there for managing content. And Drupal 8 gives us some incredible superpowers to ingest data from anywhere and output it to anywhere in any format that we want in the end. So another way to look at this feat that the technical side of I have nothing to do with is, you're a founder, you have an amazing idea until now you really, really need a hacker. This idea of hackers and founders going together. What if we empowered with Drupal 8, the founders, the visionaries, the entrepreneurs to build a proof of concept, to build an MVP, to build something that works without a hacker right there. I think that's amazing. I think that a lot of us could really get behind that idea. There's also this funny idea and this is the third way we can look at this. Because there are all these amazing front-end things out there, nowadays a lot of people are, you know, starting their project by building the front-end and then they get kind of stuck. And we can fill the gap there too. Would you like? Please. All right. So, we don't have many slides. Those of you who have seen our previous presentations know that we really prefer to do code demonstrations. I think that most of the people who come to this are advanced enough to be able to follow along in code. And so, that's what we really want to show you. So, let's be clear about what the objective is here. Now, in the past, you've seen Adam and I working competing with each other. We thought this is a great chance to see, all right, well, what happens if Adam can run completely separately? This is the point of something like Angular is that you can have a front-ender who's totally separate from the data layer. So, we'll see about that. So, this is going to be headless Drupal 8 that everyone gets so excited about right now. It is going to be a totally decoupled front-end that you can serve as static HTML.js. In fact, at the end, we'll give you a link so you can see this served on GitHub pages because it's that simple. Drupal 8 will be in the back-end. It's going to be ingesting data, processing it. Doing really simple processing because I don't actually have that much time. And spitting it out restfully. So, the only part you need to deal with in Angular is this super, super easy bit. Why would you do this? If you happen to have team expertise in a front-end framework that has perhaps already built something for you because it was a little bit premature, or maybe you're giving a Drupal Con presentation, I'm looking forward to the bofs about headless Drupal. I'm looking forward to the beers about headless Drupal. Even after having done this, I don't know how convinced I am. So, it's a bit of a contrived example. So, what you need to make this happen, to follow along at home, you need somebody who understands a front-end framework well enough to build one. That's not a light requirement, by the way. The basics are easy, but it gets hard. You need a back-end platform that's capable. And you need a presentation slot. So, this is... Oh, no. It doesn't do my nice... No. Oh, well, I'm going to have to read to you what's supposed to be an overlay down there. This is the slide that was chosen by the AngularJS expert who gave us a ton of help, form one developer Alex Ford, absolutely phenomenal resource, and saved my butt many times on this. He chose this slide because he didn't want a real picture. For the back-end platform, we have Drupal 8, but it turned out that Drupal 8 wasn't actually capable of what I wanted it to do. So, the only reason we can do this presentation is because of the fantastic help from Mike Ryan and Chicks, in particular, who are very friendly guys in IRC once you get them going. This is the enormous patch that got spawned by this presentation. It turns out that Drupal 8 didn't have a way to ingest CSVs in any kind of complex way, so it involved actually writing the CSV plugin for Migrate Module. You can check this out and help out with it this week. Thank you. I'm hoping to get it final. You're welcome. It was a lot of weekend nights. My wife wasn't happy. So, our starting point, we have a complete AngularJS frame that we consider proof-of-concept worthy. We figured you're not here to learn Angular, so that ugly part we're happy to hide from you. It looks like crap. It uses just static data in the Angular back-end. We have a structure there, but it's just flat JSON that's getting returned. That's all the presentation part that we need to do. Does anybody have any questions before we start into actually what we're building? Okay, one name check more before we get going. As Campbell mentioned, we've been be-yesing about this a lot in the office, and a lot of the ideas that there are some really valid use cases and some great possibilities that we have. I'd like to be very, very clear that the twig theming system that we've adopted for Drupal 8 is absolutely incredible, and the Drupal implementation especially is amazing, and things like with the help turned on that'll give you the source of every single tag and suggestions on super classes to override everything. It's utterly astonishing, and we shouldn't just run away from that. And there's a great blog post that talks about pretty much exactly what we're doing called Headless Drupal, The Cake Is Alive by the user Fubi in Austria, and that's really, really good resource worth looking at when you're thinking about this stuff. We're going to turn it over to Adam, who's going to walk you through how he built the front-end using all of those nice front-end-y tools that didn't have to care that there was nothing behind it. So, we're going to start with one of those front-end tools, and I'm just showing you this is the starting view, this is what I was starting with, and I go to my terminal, and we're using Bower because that was, made my life easy. Campbell did set up a, what was it exactly? The CSS, I know, I know. Set up Bower and Grunt to compile CSS for us. And so I used Bootstrap, but then I decided, say it again, good way to do that. Anybody know the iTunes video player better than I do? Sorry? Command plus doesn't do it. Maybe if we make the whole screen a different resolution? Let's try that. It's a screencast. Yeah. Oh, that's a great idea. Let's see, let's just see if this works, and then if not, that is no better. This is the audience participation section of the presentation. Oh, this is even worse. This is also not really good. Okay, zoom in. Command option plus. Okay, let's see. Better, marginally more legible. He sounds just like my clients. Okay, but now I have no idea how to get out of this to get back to the, you can just sit in the background. That's cool. Best for display? Oh, thank you. And now we try again. Any better? I'm still getting ahead of you. Guys, I'm sorry, you may just have to squint. Also, because we don't really have time to monkey around with this. Any other good suggestions? We'll post these videos online and then, yeah. That's a really good idea. So Adam, you're really going to have to describe what's going on. That's okay, that's what I was doing anyway. Call out the letters that you're typing. Yeah, right. No, I will describe exactly what I'm doing as I'm doing it. All right, so, here we are, installing Bootstrap because what we had before was kind of ugly. But after doing some fun research, I actually came across a theme for Bootstrap called Bootstrap Material Design based off Google's Material Design, which is what's on Android. And I thought that was really cool, so I would install that. And one of the, while it's doing that, one of the goals I had for this was to make it as simple as possible, and I decided that I would set the restriction for myself that I would write no new CSS. So everything you're going to see me do, I'm only adding classes to the HTML of the Angular framework, Angular app. So there we are. That's because I'm a really bad gamer. So here I am, I'm adding a container class to the main div, and I think I'd pop back to the, and then you can see what that does. We have a container where you have some padding. And then I'm, let's see, what am I doing? I can't even see that. So I'm just adding classes to, this is the page header for the title, giving it, there's an existing class called Jumbotron, and it does cool things like that. No CSS, it was already there for you. And I think then I center it, boom. This is very exciting, right? But I mean, even a developer could do this. It's bootstrap material design on top of bootstrap. So now, one of the cool things about material design, it just has a ton of icons, hundreds if not thousands, and you can include them relatively easily. And I'm just throwing in some classes for the button, and then I'm going to tell it what kind of icon I want in that button. Just adding a class or two, right? Yeah. I think I'd tell it I want it to be blue. Or 10. Lots of classes, yeah, I mean, that's the, it's the plus or minus. No new CSS, but lots of, oh, there we go. We have a little indigo blue star. Because the name of the app, as you saw, it's state versus state. Our original session was coder versus theme, and we thought this would be a nice little play on that. All right, so now I'm adding a bunch of stars, changing a few colors. Sure. So what this app does is that it, well, ultimately when we see Campbell's part, it parses data from the US Census based on state, comparing the states on three key categories. What were those categories, Campbell? Oh, these are the three most important categories for comparing any place that you might want to live. This was very scientifically selected. The number of single people. Was it the number of fiber optic modems? Oh, that's right. How many fiber optic connections there are in the state? Also key. And number of toilets. You do not want to be trapped in one of the states that loses in that category. But let me tell you, Alaska does not do well. I know it's gone. Here we go. So now I'm in the form, and making it look pretty so that the dropdowns don't look like plain old HTML elements, and that they have a nice little frame to them. For those of you that haven't used Angular or a similar platform, Oh wait, hold on, I'm going to drop to you. So what I'm doing here is one of the groups of pre-existing classes allow you to do layouts. So that's a COL-LG-5. It comes out of the box with a 12 column grid layout, and so I want the left column to be five, and the right column to be five, and the little space in between with the VS reverses to be two. That's all done just by adding classes to your div structure. Yeah, for those of you that haven't used this kind of framework before, this might be a bit confusing. It allows you to separate out chunks of the page into separate HTML files. So in index.html you define your own HTML element, whatever the heck you want to call it, and you can fill in, and you can insert from another file. So you cannot... Don't get confused when he jumps around. So this is called state-form.html, and in index.html it's referenced by a HTML tag called state-form. It's not div, classical state-form. It's the element is state-form. So here I am still trying to make that pretty, and I've added a panel heading to it, and a panel title, and I'm centering it. I think I give it a background color. I probably got confused right here. Oh, and then in the panel body, and then I'm going to drop the select into there. Why don't you tell them, Kimball, why you're using ng-repeat, not ng-options? Because I got confused. A couple of different ways to skin a cat. And I'm really bad at one of them. Difficult syntax. All I really know is PHP. Yeah, this is just me writing HTML. It's very exciting. Does anybody have any comments about how he's doing this wrong? Can you read well enough to tell us why he's doing it wrong? How would you know? It's all magic that you guys do in the front-end anyway. Pretty much. This is the office every day. All right, so I just copied that structure. I'm going to drop and change a few text change, variable change from the ng-model, because it's the second state. Get rid of that. Tighten up. Because you want the HTML to look good. And, all right, almost there. I did not. One of the interesting things about these panel headings and titles that I'm probably trying to figure out right then as I'm doing that, is wondering why this isn't working. No, not Chrome. I'm using Firefox for this. Chrome had, like, 30 tabs open. Anyone else have lots of tabs open on their regular basis? Yeah. All right, Solidarity. Yeah, this is almost entirely unedited. I say almost entirely because at some point I got panicked and told that I'm to stop because the backend wasn't in place. But I didn't need the backend. So this is me where I figured out that, oh, I needed the panel, I think, heading class around the panel, title class to make the CSS work properly. It had a direct descend and selector on it, if that means anything to anyone here. Can you explain that a bit better? Basically, the CSS was particular about what class had to be below the next class in order to get that blue border on top, which you'll see again when I change that color to indigo, I think. Or, no, I'd center the text. Yeah, you'll see it again in a second. The first time you saw it, there was no, the select US state did not have the blue background. So it's because it needed div class panel heading and right below that div class panel title and if it wasn't the direct child, it wasn't going to work. Small details. Now I'm adding the form control class and Firefox doesn't render selects very nicely, but you do get that cool green underline which you'll see right there, boom. It animates in Chrome, but like I said, I had 30 tabs open. It animates in Firefox too if you do your updates. Adam. Bite me? Anyway, so here we're going to make the fight button look a little prettier, make it orange. I probably could have used an orange class, but I already knew about the BTN-warning in material design, so I was lazy. There it is, but it should be in the center. Let's fix that. Center it so easy. Yay. Center that and make it larger like an H1. All right, we're happy with that. And now we're going to go on to the result set. So I'm going to pick a couple states which he had hard-coded in. There you go. There are the hard-coded results. Go to the result. And let's see what we're going to do. So you can see, I think right up the top, there's an ng-show, which is right there. And it says if this is the winner, then add the text, add a span, which has the text dash winner, but I wanted to do something more interesting with colors. So we're adding an ng class, the same comparison with a ternary operator, and I'm going to tell it to make the heading green if it's the winner and the heading red if it's not. And I missed something clearly. Yes, please. Yeah, so I'll repeat the question for us for the recording. I'm assuming that there's a mock service set up to provide the answers. We didn't have a service. All we had was the... Well, I'll show you and we'll get to my video, but all we had was the controller initializing variables that are in scope. And since they're plot variables, there's no need for a service yet. So let's see if it works this time. And the answer is no. But one of the cool things this is demonstrating is that front-end developers these days don't actually need to wait for the back-end to be completely done, especially with these types of frameworks. But the same can be true in a normal Drupal project. At Form 1, we use Pattern Lab, which is a great front-end tool, a bit of a learning curve, but it allows theming to happen concurrently with development, if not before. And then you guys... Then we have to wrestle, spar, really, with the developers to figure out who's going to handle the layout issues. This is where I figure out why my colors aren't showing up, because I needed that panel heading class again. Ah, yes. So additionally, going back to the icons, so many icons, thumbs up, thumbs down. So using NG Show this time, if this is the... Partial is being used for both state-result panes. And so if this is the winner, I'm going to, next to the state title, give it a thumbs up. If it's the loser, it'll get the thumbs down. Other questions while we're doing this. This is a very good time. Yep, it's a little slow for a second. Yeah, go ahead. Yep, just a JSON object. There's actually two times that it makes, well, what we'll be called back to services. The first time is to get the list of available states, because theoretically maybe you don't have data for all of the states, and so you don't want to offer a handful. And the second time is to actually get the results for the given states. But yeah, they're just statically defined for now. It's popular. Could have just as easily been... The difference is backbone is... not as out of the box. I think actually there's a stronger case for working with backbone in conjunction like Drupal where his anchor is really built around the concept of this is going to provide your entire experience. I'm sure good backbone people would complain that that's not right, but that's the way I see it. What about React? It could totally have been done in React, but hardly anyone's using it yet outside of the Facebooks. So part of the point of this exercise is to show that what Drupal does can be just outputted by Drupal as a Drupal site or responsive web app or be the back end of a native app or put data into anything else that needs data and in any format. So next step, you could actually have this output powering a proper website and a proper native app, and we don't have to change anything about what he does except the final service that outputs it. So here we are in index.html. You can maybe see the state. There I am. There's a state form tag itself. I'm adding some layouts to this, the layout classes so that it aligns underneath the selects that I had already themed, I guess. Is it theming if you don't write CSS? I don't know. That's a very good question. The website is built and no one in CSS doesn't make a sound. There we go. Boom. Now I'm just demonstrating it's already responsive because it's bootstrap. There you go. Okay, would you hit pause while I get over there? Yes. So I'm going to jump through this a bit because you don't have to watch 20 minutes of repetitive Drupal 8, but this is starting from a totally clean D8 site. And the first thing we're going to do is we're going to define the taxonomy that's going to be states. So I mentioned that what we're doing is really simple data crunching. I'm using crunching very liberally here. We're going to take in, I think it's three, no four different data sets. And we're going to relate them to each other by a common field, by state. So first we have to create that state taxonomy. That's done. Now I'm using Drupal Console to generate a module. So Drupal Generate Module. And it gives me a nice set of prompts that allow me to not know anything about Drupal 8 code and still create a module, which is always kind of a weird use case in my mind. So we're creating one called CVST import, telling it it has dependency on migrate and migrate plus. And then Drupal Console throws an error because that's one of the things that's very good at doing. What am I doing here? Oh, I'm just going to make the directories. So in approaching this, I first thought that I was going to do this using Twitter data. Turns out the Twitter module for D8, even though it's supposed to be reasonably stable, turns out the OAuth module for Drupal 8, even though it's supposed to be stable, isn't. So the last fallback was, well, we know that we've got migrate module in D8. So we can just use migrate like it would in D7 to import from a static data source. We can import from census.gov CSVs. So hands up if you've used Drupal 8 migrate yet? Yeah, okay. So hands up if you've used Drupal 7 migrate. All right. So Drupal 8 migrate is only for Drupal to Drupal migrations. It has the basic framework. There's a separate module, D2D migrate. And it doesn't have any of those nice sources for CSV. I mentioned I had to add one. It also doesn't have a UI. These were important things for me to know before I proposed a session about this. So actually the way you define a migration in Drupal 8 is just by writing a YAML file. It lives in a custom module in a subdirectory config slash install. You name it after your migration. And it's actually quite simple. There's three pieces to this YAML file. At the top, if you can read that it says ID states, label state terms and some general group information. The second section is about the source. So we get to say, okay, well, this is coming from a CSV. That's the plugin we want. Here are the arguments that that plugin needs. So in the case of a CSV, we need to know what's the path. I'm just verifying that it's actually called state. Yeah, that is what I'm verifying. We have to know what the path is. Are there header rows? What's the unique key? All that kind of stuff. The next section is process. That's where you get to put in what are the field mappings. And the field mappings are really simple. Pause it for a second. It really is Drupal name of field, colon CSV name of field. If there's anything more complicated than a direct one-to-one mapping, you get to use a plugin. And that's the same. So this is the VID field that my mouse is around right now. And we say the plugin is default value because I just want it to be the same for every line that's imported. The default value is states. Actually way easier than writing a seven migration. It's just kind of too bad that there's no UI for it. The last section is destination. And all we have to do is say this is handled by the entity plugin and it's a taxonomy term entity. So that's it. Now I'm going to enable the module. Yep. Yes. The question is, is it possible to add more processing in Drupal 8 Migrate? And it absolutely is. You can actually chain plugins like that. So you could start, for example, I wrote a plugin that's to identify a taxonomy term by name and vocabulary. And then you could use that and then add, munch the title a little bit if you wanted. You can chain them one after the other. I wrote that plugin the week before we removed taxonomy references as a field type in core. So it's not useful anymore. Can we have a question back then? Another question. Yeah, I wrote it and it's on Drupal.org. So I repeat the question. Where did I get the CSV plugin? So Migrate and Core doesn't include the sources for things like CSV. There is a project called Migrate underscore. Plus that's the stage and ground for all the stuff we would like to ultimately put into Migrate Core. This is very important and you're going to watch me enable it in a minute. This is very important if you want to do a migration because it contains things like a Drush integration so you can run a migration. It doesn't exist in Core yet. Now it contains a CSV plugin and it's going to have a few other ones by the end of the week, hopefully. So I just installed Migrate module, Migrate plus, so I have those Drush commands and my own custom module and cleared the cache and now I'm running drushmi states, states being the name of my new migration. And it runs, and despite the fact that it comes up with a big error because that's one of the things that Drupal 8 is good at, it says at the bottom, 52 items imported successfully done with states. So I'm going to go back here and have a look and let's just see. Very important to actually validate your migration. You're going to see a couple that go wrong here soon, but this one I think is just fine. We'll have a look for terms and state, like magic. There's our terms and state. It took me weeks to make that happen. All right, so now we're going to add a content type with one content type for each discrete source of data, expecting that you might want to have quite different structures for different sources of data. So the first thing I'm going to import is... What are we doing first? Huh, number of toilets. So this is a content type called toilets. I'm just adding a field using the normal field UI. This is a float for a number of toilets in the state. Great, now I'm going to add another field. Totally normal field UI term reference, right? We're going to reference that taxonomy term for state. Another question. Actually, yes. Sometimes, yes. Urinals are only three-fifths of a toilet, right? Something like that. So here is the migration and now I'm going to start by creating a new migrate file and then I realize that stupid I'm just going to copy and paste. Because I can never remember quite all of the fields in there. Actually, the best purpose of the D2D migrate module when you're doing something like this is it is a wealth of examples. When you think about it, they have to create a separate migration for every little detail in D6. So everything from the variables that you set for site-wide information to the taxonomy vocabulary to the taxonomy terms, it's very helpful. So here I'm looking at my data source, trying to figure out, first of all, which of the almost identically named files I'm looking for. And secondly, trying to figure out what is the actual column header that I want. I think I'm going to skip ahead. Well, I'm going to skip ahead just a little bit here. So this is the same migrate.yaml file and what we see is now the difference is it's a different CSV file in the CSV source. We have different fields. One thing, this is another example of a plugin that I'm doing for the node title, is concatenating two strings. I can define a constant under source and I can concatenate that with a geography. So this will come up saying Alabama colon toilets as the title. And here we're setting what is the field title that we want. So this is the simple use case. Field underscore toilets is copy and paste whatever your CSV title is. Field state term. So this is another plugin that you're going to use a lot. The plugin is called migration. This means that there's going to be some kind of unique identifier in the value for this field. It's not going to match a Drupal unique identifier. The rows in my toilets sheet, their unique identifier is the name of a state. And when Drupal goes to import that and it tries to put the name of a state in a taxonomy reference term, it's going to bork because that's not a taxonomy ID. So we use this migration plugin to say, look up in this previous migration you did called states, something that's matching the geography field. Then pull out the TID and use that as the imported value. This is also even easier than it was in D7 and I quite liked it in D7. So now we're going to run the migration. This is very important actually. Notice that the YAML files are in config install. That means they're only parsed when the module is installed. Which means that every time you add a new one, you have to run drush CIM to re-import the configuration from that file, from that directory, so it finds a new one. Now we run my toilets and can you guys see all those errors? That's not just Drupal 8, that's actually important. So what it's complaining about is missing the bundle for the entity type. And that's when I realized that I forgot to change destination. It's not a taxonomy term, it's actually node. And I think there's one other... Oh no, I got title this time. So this is another thing that's missing in Migrate 8. Any way to revert. So I do drush SQLC and I truncate the table, the migrate map table. It's not clean but it works. And I get those errors again. Anybody have a guess as to why I got those errors again? Because I didn't re-import the configuration. Duh! This one took me an hour to figure out the first time. It's brutal. So I'm going to re-import that migration. Now we're going to run the migration again. Now we just get the error that we were expecting. And it says 52 items imported successfully. We'll have a look and see magic imported content. So all I do for the rest of this video is... Well, for most of the rest of this video is copy and paste and tweak the values in that YAML file. So what you could see back there is that it... Let's look at Mississippi toilets. And you can see sentences you never thought you'd say into a microphone. Can you say that again, please? Let's have a look at the Mississippi toilets. Thank you. So you can see we did successfully get a decimal number for the number of toilets. We did successfully associate it with a state term. That's wonderful. Now we can move on to copying and pasting another YAML file. So I'm going to create another content type. And we're just going to skip over this because you don't need to watch that many times unless people want to. That's what I thought. What am I doing here? Am I just closing these? More YAML. You know, you're making me look bad since I made them watch my entire video. Yeah, Adam, the torture. You're welcome. This is me reverting another migration. When it actually managed to create the nodes but doesn't have the values in it, so now we have to truncate the map table, we have to re-import our improved config file, and actually go in and delete all the nodes manually. Just like this. So old-school. You don't realize the little things that you miss working with D8. So we delete a bunch of nodes. That's great. I can tell you right now that it's going to work. There we go. So once all of our content is imported, now we've got three content types and a taxonomy type, all populated with data. Now we have to do the rest endpoint. How many people have done a rest endpoint in Drupal 8 so far? It's super easy. How many people have used views? In seven. It's identical. All you got to do is enable this one module called rest web services, and it offers you a new kind of view. So here, add new view, states, and even in the wizard, I can say it's a rest export. The taxonomy view would need to give it some kind of a URL. Good, question time. And restful. I didn't need to use restful, so I didn't bother. And frankly, the state of non-core is such that I didn't want to risk it. Everything is breaking on a weekly basis at this point, despite the best efforts of good contributors. So now we're creating the second one, the second view, which is going to actually offer state data if you give it an argument. So even if you can't read that, you can see that it's just like the regular views interface. There's absolutely no magic that's different here, except that what gets output in the preview is now rest. I think I managed to do this in record time, working with views. So we're going to say provide a default value, and we want to say query parameter because that's most reliable for me with my JavaScript fields. JavaScript skills, rather. We'll have validation, and that's the end of that view. I'm just selecting the fields, just like you normally do. And in 30 seconds or so, we're going to just test this, state data, question mark. State ID is, I had to double check what the parameter is, but state ID is we'll just pick a number, 5, 3. Can anybody read the rest? But it's okay because Angular will be able to. That's it. That's all I had to do to be able to create a rest backend in Drupal. So, woo! So I said that we're not going to teach you guys Angular. There's going to be a 35 second video to show you how we modified the Angular to make it take this rest. This rest backend because it's totally normal. I'm going to turn the volume to maximum. Add two services using HTTP. They don't even have any failover. Totally simple for anybody who knows Angular. And in the end, we have our app in one second. Sorry for the deafening, guys. Why can't I go back to my... It's okay. You guys can see it here. Oh, that's why. So, if you are interested in having a look at the code for yourself, we have the front end completely separate that's hosted on GitHub. You can see this on GitHub pages as well, which I guess I could show you. And the back end is also on GitHub. That's where I'm continuing to work on my work on Migrate Plus. So, we're just... I'm just going to do you a quick demo of what the final state versus state is like. Actually, maybe it doesn't work on the GitHub. Now, think about it. Maybe I have to do it on localhost. Things you should prepare before your presentation. It's the shortest one I've got. Thank you, MEP. All right. So, this is using our... This is using the tablet layout now because of the size of the screen. Because I used views to provide the back end, did anybody notice that I did that? I don't remember to take off the limitation on the number of results. We only get 10 states to work with. Touch wood. Got my field definition wrong for cable monoms. What a pity. Anyway, so it works. Any other questions before we dismiss? Okay, that's pretty fun. Yeah. Yeah, we're going to need to follow on support contracts for this client just to clean up a few last things. Question? Yeah. Mostly because it was so... Did we have two rest services? Yes. Mostly because it's so easy to create rest endpoints that... Why not? If the end goal is a Drupal con demonstration, sure. We'll do like 10 rest endpoints. That's cool. That's a really good question. I could have done it that. Why do I have three content types instead of one content type with three fields? It's a good question. It could absolutely have worked with one content type and three fields. When I started planning this, the idea was to have actually much more divergent data than that and take in more data. But in the end, trying to keep it simple into something we could show in half an hour or 45 minutes had to simplify. Other questions? GitHub repos for you. So the question is, this is two separate repos, two separate apps. What would I do in a production environment in terms of, I guess, repository structure as your question? I would keep it actually separate. I do that because they have wildly divergent requirements. The place where I'm hosting Drupal 8 needs way more horsepower, needs way more tolerance and a totally different sys admin team actually. And where I'm putting the front end just needs to be able to handle a ton of load and basically serve flat HTML. You could serve those out of the same box, but they would still be out of different dock routes. Last question. Very good question. Why couldn't we just put the angular in a theme since it's all front end code? Because if you're going to use Drupal's theming layer anyway, what are you going to use angular for? Drupal's theming layer is already tightly bound with the back end. You don't need to have a rest web service to get the back end. It's it would make it even sillier. Especially, it's worth noting Drupal 8's theme layer out of the box responsive, extremely machine readable, multi-lingual, lots of great perks that you lose when you're using a third party front end like this. So, when you put the angular into the Drupal theme, you're really spitting in its eye. Alright guys, thank you very much for coming. We will be around the conference and happy to talk more. Thank you all.