DrupalCon Los Angeles 2015: Angular.js with Drupal 8

all right good morning everyone so we're here to talk about angularjs with Drupal 8 first of all yeah I know I'm excited too so let me introduce myself my name is Travis Tidwell I've been working with Drupal for almost 10 years now so back when it was like Drupal 4 I have a lot of community modules that I've offered one of those media front so that's probably one of the bigger modules that I have lately I've really been getting into angularjs and I felt like it's extremely relevant to Drupal's futures so that's why I'd like to talk about it so thank you guys for coming I'm just to give a little bit of introductions I've already introduced myself Travis Tidwell I'm the CTO of a new company that I'll talk a little bit over called for my oh my twitter handle is software gnome where I spin I don't spend much time on Twitter so don't expect much out of me I'll tweet every now and then but where I really spend most of my time is on github and so you guys can see my github name there it's travesti at github and I've got a lot of open source contributions that some of you guys might find valuable and you're you're welcome to use them so before we begin I would like to just give a little bit of an introduction as to the company that I started and we have a team of people working on it now and this is for Mayo and essentially what we're what we're trying to accomplish here is we are providing developers this easy drag-and-drop interface that allows you to create both forms and restful api s at the same time so the the whole idea is you can create api is using forms and so we've try to make it real easy to build the forms and then provide a angularjs directive to immediately embed those forms into your application and they just come alive its form + io that's where we get the name form a oh you build the app we handle the form io another thing I will let you know is we're in private beta right now which means you can try it out but you have to have these beta codes so we're handing out these thumb drives that has the beta code on it and it also has a walkthrough tutorial on how to use it so if you get if this sounds like something that you guys may be interested in come come see me after the presentation and we'd be happy to give you guys some beta code so let's let's jump into angularjs oh actually before another thing I also like to do is I like to give all the presentation materials online so you guys if you wanted to you could follow through on your laptop this president this projector is not the brightest projector in the world so if you have a hard time reading it it may actually be beneficial to just load up the presentation on your local browser and you can kind of walk along with me so that's Travis Tidwell comm forward slash presentations forward slash Drupal dash angular if you guys want to follow along with me you can also look at it on github I have a presentations repo and this is inside the Drupal angular folder inside the presentations also the angularjs app is the app folder inside of that so whenever I show you guys the app that we're gonna build all of this source code is provided for you guys so you guys can try it out so before we begin I'd kind of like to get a little philosophical and talk about why why would you want to use angularjs and angularjs is one of those things where you know a lot of and I know a lot of developers do it I do it myself where you always want to use the technology like with what all the cool kids are doing right angularjs has that feel you know you you learn it you go out you buy some skinny jeans and thick rim glasses afterward because now you're one of the cool kids and a lot of people use it for that reason it's just because hey this is cool and I want to use it so therefore I'm going to but the way the way I like to see angularjs in fact what I'd like to talk about is I believe angular represents something way more to Drupal than a lot of people realize and not necessarily just angularjs there's a lot of technologies like it there's angularjs there's react which is a fantastic front-end framework in birch AS all of these frameworks represent something that is new to Drupal and in my opinion Drupal's future it very much depends on these technologies because the web is changing and these technologies represent that change and how to deal with it in order to really dive into it though and understand why angular why I feel angularjs so important to Jubal I'd like to kind of just take a what a step back and just talk about how the web has evolved to get to where we are today because it's real important to understand how we are today in relation to five years ago in why today the way we build apps today is so differently so different and in order to really capture that context let's just take a trip through memory lane if you will of the web so everyone probably remembers back to web 1.0 and web 1.0 is really the static web and the way this worked was every browser a user would go and they would type in the URL that would go over this little cloud this internet it would hit a server and it was a one-to-one connection based on here's a page I want to request the server that would then hand that page to the person and it was a static HTML file and every thought everyone thought it was wonderful this was a static web it was a very brochure oriented web web ecosystem what a lot of people then realized is that from the server perspective we have these requests coming in and I'm I'm handing a backup page I could actually intercept that request and do some other cool stuff and dynamically present a page to the user so they feel they were visiting a static web site but really it's a page that's constructed via scripting languages and this was the rise of web 2.0 which was the dynamic web where PHP really kind of rose from this as this really easy language to dynamically generate content the important thing I really would like to point out here is is the flow of traffic and what people are actually doing so you have a user who hits the internet that hits the server and then the server gives the user the interface to the browser and that's that's the key that I want you guys to take away from this is that these the server is still handing the user the app that they interface with and this all came about with web 2.0 and from this that a lot of people realized that we can build these tools that make it real easy for developers so you don't have to learn how to write in order to build these dynamic websites and this really from that came the rise of these CMS's Drupal WordPress Joomla they realized we're gonna make it easy for developers we're gonna make it so you don't have to know how to code in order to deliver the this content so essentially what the what the user has at this point is a very dynamic web they can create content they can comment they can do all of these things but another really big takeaway is even in this world the user is requesting the interface from the server and the web is changing in a way to where I feel like that whole paradigm is actually flipping and apps are be have to be made differently and in my opinion it it has a great amount of consequence on to Drupal and how Drupal what Drupal is for and how it is used as a developer and all of this is sparked by web 3.0 which I lovingly like to call the rise of the machines so web 3.0 is about we no longer have browsers hitting our servers anymore we have a multitude of devices that we need to handle now and so you have the of course still web sites people still use the browsers but now people are using their phones we have the watches that are coming out we have III glasses even nest thermostats or your refrigerator all of these devices are now connecting to the server and our servers have to adapt to that type of traffic so if you think about it we we no longer have to cater our websites or our web systems to humans web sites were based on this notion that humans would be the ones interacting with those with a server and that's not the case anymore for every human you may actually have five devices and each device is hitting the server five times as fast as a human ever could so you have this massive concurrency issue where all these devices hitting the server and you also have to adapt the software so that they all communicate via this api's which is it's a big word nowadays this this word API application programming interface and that's kind of this common language that all these devices connect to and it's extremely relevant to Drupal in fact Drupal has made massive strides with the latest release of Drupal to address this so Drupal saw Drupal 8 solves this problem through the use of every single request and I know that those little boxes are very small but what those represent is that every single device when it sends a request to the server it attaches in the header of that request what its format it accepts and it's called the accepts header and Drupal 8 does something really clever it looks at that habit of header and it determines how it's going to respond to that device based on what that device says hey here's here's my header I accept JSON or I accept HTML and Drupal just knows how to handle it and if it's Jeff's JSON or it delivers JSON content and if it's HTML it delivers HTML content and this is this is really fantastic the way that this works in fact now we can kind of see where drupal is headed here Drupal still is this this hub if you would of all of these devices in fact Drupal kind of classifies itself as a hub you hey if you want any feature in any of these devices we have a module for that everyone everyone knows whenever you hear about Drupal all these modules that you can enable to it to add those capabilities and you probably have also seen this graphic which I think this was in Jesus keynote presentation last year where he says you know this is kind of where Drupal is headed we become this hub so if you want any type of capabilities being added to these devices all you have to do is add enable that module in Drupal and it will expose those capabilities and for example if you want to do Google Maps all you have to do is enable the Google Maps module and now suddenly you have this mapping capability for web sites but it also potentially has mapping capabilities for their devices I would like to challenge us a little bit and think about this because what I'd like to challenge us is is this the right approach should Drupal be this hub where all the done all the devices connect to Drupal and that's how they come alive and I think this challenge is what angularjs is bringing to the table for Drupal right now it's changing the paradigm on how apps are being built and not necessarily to say that this is incorrect but I would like to challenge us and just think about it Drupal does not have to be the hub anymore if you want to enable features in your applications applications now control their own destiny and in Drupal can just be a piece of the app in the app can connect to other services so just to give you an example the way that we used to do it is we used to build a Drupal website and if you wanted mapping capabilities in your website you were told to go to download the Drupal map whatever mapping module and enable it in poof you have mapping capabilities and so now people who want this type of capabilities they're now dependent on a contributor pille if I don't if you guys have been around for Drupal 7 but we had a problem in Drupal 7 where the contribute the release and we didn't have these modules in time what I'm here to tell you is that Drupal 8 can be used differently and I actually challenged us to use it differently because in order to create this mapping capabilities really all you need is you need Drupal to handle the data and you build the app to do the interface so this is what I call the web application and a web application works a lot differently you use Drupal to input the data and to manage the data and so all you really need is a text field to say what is the address that you want to enter and now Drupal becomes a REST API for the address and then you use angularjs you have a whole suite of libraries at your fingertips with angularjs so that you have control over the app and all Drupal is it becomes this back-end engine of data and it really has nothing to do with the app and to me this this is what angular purple represents to Drupal and it's the future of Drupal so all you have to do is do bower install angular Google Maps and you build your applications so that it takes that address he ends it over to the Google Maps API and it shows the map right on the page and you can do that today with your blade and so this is what I'm saying this actually might be our development strategy moving forward whenever Drupal 8 comes to market and we don't have those modules that we have previously depended on so let me ask that question again why angularjs and the reason is is because angular forces us to develop a Drupal website like a web application and I want us to start using those terms differently a lot of us have been using yeah III build web apps I'd like for us to say a web app represents this type of application structure that is completely different than a website a web site is the old legacy way where a person would hit the hit the server and the server would hand them the interface and that's a website a web application is this living thing that's on the front end and it's structured completely different and it only communicates to Drupal via restful api so in angularjs is not the only technology that's that that enables this I'd like for you guys to take a look at react fantastic front-end framework other ones are ember angular is just the one that all the cool kids are using no not really all the cool kids are using all of them but angularjs it has definitely made a lot of traction in the market and it has a massive community behind it as well so what does a modern web application look like well it looks a little something like this on the front end which is the the left side of here you can see that it really becomes the application you have angularjs html5 JavaScript CSS angular provides the ability to create templates so they call them partials so you can have all your templates reside in the front-end application it can dynamically request a template as the user is using the app so you don't have to front-load all the all the templates to them you can you can make it dynamic if you wanted to and then also local storage is becoming very important so what combined all of those three things on the front end and you can literally build a complete software application that's just a front-end solution and it only communicates to Jeru 'pl via AP is and those AP is then hit Drupal and Drupal basically serves data Drupal doesn't serve the theme in the for example in this situation you would never use the theme engine you would use it to admit it to be an administrator of your CMS which the theme engine is important for that you mean did the admin still need to be able administrate the app but from a user's perspective they're not hitting the theme this is all data driven this has also been given a label that a lot of you have probably heard of this the label that it's been given is called headless Drupal and I really believe that it represents the future of Drupal and how web applications are going to be built in the future in fact I believe this is Drupal 8 saving grace when it comes to people having these dependencies on you know you need to build an app you no longer have your your hands handcuffed to the contribu can build your app and make Drupal just be the manager of data and you can move forward with your blade today doing just that another thing that I would like to mention about headless Drupal is a lot of people are giving a lot of focus on the Drupal end of it and not much attention has been put on the angularjs and really all what I'm talking about is that the the whole paradigm is flipping instead of you enabling these contributes to add features to your website now it's becoming if you want to have comments in your website you just embed discuss you don't enable the discuss module you just use the discuss widget to embed and it basically comes alive if you want Google Maps you don't out you don't enable the Google Maps module you just use angular and pull in the map and then pull the data from Drupal and what I'm talking about is something that I'm calling these multi service applications and into me and multi service applications this is the future where the whole your world is flipping right now where you used to be very Drupal heavy and everything that you got to do had to be Drupal what I'm saying is you now have the opportunity to connect to anything from the app person affective an angular gives you this it enables you to have this ability so if you wanted to use Drupal you can but you can also connect directly to Google Maps you can direct Facebook Twitter that this the company that I'm that that I'm working for it for my o is another one of these that you can just use it as this ancillary thing in your application in Drupal no longer has to be this hub this little spoke and everything depends on it your app could just use it as a means to pull and manage content and pull in that content it also changes the way we build apps and as developers a lot of you probably remember five four or five years ago the really big thing was this term called mobile first development and what mobile first was is they were saying we got these mobile devices coming to the market now we have to build our websites so that they look good on mobile mobile websites but even then even if you are building a site that had responsive template you were still requesting the page from the server and the server was handing you a responsive website and what I'm saying is is it's now completely different the app exists on its own thing you can deploy it using Cordova you can compile it as a mobile application but it exists outside of Drupal and in Drupal you really have to focus on something else which is API first development I really feel like we are in a new phase of development where we need to start thinking API first and not mobile first I mean Mobile is just is just a part of API first but if you start thinking I want to build my API first you then really open up the door to create a multitude of apps that consume that API and the way I think mobile at API development should work is you build your rest platform first you use Drupal to construct your entities to construct your content types and you expose that via restful interface and the next step in my opinion is the most important step which is your first app should be the API test so once you have your REST API in place you can build a test to test it and guess what you don't need PHP to test it you don't need you know PHP unit I recommend using a a nodejs testing framework called super test makes it really easy think about this this isn't this is now an API engine and you can use any language you want to test the API because now that API is a black box that you can expose to other testing frameworks I personally love nodejs and super tests and so you can write your tests for the your API in that but once you have your test written you have a very deep understanding to how this API behaves and now your your test can serve as a framework for the application that you build next which is next you build your app or website only using api's I think this is the future this is this is where we need to we need to start building apps and this is where we need to start thinking about how to build apps so with all of that said what I'd like to do now is I'd like to shift my focus over to Drupal and just say okay now that we've got that this this whole methodology of building apps how do you actually do this in Drupal which is where I'm going to shift my focus next which is how do you configure Drupal for restful services and then spend probably a lot more time in angularjs for those of you who are very interested in in technology I think it's there's more value if I spend more time on angular than if I did under able to because be completely honest with you from the Drupal perspective setting up at least a read-only restful api is very easy so that's what we're gonna do next so let's let's build the future and see what that looks like so let's configure Drupal 8 for web services for those of you do not know about Drupal a Jubilate actually comes out-of-the-box with capabilities to do restful api so all you do is download Drupal core in fact everything that I'm doing in this presentation I did not enable one that's the point you don't need to you can build your app using Drupal core and to me that's just a massively powerful concept and you can build some pretty powerful applications that just use Drupal core so download Drupal core and the first thing that you're going to start to worry about is how does this server communicate to all these multitude of devices you remember whenever I when I said began at the beginning I was like the the old way Drupal did it is the server would hand over the interface which means that when you're looking at the interface you're on the domain of the server whenever you build apps as API first and the applications exist completely separately it's very common that your app is served from a CDN for example in fact I recommend that you don't need to have the Drupal server serving the app you can put it on a CD in and that way your app can be deployed all over the world and it just you just uses hits the Drupal servers but your CDN is going to be on a different domain and so therefore you need to construct your app in a way in your server in a way so that the application can communicate to that server and they call this cross-origin resource sharing is what this is called it's it's called cores for short and it's very important to understand this whenever you start building this way otherwise you're gonna get really frustrated whenever things don't work there are a PHP ways to do this but I actually recommend not using PHP to do this you can do this from the the web server level so Apache nginx you can go in and I know this is extremely small but if you guys are viewing the website over the website basically you can set up in Apache the ability to set headers for every request and so you can expose cores capability from the Apache level and from the engine X level and in my opinion this is the way to do it now because now you're not comp you're not making your app your server code complex by adding stuff that really should be server specific figurations so once you have cores set up the first thing you're going to want to do is installed your blade how many in here have actually installed Drupal eight have had it up and running okay we got we got this part right so this is easy I - I like to used rush to do it and so you can get it up and going pretty quick and you can install it locally I recommend Calla box is a great way to to get your local environment up and running the first thing that you're going to want to do is head over to the modules section and keep in mind these are not contributing to go in there and you're going to enable all of the web services modules so how HTTP basic authentication restful Web Services and this thing called serialization which does all the JSON outputs so once you're done doing that we now if tower focus over to using content types as resources now I think this is kind of where Drupal still kind of stuck in in you know web 2.0 days by calling on the content types but you can you can use content types to create these objects that the rest api is going to end up exposing via restful restful services so the application that I'm building I have a I have a multimedia background so I have this tendency to do everything with multimedia I'm gonna create this movie app that allows you to create multiple movies and show YouTube videos and alike so I'm gonna go create a content type I'm going to call it movie and that's the URL that you go to to do that and here's here's where a great illustration of what I'm talking about whenever I say you don't need contribu cool stuff if you want YouTube integration YouTube has embed links and that's just a URL to the embed link and YouTube exposes these widgets that you can embed those widgets in your front-end application so if you just want to do YouTube videos you just make it a you'll type of link it's a URL and that's your data input I'm not you notice I didn't install a media module I didn't install media front I mean you really don't you don't really need that yet so you have this YouTube URL and you're basically adding it as a link and then you now have essentially the data structure that you need to build to use Drupal as the backend for your application the next thing that we're going to do is we're gonna go over to views module now views as part of core but views also has this incredible ability to expose restful api is from a get perspective if you want to just have an app that consumes data and views is really good for this and so what we're gonna do is now that we have a content type it's just as easy as going into the views module creating a movies view and then down there because I enabled those rest modules so the views module now exposes this this new section called rest export settings that allows me to put a path a rest path to get at those movies and so when I do that it actually kind of looks something like this so I've got my structure here and I'm gonna go to my views and let's see worst movies there it is right there and I've and really it took me just a just a minute to set this up and what this does is it now exposes a URL that when I hit it it's a complete REST API and it's a list of it and you also have the ability to use views to do all your filtering so if you wanted some complex search capabilities within your application you can setup those as parameters within view to filter the content so your app just uses views as its data source it's a really powerful concept and also once you create one view to do a list of all of them oh yeah you want to make sure that in the format settings you enable these request formats to accept hal and json and i can actually show you where that israel quick it really won't take very long when you create your view you'll notice it has a serializer format if you just click on that serializer format it comes up with the style options and that's where you'll actually configure your request formats so once we've done that the next thing that we're going to do is we're gonna create the single movie page so now we have a URL at movie and the reason why I didn't go movies is because rest kind of has this thing where you use one you use one term and if you don't put anything after it it's the index right it's the index of all of them and so I didn't want my individual page to be movies and then the ID I just like movie so I so here we're gonna create a single page by going up to the add button over there on the rest and it's just gonna be another rest export and then we want to make sure we change the path to ford slash movie ford slash in this ampersand sign and what that ampersand sign does that's not an ampersand it's a % and what the % does is it is it tells the view that there's going to be an argument coming in at this location and so take that as an argument and so that whenever you're configuring your view you can use those arguments to do filtering which is what I'm doing over here in the Advanced section I have this thing called contextual filters and I'm adding the content UUID to the input now you-you-you-you IDs are very important for rest api s and the reason why you want to use a UUID and not a note ID is because as you deploy this onto multiple servers and you do imports and all of that into your multiple staging environments the note the the actual database IDs can change and because this is now our rest api and you're going to be using you're gonna be writing tests around this you want to make sure that you you keep that UUID because that won't change depending on what what deployment this goes out to if anyway you guys want to see what that actually looks like so here's the rest export and it's going to it's going to be I think you guys get the point I'm not gonna go Bill O'Reilly on you guys tonight do it live if any of you guys didn't get that joke so yeah you create the inn so now at that point your API is live and and we can actually look and see what this API looks like and it's where we won't I guess my server's not working it's a good thing that I I've got it all down so anyway you actually have the ability to to go to movie but then I can also that's the name of the view let me just see if my view works yeah it doesn't you get the point so at movie you see the listing of all the views but I could actually copy this UUID that's right here copy it and put it right next to it and then I would have that single movie resource being that shows up and so now you essentially have a REST API on the get to get side of things some of you guys were probably also wondering okay what about creating content what about you know logging in authentication just for times sake I'm not going to be able to get into that but by default Drupal does handle user authentication via REST API so any of the URLs that you want to like do user login those things are already exposed another thing I will let you know is that things are still changing in Drupal 8 in fact they've recently made some changes to how the rest the rest settings work it was like an XML file where you can expose certain certain verbs on different content so just keep your eyes peeled in the near future because I think that's going to solidify here pretty soon and I will very very happily come out with another tutorial on doing login content creation and all of that but I one thing that I will like to mention is that when you build apps this way you still have the Drupal interface to do the administration in the content management your app can basically be built as a user consumption side in it you may not need to have them create content or login or whatnot but if you do it you can do that as well so now that we have an API let's actually shift our focus over to angularjs and say ok now that we've done that it won't take you very long to set that up let's actually build the angularjs client and see what that looks like in order to get started I highly recommend there's a thing called scaffolding and scaffolding this yeoman scaffolding tool will very quickly bootstrap your angularjs application and get you up and running pretty quick so all you have to do is just type one command and it basically gives you all the structure you need for your angularjs application and the way that works is I'm gonna make a directory for my drupal app and keep in mind this is not my drupal directory this this is local on my machine I don't have to do any folders inside my Drupal folders the app is completely separate that's the whole point I'm not in the theme folder here this is this is just locally on my machine I change directories into that and then I type NPM installed - geo and so you will need nodejs installed here so and nodejs is fairly easy to install if you just go to node.js org you can download it and it'll install node on your computer and then you have at your fingertips a whole whole amount of Awesomeness because note is amazing so you're gonna type yo and then after that you're gonna type NPM install - G generator angular and this is one that's maintained by the yeoman team and then all you have to do at that point is type yo angular and what yeoman does is it ash it starts off by asking you some questions it says you know would you like to use sass so this has all of the sass capabilities built into it would you like to use bootstrap I think there's other there's other CSS frameworks available for angular yeoman I think there's one for foundation there's probably some other ones and then it asks you hey what package would you like to include in my opinion this is the future of probably about 60% of Drupal modules on contribute now 60% of Drupal modules are modules that facilitate app building and like the actual interface and really angular the angular community has a an amazing amount of support for all types of application things that you can enable by default it's going to ask you to do like animate cookies resource message route but there's there's plenty of others and after that we're going to now we have this application in fact I can show you what it looks like so the application that it builds looks it gives you an app folder and inside there it gives you a ton of stuff that it builds for you it gives you grunt capabilities where it does like auto compilation it gives you a power support so you can easily install new modules into your app and it puts and it also does building of your applications so that before you push this to your CDN if you want to do like some type of pre compilation for cache busting or any of those types of things it has all of that built in and so now it builds this dist folder so you can easily push this app to the CDN and you've basically done deployments another thing that that a lot of you probably don't realize is when you build apps this way your app is really decoupled from the deployment of Drupal so that whenever you want to roll out new features you don't necessarily have to get in and tinker with Drupal you can if you want to add new fields or whatnot you can tinker with it but your app deployments becomes so much simpler you don't have a server anymore this is not a database all you're doing is deploying an app to a CD in and then people then can use the CDN to request the the resources so another thing the the the library that I added to github has this folder in there if you guys want to go to github and look while I'm talking about its the app folder inside of it so the first thing we're gonna do is we're gonna once yeoman builds us our scaffolding we're gonna open up the app scripts Apfel Apfel and we're just gonna add our base URL of where we want to point where we want to make our calls to our Drupal server so this can be a remote server but we have the ability to set it I like to do this just so that we don't have to retype this everywhere within the application you can also make this part of the build process and I have some ways of doing that if you guys are interested so you can just create a single config J's file that can be loaded depending on what if you're doing a dev deployment or if you're doing a staging deployment you can just include a different config file from there we we're gonna use yeoman to actually generate routes within our application and so yeoman is really cool because it it allows you to do routing within the application but it is a single page framework or a single page application so if you guys don't know what a single page application is really all you're doing is loading the index.html and every route that you go to just dynamically loes the content within that single page and that's that's a much different paradigm shift than what you guys are probably used to where the pages are different based on requests angular basically says here's our page and I'm gonna load whatever content we want inside of it so we can provide routes and we can use yeoman to be our friend here by just typing a single command that says yo angular route movies and what yeoman does is it builds the route it gives you the HTML page and it does it hooks all of that up for you so here's what it actually looks like inside of our app file it will actually create a controller for us called movies j/s provides some of the scaffolding behind it but then it also creates this movie's view so in angular you have this do this separation between the the the theme that the templates how I mentioned that you have front-end templates now and the actual controllers that control it and each template only contains the the content that you need within that template and these are front-end templates these are not rendered on the server these are rendered in the browser which is that's when you're first getting used to angular that's what that will throw you for a loop because it's very different than the way you guys are probably used to and then the movies controller is responsible for all of the data I might be getting a little bit ahead of myself but I wanted to make sure that you guys see how all of that is structured and how that relates to one another there is a single index.html file this is the single page in the single page application and so here you you don't need to learn templating languages I mean you do have to learn some things in angular that are template to e but this is HTML if you guys know HTML CSS you can build a web app in angular and so this this here we're basically using these these special tags with an angular called ng anytime you see ng in front of it an element that means this is a special angular directive and the way angular works is it attaches this custom functionality on to these these tags and so here I have the ability to change my navigation where I have a I'm going to assign a class based on if this is the active route or not so inside the app index to HTML if I want to add that that tab to the page I add it in HTML I'm not going to the menus section in Drupal anymore I'm not going and saying I need to expose a menu tab I you just add it to the HTML so it for people who are used to Drupal this is this is a very different concept but once you experience it you're gonna feel free to just do what you want within the app and it's it's a wonderful feeling and then within the movies control or all I want to make sure I do is I want to make I set this route scope variable which exposes variables at the root level and I want to make sure that whenever I click on the movies tab that it actually sets that tab as active and that's what the ng class does so these ng directives really expose custom logic to these angular controllers and so the way that you do that and then it executes those controllers so now this is how you create a table listing of the movies you can just create a table with in the movies HTML and you can give it a title video and then you're gonna use this thing called ng repeat and ng repeat allows you to iterate over an array that's exposed within the controller and this is kind of where I think people's minds are gonna blow get blown a little bit so ng-repeat basically looks at variables JavaScript variables and the variable that it's looking at is this movies variable in that movies variable and I'll show you where this is defined it's set within the scope of the controller and it iterates over each one of them and assigns a variable called movie and then at that point you decide what you want each row to look like so here I have an anchor tag and I'm using ng H ref which actually uses angular's single page routing so it feels like it's multi-page but it's really not and here you see I'm actually I've actually got Drupal data at this point and this Drupal data correlates to the JSON object that I get back from Drupal and so that tells me that it's UUID Drupal has this thing where it kind of adds everything in an array which is kind of little squirrely in my opinion but you can get around it by just referencing that value and then obviously the title goes here and then your movie your YouTube URI looks like that the next thing that we need to do is shift our focus over to the troller so angularjs has this concept of controllers and views and controllers expose functionality to the views and so this is inside controllers movie is where I set the active nav to movies but then I defined this movies variable on the scope and what that does so this scope variable is a special variable and angular that says anything you assign to this scope is going to be exposed inside the template okay so whenever I say scope dot movies I am now assigning a variable that I know I need inside my template so that's how that works it's angular is all about scope and you know you create these widgets that have control over the Dom that that those widgets represent so then what we're gonna do is we're gonna pull in this thing called HTTP this is a special angularjs library that you can pass dependency inject into angularjs I probably should spend a little bit of time talking about dependency injection and the way angularjs works is is when you build a controller you tell it whenever you declare the function for the controller what do I need angular to hand me so that I can use and then angular just knows that it's supposed to handle the HTTP you will also see another format in angular where this is a an array and each one of these is a string within the array and then it passes the function into the end and then the functions the last element in the array I actually recommend that way than the way you see here the reason why I did it this way is just because it's more Retta Bowl but just know that whenever you're building these controllers you need to look at and to read some documentation because they'll show you this notation where you add it as an array and in each of each of the dependencies is a string and that will work whenever you do compression this will break when you run this through a compression algorithm just FYI so now once I have this HTTP variable I can use it just like I use jQuery AJAX if you guys are familiar with that so I go HTTP GET I pass my base URL and then this is the Drupal movie endpoint and what that does is then I declare this success callback and then the result is assigned to that movies array so when you do that your page will then come alive and show all of the content from that Drupal view and it looks something like this and just for the sake of time just take my word for it that's what it looks like and I also don't think it's gonna work because something something happened to the server I think so the next thing we're gonna want to do is we're gonna want to create a movie page and for that we're gonna go right back to angular yeoman and use this angular route movie view and say I want that movie view to execute at this URL within the angular app and when I say URL what it really is is it uses this hash hash sign it uses this this the the hash tag at the very front of it and so that whenever I actually navigate to something you'll notice that I navigated to hash tag movies but really what this is doing is this is sending a command to angular so it works like a bookmark but it's not it's telling angular here's the route that you need to execute and then whenever I click on any one of these you'll see that I add the the ID to the end of it and suddenly we we have a working app and I definitely got ahead of myself because you guys just saw the punchline forget you just all that so you are iMovie for /id basically says that's the UUID that i want to pass to it and my movie view will just look like this it's HTML I want to make sure I show the title for the body content Drupal likes to hand you HTML and a string and says okay here's the body of it but angular is okay with that what you have to use is the directive called ng bind HTML and you attach that to a page and then you pass in the variable and then there's one other really important thing here Drupal angular will get really angry with you if you try to do unsanitized HTML strings but because we know Drupal is managing the content for us we can assume from the app level that that's it's it's okay to render and we do that oh this is what our controller looks like for a movie ad we basically create a movie object and we do a get to that state parameter so whenever they whenever they see that URL angular does the same thing that views does where it takes that I takes that variable and it basically signs it there and then your gonna sign this movie object to the result and here's what that filter looks like you do have to create it yourself I created mine in the scripts app.js file and you just make sure that you use this special SCE I don't know what that stands for and SCE allows you to trust a string as HTML and so anytime somebody uses the filter safe on a string it knows to apply that filter and this is how you use it you you you take the value of the of the body and use this what is pipeline and you pipe it to the filter the name of the filter and it just knows that that's how it's supposed to execute so now because this is where it gets a little interesting we're not installing the YouTube module here but we can use angular to create a really cool tag called YouTube tag that basically creates a YouTube player on our page and that when angular has a thing called directives that allows us to do this so our directive looks like this we want to say that if they use the bracket YouTube we're gonna use a this template the views YouTube we need to create another filter because we're giving it a URL that's a that's outside of the domain so we have to make sure that we trust that URL as a URL and so now here what our actual YouTube template looks like I got this from YouTube's embed page on their API you just go there and they say here's how you embed a video and you'll notice all I'm doing is I'm passing in the source this source variable is exposed from the directive so basically what I'm trying to do and you'll see how I use it here in a little bit it looks like this now so now inside my movie view I can use this YouTube HTML element and give it a source of the YouTube URI I'm just gonna throw this out there that that's that's a pretty powerful concept here it's also the concept that we at form IO did with forms so that you can just hook a form up and provide a source tag and it knows how to do all the IO so this whole concept is a very very powerful thing that you can add to your apps and once you do that you get essentially a full working application that only uses Drupal as the RESTful API back-end and it looks something like this so you basically have this I can I couldn't you notice here's it's actually rendering the the body of the the tags and this is a YouTube video and all of this was built completely separate and outside of Drupal all I did was use Drupal as my database as my data repository and you can easily do this with maps as well that's it guys thank you so much I think I think we do have five minutes for questions if anybody wants to ask questions yep could you talk a bit about the rest based authentication that's coming out in Drupal 8 or what's already there like token-based are so right now there's basic authentication that's that's exposed so using the authorize header that you can use I I would love to see JSON web tokens get created because in my opinion that's where we probably should be moving with authentication in Drupal that has not been built yet but you can also when you install Drupal core you have user forward slash login that you can use you just have to provide the form ID in the post and that will authenticate and use this cookie based authentication the way that Drupal 7 does right thanks you're welcome so alongside angular and other front-end frameworks has been the rise of like node and Express and even go on the server side yep and you see those a lot in really interactive applications and they have the advantage of being extremely fast where PHP is not how do you see in the future Drupal playing in that ecosystem with node and go so what I love about API is is that it also allows interoperability between multiple services and so I really see Drupal's place being in content management and all of the things around content management and content workflows all of the other stuff that an application would need I in my opinion I fully bit the hook on node I'll tell you that right now I do most of my development in node so I know exactly what you're saying it's it is as amazing framework but how they're probably going to end up playing together is there's probably gonna be a lot of connector technology where you can actually build like a Drupal connector for node and then you can actually map like mongooses is a MongoDB librarian nodejs and it's schema based and that schema looks very familiar to entity and so what all you really need is in fact I think this is coming is people are gonna start creating libraries that Maps like a mongoose schema to a drupal entity and so that whenever things are happening over here you have web hooks or you have WebSocket communication to synchronize some of the data in and out of Drupal so that people can use it to manage the content but as far as the actual real-time run runtime of the application you can do so with using no DJ s that's that's what I see is coming down the pipe is your way to do push state those hash signs in the URL at the box angular to change that hash with like the history push state method talk to that guy thank you if there is I haven't seen it but that you you know about it html5 mode very interesting okay thank you yeah there you go so and thank you secondly I still don't get how you're overcoming the cross origin policy it's the server that's serving the this angular app reverse proxying your views are pcs that's a complicated question is it reverse proxying maybe I didn't understand what you're asking so this app that you made right now it's accessing a Drupal 8 in the back you could be on a separate IP address separate domain so when the request comes from the browser does it come through the node GS and then gets reversed proxy over to keep it no it hits it hits the server separately from the browser yeah yeah the browser hits does the request to the server and the server because it's configured with cores it adds some headers that allows the browser to be okay with that request so really the the request cores is really for the clients that that will refuse it and if they have these special headers that they're basically asking the server hey is it okay that I'm doing this to you and the server is like yeah yeah do I'm all favorites from the service not really from the bootstrapped app that decides the boot the well the what the what's rendering the app is what needs course because it sees those headers and it says hey is it ok to make this resource when you push this app down from a CDN is there something that needs to go into CDN as well just say ok it's ok to access other URLs from this app that I'm throwing out so you can actually map internal URLs to a CDN so that's one way to do it ok or you can use a sub-domain to do that maps to the CDN so in those in that specific case you're not going to have the cross origin policy issue because the app even though it's being delivered by CDN it's actually gonna be look like it's on the same domain as as the so you don't have that that issue if you want to host the app somewhere else for example on a Cordova this is very important when you compile your apps for Cordova because people are actually loading the apps from within like a webview of the of the Cordova app and so in that situation the origin is going to be different and it needs to the course has to be enabled to make that communication work ok and one last question so making these things crawlable like you know by Google spiders and all those things so that's another tricky part of it do you like to make like a novel well Google Google created angular so they're they make sure that their search engine works plays very nicely with angular yeah awesome thank you so much yeah any other questions I think we I think we're almost out of time so maybe one last one last well this is a quick one the hash tag in the URL does now the the URL from the services in Drupal doesn't need to be clean obviously having that UID in there is calling this specific node not a big deal for angularjs can you do clean URLs can you do clean URL yeah like without the image tag yeah SEO friendly looking and all that I want to just give this guy the microphone he knows a lot about angle I believe so yes yeah it's the html5 mode but what they're in they are cleaner would you define what you want the URLs to look like an angular so yes let's do yeah let's do it let's let's see we can get through these three real quick yeah go ahead the course thing gets rid of like like JSON piece the thing is shouldn't somebody do I look I've looked at the restful api like in Drupal 7 and there's nothing just like set those so maybe a module so if you're using Drupal 7 you should be looking at the services Molly mmm I'm just working at that right now but in Drupal 8 should there be a module like this to help people set the server there's the rest UI module and there's a course module course module in Drupal 8 yeah okay then it's getting along because the last time I installed a and that's that's a PHP method of doing it so if you don't want to if you don't want to dink with your server configurations yeah enable the course module okay thank you great session so this this was a great example of a very simple use case so if you have a home page with a lot of dynamic areas and then you go to another subsection with a billion other dynamic areas yep each page load is gonna be loading ten rest calls is that how it should work or should you be doing one rest call so you you could you could base on how you structure it in Drupal you could probably set up a rest call that that combines a bunch of data and then from the app perspective it can then take that one rest call and distribute it out to where it needs to be on the content regions that's one way to do it but yes it's gonna it's gonna increase your your load as from a rest perspective on the servers but you have control over that as you build the app and as you configure the backend so I'm a front-end developer and I've found that probably five to ten percent of my time is you know creating templates modifying templates and probably 90 to 95 percent of my time is CSS and jQuery and that sort of thing and it seems to me this is new to me there's a lot of like writing format handlers here so in like a time-to-market how would you compare creating through you know like what we do in seven versus creating a theme in eight using angular so creating a theme so this this is where this was where I'm my opinionation I'm gonna be a little opinionated here creating a theme in Drupal for angular in my opinion does not make much sense just because I think you're basically telling Drupal to to try and create a theme that works like an old old way an old theme when really the theme is a single page application and so from a to answer try and answer your question you said how from a speed perspective how much faster is this angular has a learning curve that you have to get over there's a lot of facets to it and but once you get over that learning curve of angular it you you get it you can get you can spin up apps very quickly and and you're not locked into the theme system it's kind of my point you you don't have to create a theme anymore for your user apps you just used to use yeoman and let yeoman do build your front-end app and then build your services on the backend so in my opinion if you want to use angularjs it doesn't make much sense to build a theme for it that's my opinion some other people may have some other opinions I think I think we definitely have to get out of here so why don't I why don't you come and talk to me afterwards thing yeah thank you guys

Channel: Drupal Association

Views: 10,134

Rating: 5 out of 5

Keywords: drupalcon, Los, Angeles, Califorinia, 2015, drupal

Id: 0ARnhwcI74g

Length: 63min 7sec (3787 seconds)

Published: Thu May 14 2015