 Rwyf meddwl, Mr Colew. YouTuber i mewn. Mae'r parw executing. Rwyf meddwl. Mae'r parw executing yn siŵr ychydig iawn. Rwyf meddwl, gwahanol. Rwyf meddwl, rwyf meddwl. Mae'r pethau sy'n ymgynghwyl ar hyn o'r cystafl? Mae'r pethau sy'n mynd ymgynghwyl ar y cael i'r pethau. Mae'r pethau sy'n ymgynghwyl ar hyn. Anyone has any managers out there? Anyone got it in production at the moment? Any react developers out there... I'm just gonna come to air call. Okay. Well this is a talk on building the front end with Anglia J.S. My name is John O'Neil, I'll lead developer at Deeson where digital yma yng nghymru sy'n gynhyrch yn cantybwr i'r UK. Mae'n rhaid i'r modd y dyfodol yn y dyfodol yn yr unig a rwy'n ddych chi'n gweithio'n rwy'n gweithio'n gweithio'n gweithio, ond yw'n gweithio'n ddadfodol efallai, hefyd. Mae ymddi'r newidion drwpl yn ymddir iawn, ac mae'r twyrdd yma'r gweithio'n gweithio'n gweithio'n gweithio. Felly, dwi'n gweithio'n gweithio'n gweithio'n gweithio'n gweithio yma, We have been using it at decent for about a year now in a variety of settings, about a year ago when we were looking at why are we going to go about picking a front end framework like this... the reasons we were going out there to choose a front end framework were that we were feeling limited in some ways in the way that differential handled the front end yn hyn i cymryd yn ymaboutadau ystod cyfnodd o ran hyn iawn. Mae'r arddun enthwys. Mae'n ceisio lle iddyn nhw'n mynd i, oedd hynny'n cymryd gyda'i'r fanluniaeth across-experience. Mae'r byd yn cael y teimlo i ddryig yn gyfrifio ar gyhoedd o'r union a llwyddo i wedi'i bryd nifr criminal. Mae ymweld iddyn nhw'n cwilio i fodwn iddynt fel teimlaen a'r byd yn creu ond mae'r unledion gwir. Mae'r unledion gwir eistedd o'i brwyllfa. AngularJS is supported by Google, and it's a front-end framework, so a front-end framework basically means that you're getting quite a lot of structure and rigor to your JavaScript application and also it's providing an awful lot of add-on extras as well, a lot of modules and things like this. So I won't go into why you might want to use a front-end framework too much because Dries covered it in his keynotes, but effectively what we're doing is in the traditional model the user is at their computer or their device and they make a request to the web server, Drupal picks that up, interprets the request, it pulls in all the data that it needs to handle that request and then it themes the output and returns to the user, the full user interface to the browser. So the user is receiving from Drupal the fully themed HTML interface and there might be some elements of interactivity in there, you might include some JavaScript in what comes back that manipulate the page, but essentially it's Drupal doing most of the layout, most of the theming for you and not the, and so you're using Drupal in order to do that theme. So the way we were thinking about it was that Drupal is providing, I mean Drupal is many things, but it's providing two things to our end users, which is it is a content management system, so it's for the administrators, it's the system by which they enter the content into the system and then it stores and manages that content, but it's also doing a secondary job, which is that it's the website delivery tool as well, so for our client's end users it's providing them the actual interface and the view of their website and the data and the content that they've entered into it. I suggest that Drupal does one of those jobs really well, which is the content management system, the website delivery tool, particularly with Drupal 7 and where we're at the moment, we, like I said before, we were in a finding a need for something that was allowing us to do more than what comes out of the box. So just to highlight the point a bit further, so when you're creating a content type within Drupal and you're adding your fields to it, what you're doing is three things essentially, so in creating your content type in your fields, you're creating your data container, your data model in the database and that's great, so you create your content type and you add your fields to it and you get all your database tables and that's where all your data's going to get stored. But at the same time as doing that, then you're also creating the administrator form, the form that the user's going to be in, that's where you're selecting your widgets on your fields and you've now got the interface by which the administrator can enter content into the system. And then of course you're doing the third thing as well, which is providing a rendered display of the content that's actually going to go out there. And the first two jobs, you click around the interface, you've very quickly got your data model and your user form for your administrators and then you have to spend quite a bit of time getting your display right in the theming layer. So AngularJS then takes over as an option to take over that theming layer for you if you're going to use that within your Drupal website. And there's several different models for this and Dries touched on them during his keynote. What I'm going to talk about later when I do this demonstration, how you get started with AngularJS, I'm going to be looking at the fully decoupled model. It has a lot of advantages and a lot of disadvantages as has been covered elsewhere. But in this, in the fully decoupled model, decoupled in English decoupled means there's no connection between them, what it really is is loosely coupled. So you're loosely coupling your front end from your back end, whereas before the front end was quite integrated into the Drupal site and it was possible to do SQL queries within the theming layer and this kind of thing, by separating out and having your AngularJS application as a completely separate application. Then you're loosely coupling from the front end to the back end and now you've got something in between which is your API. So your back end needs to provide the data to the front end in a known format and it will do this through these things called APIs. And you'll need to design an API that makes sense for your front end to be able to connect to it. And we'll look at it in more detail later when I go through the example. The other model, the other way of using it is that you let Drupal do some of the theming and this is what we've done with a number of our clients where Drupal is providing the header and the footer of the page and the menu and it's doing things like the menu routing and then embedded within the page is our Angular application which is then the rich interface. So for example, on a search page we might have the header and the footer in the menu and then in the centre of the page is our actual search tool. And this one is kind of a progressive model and this allows a sort of a hybrid of both the AngularJS and the Drupal application and it's kind of the best of both worlds. A number of talks on this subject before have always talked about Drupal, the AngularJS application talking directly to Drupal and then you have to think about how you're going to scale your Drupal instance if perhaps you're going to be opening up that API to other tools than just your website. So as an alternative model and this is what we're using, that your administrators might be populating content within Drupal but then Drupal is using something like the search API module to then index that content out to some other service which provides a better API and faster integration to external services such as your AngularJS application. So in this instance here we're putting our data out of Drupal and then we're indexing it into a search appliance so perhaps it's Solar or Elasticsearch and Elasticsearch is particularly good because it's already got an API you can then interact with with your AngularJS application. So if you're a business owner or you're a technologist and you're looking at evaluating these tools and you're thinking about making a choice to start using a front-end framework and why would you pick AngularJS? So there are a number of frameworks out there and they're all quite similar and they have different pros and cons between them but the reason we went with AngularJS a year ago was that it's supported by Google and Google put a lot of investment into it. So it's not going anywhere. It's got a very large developer community as well. So in the last year that we've used it, any problems we've come up with or anything that we're unsure how to implement, it's quite easy to put your question into Google and someone will have had that problem somewhere before it would have been blogged about there will be questions on stack exchanges that have been answered. So you get a lot of support with AngularJS and there's a lot of people using it and also there's a large number of add-on modules as well. So for a lot of the problems that you'll have, you'll find that somebody else has already solved them in the form of a module. There's ngmodules.org lists them and you'll be able to find them on the internet for most of the things that you'll be doing. One of the reasons for using any front-end framework is that you're going to be producing yourself a more robust and cleaner code base. This was one of the reasons we were looking to select it. The JavaScript was starting to get quite untidy. It was mixed in amongst the PHP and the rest of the code base within Drupal. By separating out, we've now got a much cleaner code base and using something like AngularJS, you've got a known recipe for laying out your files, laying out the way that everything's going to be working and it's got all of these good, rich, the rich vocabulary of things that come with it. If any of you've used, looked at symphony already, then you'll recognise terms like dependency injection, like services. These are all things you'd expect out of a modern software framework, not just a web framework but a software framework. These are the kind of tools you'll now be expecting and this is the reason for using a front-end framework is that you get dependency injection. You can create services, you can create your usable code and you can use plug-in modules as well. Before you begin on developing your AngularJS application, there's an awful lot of front-end technologies that you'll need to get familiar with as well. There's an awful lot of things that exist around to support you as a developer, a lot of tools, a lot of tooling, a lot of toolchain stuff that exists that you need to at least know what it is and we'll go through each of these things. One of the first things you'll end up installing is Node and NPM. Node is a thing for executing JavaScript on the server and it's often used as a web server itself. For local development, the scripts that I'll show you later, and the examples I'll show you later, you can run Node on your local environment and it will serve your application for you automatically. NPM is a package manager for Node, so if you need to bring in any dependencies for Node, NPM is the tool that you'll be using. If you're getting started with this, then the first things you'll be doing is installing Node and NPM. There's some links up there but you can usually install them from your operating system package managers and then you just check that Node's running with Node-V command. You'll also need a JavaScript package manager. A Bower is a popular choice and what the JavaScript package manager does, and this is a bit like Composer for PHP but for your JavaScript front-end application, so you can pull in dependencies. If you require other libraries, then you can use Bower to pull those in and we'll see how that works later. Bower gets installed globally onto a system using NPM install minus G Bower, so once you've got NPM installed, you can just pull that in. The next thing you'll be wanting to look at is using a task runner. There's several choices for these. I suggest start with Grunt but Gulp is getting a lot of interest and there's Broccoli as well, which is a newer one but as you start to get into front-end frameworks, these sort of things start to make more sense as you use them more and understand what they are. A task runner basically allows you to create and contain scripts which do particular tasks. An example of a task might be a test task and then you can create a thing that tells the system how to run the tests on your application. The reason you do this and then you save that with your code base is that the next developer that checks out your code, when they look at it, they can see there's a test task already, they can just run the test task and it will just automatically run the test, so they don't need to know how your particular project is configured, they can just run the tests and understand how that works. Another kind of task you might do is it's kind of a build or deployment task, so it just automates a lot of the the Grunt work that you would have to do to when you're building your applications. The next tool is a scaffolding tool. Yeoman is a popular choice and there are others but Yeoman's one we'll be looking at. A scaffolding tool takes away a lot of the work for building your application to start with, so as it describes a scaffolding tool. So install it with that command and what you'll do is that people will have created recipes out there for a particular type of project, so if you and we'll have a look at one later that's particularly good for angular projects, but it will build up your application from the start, so starting with nothing you start with a Yeoman script and and say yeah I'd like to use Bootstrap and I want to use these libraries and defenses and it will start building that up for you. The other things you'll need to get familiar with are testing frameworks. So Karma is the one that comes with the Angular and Angular puts a lot of effort into making this work and this is a full end to end test framework. Other frameworks are obviously available and we use BeHat for most of our work just because we already know what BeHat is but Karma is the one that's particularly used for AngularJS applications. Okay so I'm going to go through now some of the steps that you go through just to actually start off building your Angular application with Drupal 8. So as an example what we're going to use is the views module and the restful web services module and the views module, we all know what that does, it provides a listing of content on your system and the restful web services module provides a way of serialising that so that what you get out of that listing view from views is a pure JSON output so this is the actual development of an API and this is quite a simple example of how this might work but I'll now go through the steps involved in that. So once you've got your Drupal website set up inside of your structure so just to give you an idea of what we're doing here so what I'm going to build is a blogging platform and so we're going to have the administrator logs into Drupal and write to their blogs the end users, oh dear, the end users come into the end users are going to use an Angular application to actually view the view the blogs okay so if we have a look inside our content types you can see I've created a blog content type already and if we have a look at the fields it's just got a single field which is the body field and then obviously it's got the title to go with it as well and then under structure and then views I've created a viewer slash blog if we have a quick look at this okay so um so the type of view that this is the display is a rest export so this is provided by the um excuse me this is provided by the restful web services module so there's a new display type called the rest export um so this is what this is um the format is serialiser there and we've got a choice as to how we show the data um so this can be um you know the full rendered entity or you can be very specific and decide which fields you're going to want to show so I've chosen to show the fields because I want to have quite a bit of control over what the data goes out of the system um so here we can see what kind of fields I've selected so there's a title field uuid to uniquely identify the content um body field which is going to be the the raw htl that people have entered in the admins entered into the system um I've also provided the the path alias and also the machine name which is going to be blog post um and we'll see why I've done that later um I've also provided a contextual filter um so if we put slash blog slash and then a uuid we're going to get just a specific blog back again um so to see what that now looks like I'll go to those paths so if I go to slash blog now I'm going to get raw jason returned which is all the all of the blog posts on the system but just the data and if I take a specific uuid and apply it at the end then I just get the one blog post return now which matches that uuid okay so after all that we're now ready to start the front end development now um so the first thing you might do is is to scaffold your app so um the last tool we looked at there was the scaffolding tool um so we're going to be using yeoman for this um and there are pre pre made recipes out there for starting your angular app development so if you've never done this before this is a great place to start now so if you've followed through all the slides I've done so far and you've installed all the base dependencies at this point we run these three commands which is we're going to make a make a directory um called angular drew plates that's going to be the name of our project then we switch into the uh into that directory and then we just type yo angular and then name the project angular drew plate and press enter and yeoman will ask a couple of questions on whether we'll want to use um uh sas or um for the css and it also asks whether we're on to use bootstrap and um and these kind of things um but it's a very the very short number of questions and what you get left with um after that is um is it goes away and builds it all in it pulls all the dependencies in and you get this um project structure just seeming there um so i'll just go through the uh the the anatomy now of a of a of an angular application so this is uh remember this is completely divorced now of of our Drupal site so this is a completely separate project this is the full decoupled version um so within here we've got the app directory and this is where we're going to put all our source code so this is where all our custom code is going to be uh going to be ending up there's two other directories here which is power components and node modules these are both library directories so this is going to be this is where all those dependencies get pulled in for uh node and for bower and so node is for our our server side um the the node that's running on the server and bower are um dependencies that angular needs so this is going to be um dependencies on the web application itself um the disk folder um gets created as well so this is our source code lives in slash app uh slash app but when we want to actually release our code to um to production then we'll compile it so and I'm compiling in the in the front end terms means that's we're going to take all the JavaScript files calculate them all together and minify them um sas we're going to turn into CSS and minify that um and there's a whole bunch of other things you can do in terms of like making the um html smaller and and rebuilding things so what all of those tasks are looked after uh are looked after for us automatically by um by the grunt runner and we'll have a look at that moment so the other um the other folder of note is the test folder so your test should live with the rest of your code base um so any test you write should exist inside here as well so if we write in karma tests um they'll exist inside the test folder so the other file of interest is the grunt.js file this got created for us automatically by the yeoman recipe um I haven't had to modify this at all it's just there um and inside this it defines several tasks several things that can um that can be done on the system um that can be done within the project now if you're using um a an id like um web storm or a php storm um they it's grunt aware and it can see that there's a grunt file within it so I get within my id um a little panel which tells me what tasks grunt is going to be providing as part of this project so if this is the first time I've downloaded this project um I'm just about to start work on it as a developer um someone's already gone gone to the trouble of setting me up a build task which is the thing that if I double click this it will create that disk folder it will minify all my um job script and css um and produce me my production um my production product so I don't need to know what the steps are in order to do that someone's already put the effort in to do it and in fact I haven't even had to do that this time as well because this was provided for me by the yeoman recipe that I used to actually scaffold the app in the first place um some of the other tasks in here are the test tasks so like I was talking about before if I double click this it will run all the tests on the system and tell me whether um whether whether it's compliant with all the tests uh and the last one which of interest is the the serve one and if I run this one now what this does is it does all the work that's required um to uh to run the node server and it automatically fires up the web browser so so far I've run three commands after I've installed um if you've got the system set up correctly so far I've just run the three commands and two of those was just creating the directory and moving into it um the third one was running the yeoman application to to build the application from from the yeoman recipe uh and then I've just come into my id double clicked serve um we're ready to go we've got an application uh built and uh built and ready um and if we look down here as well you can see it says it's waiting so um it's also got live reload built into it so it's out there waiting to see it's it's maybe if I'm going to make any edits to my code base and then it'll automatically reload it so if I just move this around just to show you what that looks like um so we're going to my app directory which is where my source code's contained uh and I'm just going to make a modification to the home page and then I'll just save that file and then automatically the page is live reloaded so um these kind of things are really powerful if you're working if you haven't worked with with this before I mean there are modules for this within Drupal as well but um this is really good if you're a front end developer and you want to get these kind of productivity wins um this kind of stuff just comes out of the box um with with with this recipe that was provided for us by uh for yeoman um okay cool so um let's start diving into the app directory now so we can see what what what is made up of an angular application um so when it's an application on its own and not one that's embedded within another one then did they often call it a single page application and the single page is that index.html file so this is the single page of the of the single page application and if I open this up then you should see that it's full of um html so html is the templating language for AngularJS so anyone that um uh anyone that knows html should be able to get started pretty quickly with um uh the templating side of things um so if we have a look down here you can see most of the html there are a few um comments that have been added in here um as well and these are comments which are giving information to the build scripts the grunt scripts um to tell it where to uh where to do things so for example right at the bottom of the file here we have the script tags which are pulling in our dependencies so we've got dependencies on bower components there so um things like jquery angularjs itself are all being pulled in um and we've also got dependencies on things within the scripts directory so this is our own code starting with the app.js file which we'll look at in a moment um but each of these are wrapped in comments which are telling bower that this is where our dependencies have been injected and if we have a quick look inside of the disk folder so once we've built the application you'll notice those things just aren't in there because the process that um the grunt task goes through when it makes the final production version is all these things get minified down so we just have a scripts file and a vendor file so that's our custom code and our um our library code all is um a small minified files which is um which is obviously really good for the production system and also really good that you didn't have to build those yourselves it's all it all comes out the grunt task runner um so next thing though is we're building a blogging platform now so we want to show people um the blogs that have been created so we need a menu link for slash blog so this is uh this is hard coded so here we have the menu this we're inside the index html file here here's the menu we've got three menu links one of which is slash blog so we look at the page there's our slash blog end point um so so when we click on slash blog um how does angular know what to do what to render on the page um so one other thing to look at here is that you place your angular module um you tell it what its scope is within the context of the html document itself so here on the body tag we've got the ng-app directive um which is linking to our module so this is we'll see where that name comes from in a second but this is saying that our module has got um the scope of the body of the page and a little bit further down the html as well we've got a second angular directive here which is ng-view um so this is where the content of the page is going to reside an ng-view is a directive which is used by an angular module called ng-root um and based on the root the page so if we're on the home page or whether we're on the blog page or whichever page of the site we are ng-root makes the decisions to which page we are and then what code we'll need to run within the angular application in order to produce the content of the page okay so so far we've defined we've we've put our link onto slash blog now we have to tell angular what slash blog means um inside the app.js file so we're inside the scripts directory inside app.js um we define our module so there's the name of our module which you saw inside the index html file as being attached to the body so that's the scope for this module um the next thing that we we define for the module as the list of angular module dependencies so one of the dependencies here is ng-root um which is the thing that decides what to do depending on the url and then underneath this we're now going to configure our module so this is sort of the the bootstrapping phase of actually telling the module what's going on and it's worth stopping for a moment just to have a look at this this line here um this is angularjs dependency injection so there are two services well there are several services but there's two that this function we want to make use of um there's one called the root provider and one called the location provider and simply by putting these known service names is variables into that function call angular when it runs it will inject the correct service into this function so root provider is the name of the root provider service by just putting dollar root provider in there now dollar root provider is a thing that we can use um within this function um so one of the things I've done in this application here is that I've made a depending on the location provider and what I've wanted to do here um is use clean URLs um so ordinarily with angular um the out of the box you'll see URLs look a bit like this um with a hashtag inside them if you want to clean url that doesn't have the hash so we want to have slash about directly um then you need to enable html 5 mode uh and there's a couple of things you need to do you need this line in your configuration for your module um and also within the index html you need to specify the base path like this so as long as those two things are in there then you can use clean um clean URLs um the second thing that we've done within the configuration is is telling the ng root module what to do at each url so slash is the home page slash blog is going to be our blog our blog listing page and within here we've got um two main things to look at which are the template that's going to be used so that's that's what's going to be used for the content so where we saw inside of the index html there was an ng view component um we're going to use this template specified here to to lay out the content within that ng view um and we're going to use the blog controller as the thing that's going to be doing the logic and i mean creating the actual variables and the the data that we need uh for that view so if we start looking at the blog controller first um so this is the blog controller there's not much to it um so this is the blog controller there's yeah like i say there's not a lot to it um we define it for our for our modules that's the name of our module we say there is a controller and it's called the blog controller um we've got a dependency on two services one of which is dollar scope which is the global scope um what the global scope is is a place where you can place data and it makes that data available both within the controller and also within the view um so when the view is going to be interested in um the value of blogs here so we've added blogs to it which starts off as the empty array and the second service that i'm depending on is the dollar HTTP service um this is Angler's tool for making Ajax requests so um by depending on the HTTP service we can now specify our path that's the path to our API that we saw earlier so this is Drupalate providing me with a list of blogs in jason format and we just get that list of blogs and we set it to uh the value of dollar uh of blogs on dollar on the on the scope on the global scope okay so so so all the control is done is got the value it got the blogs from from Drupal and it's just shoved them on to uh a variable called blogs on the global scope now the second thing we saw in the in the router was that we were going to use a particular um template so if I now look inside of the listings um blog so this was the template that was going to be used again there's not a lot to it um so ng repeat there you see on that that that first div um this is an Angler directive and it's basically a for each loop and what we're saying is for for every blogs in blog and where does blogs come from it's on the global scope it's available to both the um uh it's available within the view it got set by the controller so for every blog that exists in in blogs we're going to loop over we're going to put a h2 on the page and we're going to put an a link on the page and the h2 is going to be the title of the blog and the the a link's going to link to um blog slash and then the uuid and so just to show you that quickly okay so this is it doing it it's done a request to Drupal we've got a list of blogs back each of those is the um the the title of the blog and then a link to its uuid version so that when we click there we now got a URL that says blog slash uuid uh how does Angler know what to do with that well it's it's exactly the same again uh within our um app.js we've specified blog slash and then that colon uuid means that there's going to be a variable um which uh which is going to be the uuid uh we've specified we're going to be using the blog post controller this time and we're going to be using a different template which is the blog post html so really quickly let's just look at that here i've defined another um another controller against my module this is the blog post controller so it does exactly almost exactly the same thing as before except this time it's it's asking for data from um including the uuid we've got a a dependency on the root parameters um service that Angler provides and we've grabbed the uuid off that service um in order to construct the path that we talked Drupal from um cool so i mean that's a kind of a very quick overview of all of the components of of the basic components of Angler and to show you how you might start building up an application i mean there's an awful lot more to it um and a lot has been said about the dangers of building an application like this because you you sort of walk away from all of the things that Drupal provides you with so um you know we're anonymous here i haven't shown you how to do a login uh login form those kind of things going to get very much more complex with this kind of um this kind of root way of doing things um also you know i hardcoded the menu there you probably want to use Drupal to to manage your menu because your admins are going to want to move things around in the menu and add things like that uh and also we've got a url which looks like this which isn't um the you know it's not the prettiest urls you think well actually i want to be able to specify my own url for for any piece of content uh i don't want to have to have a known root for every type of content within the system um so um just as an example of i've shown out there's a way of perhaps solving the um the url alias problem there so when i go to slash about um i get the about page back from Drupal um but what i haven't done is define that within my uh within my root provider here so there isn't a slash about i haven't specifically requested that so what we've said here is that this kind of this otherwise thing that comes about so if none of the roots match then we'll use a controller that's going to manage our rooting for us um so i've built a controller called the content controller um and i've created a template at view slash content so let's have a look at the content controller quickly um so the content controller is quite simple again um it's going to talk to a Drupal uh a Drupal API endpoint called slash content and it takes as an argument the path that we're currently on i'll get the path from the location uh service there which give it me on location dot path and then i'll ask Drupal okay i'm on this path what is the content that should be on this path um and then if we have a look at what that might look like um so yeah so we go to Drupal and ask it what what what what's it slash about and Drupal responds and says well it's a it's a it's a node of type page and uh here's its title here's its body here's its uu id so it's sending us the exact data back so we've let Drupal do the path aliasing um and so if we then look at the uh templating um so this is the the content HTML template so i'm here i'm using a directive called ng switch and this does as you'd expect this is a switch statement and it's looking at the value of page dot type page is the page that got returned um from Drupal and dot type is obviously it's the value of type um and there's three things that can happen so there's three cases for this switch statement uh when that value is undefined which it will be when the application first runs because Drupal hasn't responded yet then um there's there's nothing there so i've said don't do anything um if you were a designer you'd probably have some form of animated loading gif in there uh if uh Drupal responded with a not found um within my controller i just set the value of page dot type to not found and i'll just show the 404 page instead um and if um uh if it responded with a type so we've got the page type then we'll we'll dynamically load the correct template within the anger application uh for that page type um so it's quite a simplest simplistic example of the kind of things you can do but it just shows that you know some of these problems are solvable um and it depends on the complexity of the application the type of um uh type of the client that you're dealing with and what your what your needs are okay so i'll mention the clean URLs there so that's the HTML5 mode okay yeah so installing other modules so um at some point you're at this point when i think you know my app's going quite well so far you know it hasn't taken me a great deal of time to um uh get to this point um i'm now want to add some some other functionality which somebody else in the world must have solved at some point before and so perhaps you want to add an infinite scroll to that blog listing page um so we we want to be able to just keep scrolling keep seeing blogs um so you type into google um hang your js infinite scroll and this page comes up first and you have a look around at the documentation thing yep this is the kind of thing that this looks like the right thing that i want to use um and so uh what we do then is um we'll install it using using power which for my member is the package manager for um our JavaScript application um the the website gives you the instructions on what to do you type in power install engine infinite scroll uh and then you'll get uh uh then you'll get the dependency automatically downloaded um in order to use a dependency um if there's a couple of things you've then got to do um so we need to make sure that the JavaScript for that dependency is included on our in our page so down here within the script tags got to make sure that our new dependency is added so if we've just added that one as a dependency um we have to make sure that the JavaScript is included um and the second thing we've got to do is to tell angular itself that we're going to depend on a module so within our app.js file uh right at the top and we first define the module we list on dependencies um and we would add our new dependency our new infinite scroll dependency inside of that um okay so i said the thing i mentioned Drupal 7 as well because we're um we're using this with Drupal 7 um there's a couple of ways you can do the uh i mean in terms of the angular application you know it doesn't really matter what your back end is you just open the api up so within Drupal 7 there's certain um modules that exist which allow you to build those um those endpoints and the services module is is um is quite well used by a lot of people um it's got quite a lot of gooey configuration within it to get it set up um and then what you get is kind of it just opens up all all nodes on your system uh are made available um we like to be able to control that a little bit more and there are hooks for the services module so you can override um the way that it's going to send that data back and and do your own one um but i'd recommend looking at the next module down if you're um more code orientated and you want to build these things out a bit more is the restful um restful module um because that's uh that allows you to create objects which define your rest services and it allows you to be very specific about the uh the data that gets returned at your um your particular URLs um and there's also a yeoman script that's been created by the the guys at Gizra um and they've talked about this before um which is really quite interesting um this this yeoman script if you use it it builds you out everything so not just the anger application but also um it builds you out a Drupal 7 instance as well and starts adding um all the debences inside there that it thinks you're going to need for building a a Drupal plus angular headless uh decouple web application um and it also includes behat as the as the testing framework so um if you wanted to try this out with Drupal 7 and um then this is a great place to start because someone's done an awful lot of the legwork for you um in order for defining all of the things that you think you're going to need in order to run these applications uh and that's that that's kind of the end there so thanks very much for listening um I hope you've thought for any questions I think there's a mic in the centre if you want to use it I um I'd like to if you don't mind if you could go into a little more detail about how to handle uh like forms and the form api and you know user service the quiz module yeah you mentioned yourself user login could you outline just the steps uh or the challenges in handling that sort of thing uh yeah well um yeah I mean that is a subject in itself and I think you'll probably stand in for quite some time talking about those things um yeah I mean a form eight one of the reasons for picking anglin is one of the reasons we chose it as well is is because um uh the limitations of using um form api and being able to build dynamic forms um so Angler.js has within it everything you'll need to build um uh good dynamic forms um the two-way data binding that we I've really got into in this talk but allows you to connect something on the scope uh a variable within the scope to a form element on the page so that when the user interacts with the page it's manipulating the scope and then your JavaScript can can respond to what's happening to the changes that the user's making on the page um and this kind of thing is very powerful in terms of building up a data model which you'll then um for search particularly and this is the the reason we use it um if the user's made sort of 15 different choices when a search interface before they've actually done the search we can build up that data model and then and then submit that as a as a as a post request to the Drupal application um and then we'll handle that request and return the data the specific data that um needs to be returned um yeah I mean that's how we're using it um I think there's an awful lot of nuances there that we could we could spend a lot of time talking about in terms of how you would um uh how you build forms with AngularJS something that's a like I say a subject for itself but thanks for your question is there any others uh yes so um the question was um it's a it's a presentation available um I'll um I'll get the presentation online um if you follow me on uh on the the Twitter handle there I'll uh I'll tweet it um at some point today so you can you can get hold of it um I mean a lot of the presentation was um uh me clicking round in the user interface uh so um I think they put all these up online so you'll be able to watch it uh watch back through uh later any other questions knowing that Angular 2 is around the corner are you recommending people in the room to adopt Angular today or to wait for Angular 2 um so I wouldn't recommend anything to anyone but I mean we're using we're using Angular 1 um there's such a huge resort um wealth of resources out there there's an awful lot of people using it I I don't see any uh pressing need to um to wait for Angular 2 um I don't know personally quite when Angular 2 is coming but I do know there's a quite a significant change as the co-base I think it's as at least as much as Drupal 7 to Drupal 8 um so yes if you learned um Angular 1.3 1.4 now um you're going to have to relearn things later but there's so many other things I mean if you're not used a front end framework before I mean that all of the other stuff that I talked about node and grunt and gulp and the task runners automatic deployment all these things are going to be they're going to be of use every every time it's just the the nuances of the syntax for Angular itself that's going to change from from one one release to the next um so yeah I think it's definitely something you should stop thinking about getting into now and it's definitely worth looking at the uh the Angular applications Hi can you speak just a little bit to um some of the agency considerations like scoping um making sure that your staff is ready to go and that type of thing yeah exactly um that's a that's a good question so um in terms of uh how you would need to structure your team around this um I think some people have written about the dangers of of going down this approach and particularly the completely decoupled system where there's there's this thought that perhaps you'll have to um suddenly you'd split your team in half and rather than everyone being Drupal developers suddenly you've got a bunch of front end developers a bunch of back end developers and then they only talk to each other you know once it'll be three weeks at a big team meeting um I mean I don't I wouldn't recommend that as the way of structuring your projects um so the way that we work is that our project teams are composed of someone who is primarily front end someone who's primarily back end but there's a lot of um interact overlap between them and they're just two two people that would have always been in the project anyway just they were both through within Drupal um the feedback we've had from our front end developers is always that and this is very freeing for them um that they can kind of they don't need to know that the specifics are Drupal and there's an awful lot of people out there that don't know Drupal but they're very proficient in the front end frameworks um and so as an agency if you're looking at um you know particularly hiring and understand how to build your team up you can find you'll probably be able to find yourself some very good front end developers that perhaps don't know Drupal and but they will be very useful inside of a team that's composed of Drupal developers and front end developers and and this approach allows you to start separating that out um yeah John can you give uh some concrete examples of the sort of exciting things that we can do with it um ideally even showing us to at least telling us the because I mean I see what you do but I think okay well I can do that with Drupal at the moment you know the very simple examples uh yeah and it's it's as things get more complex um I mean there's you know I haven't got any specific examples to um to demonstrate today but um I mean there's there's there's plenty of examples of stuff out there but it it's where you start to turn your application when when your web application becomes more of an application and less of just a form that someone's filling in so there's an awful lot more elements that are going on so I gave the example before of um a user may have done a lot of things within the interface before you make your callback before you do your search so they might be making um selections on um you know multiple facets all at the same time that that I'm making a choice of one facet may reduce the number of facets to somewhere else and so you start to build up a data model within um within your just your front end and then you just send that directly back to the server and say well what what results does this does this provide um so I don't think that answers your question exactly but um it's it's as you it's as the complexity increases that um both the code base becomes more unmanageable if you're not using something that is more structured um and also the ability to um to do more interesting things becomes restricted if you're not using uh a front end framework or at least that's what we found okay thank you thank you uh any other questions cool okay well I guess we'll leave it there then so thanks very much