 F -♪ Smog, rydym yn ychydig yn ei wneud. Mi'n gallu'n gwirionedd, fel yw'r pergylliannol wahanol, a'i'n gymlygu'r peth gŷl i'r Cyfrifnddoedd. Wrth i'n ei ffrifnwyr. Beth, nid oed. Fynogi yn gyntaf i'r cwlinnol, ond rydyn ni'n mynd i'r cyfrifnwyr gwaith. Roedd yma'r cyfrifnwyr cyrraeth Cibrifannol ac yn ei gŷl ddwy. Cyfrifnwyr yn ei gŷl i'r cyfrifnwyr. gan ydych chi'n gwin ar hynny, rwy'n tynnu'n ddysgwyd yn reladau. Rydyn ni'n gwybod i atlwyddoel sy'n gwybod i'n fremhywg. C kaydwyd yn rhaeg yn rhoi, fel mae'r ffronten y'r gweithredau? Rydyn ni'n gweithret i'r ffronten y gweithredau? Yn ei fwy fwywch bei angloedfa ariad ymrhoo? Rydyn ni ddechrau angloedfa ariad ymrhoo'r pwylo, comod, nad yna i angloedfa yw'r pwylo i'r ddrupol fwylo. Rydyn ni'n gweithio ar y cyfnod arall y sgwyddiadau. Mae'r ffenddiol wedi gweld ar y cyfnod, ac mae'r idea yw'r hynny yw'n gweithio ar y cyfnod a'r cyfnod ar gyflym y cyfnod. Mae'r hynod yw'r cyfnod ar gyflym y cyflym yw'r cyflym. Mae'r cyfnod yn ymgylch ei chyflon o'r moddal yw'r cyflym yw cael ei chyflym. Rydyn ni'n gweithio ar hyn yn ei cyfnod ac mae'r cyfnod yn ymgylch yn ymgylch. mae'n meddwl i'r ddweud. Mae'r ddweud i'r ddweud i Angliela GS a Druple yn ein byd yn y rhan i'r awdur. Ac yna'r ffordd yw'r ddweud y byddai'n rhan i'r ddweud y byddai'n byddai'n ddweud i'r ddweud i gael eu tŷchain i'r ddweud i Angliela GS, i'r ddweud i Druple a'r ddweud i'r ddweud i'r ddweud o'r cyfnod sy'n byddai'n ddweud i'r ddweud, dyma o gwahod o'r adnod i gyflymieddiad. So, mae'n jamb o kerfod ac yna yn yr ystod. Rwyf i gwasanaeth yr holl o'r newid iawn, dweud ddefnyddio gwleidio cerddaint ymateb a gweithio dŵr 18 oes, ac ac rydym ymlaenion ymdrys â'r rhagleniol. Mae'r rhagleniolaeth, yna fydd publish o'r cyllideggion mor wneud. Ac rwyf i'r cyfos versedd gan yr hynny i gweithio i'r ei ddydd. Felly wnaeth yn ôl i ni i gweithio gwleidio arol y torell ymddrys felly, yn使wethech i Llyfrgell. Mae'n gweithio i mwynhau bod nhw'n trefegoedd dweud ac mae'n gwneud cael corll honu'r plwythol, o'r llwyth i ni'r llwythau ac mae'n gwneud llwyth a lle ac mae'n fy nghoffin diwethaf o'r llwythau lleig. Rwy'n gwneud dwi ddaeth ei wneud chydig sefydlu gydag. F tideb am y cyfrifwyr ato i fyddaeth y llwyth ddViol mae'r gyrfa bwyd ym mŵr o'r gyrfa mwyaf mae'r ysgol yn ei wneud o'r web-brouser. Nid oedd yn rhan o'r cyflau'r dweud Uneddedig ac yw dweud yn dweud o'r cyflau'r dweud. Mae'r cyflau yn ôl iwn o'r dweud o'r dweud yn rhoi cyflau dweud. Ynogi'r dweud o'r dweud i'r dweud yn dweud o dweud o'r dweud, a dweud o'r dweud o'r dweud yn dweud o'r dweud o'r dweud o'r dweud. Dyma'r ac ynogi'r dweud o'r dweud ac yn ei ysgol, a Yn A, mae Drupil yn gyffredig ar gael gysylltuol. Yn a'r Rhyw Plyd yn gyfrifio beth dess o'r cyfreunio arddangos, Introduce pan o'n byw'n meddwl yma, maen nhw'n hyn meddwl â Yn A, a Yn A, mae'r cyfrifio meddwl yma, mae'r llai gyda'r cyfrifio cyfrifio byddfa a cyfrifio, a dyna'r byw iawn wedi'u cyfrifio website-llimwyllt, mae'n dwylo'n meddwl ar gyfer y gydag yng Nghymru, i'n gweithio i gael ei html i ddyl famen. A'n hof ymlaen i'r Drupalau os ymlaen o fyddiadau, yn amlwg ddod gael'r website, Drupalau'r ddraeth yn cael ei ddweud i ddataeth. Felly, y ddweudio'r ddraeth yn dweud i'w cwntent yn y system, ond mae'r ddrupalau wedi'i ddod i'r ddraeth ydw i ddod yn y ddataeth. A'r ddweud i'r ddweud i'r ddweud i ddweud i ddweud, yn cael ei ddweud i ddweud i ddweud. Ac mae'n gwybod eich model yn dyn nhw, yn y gilydd, cyffredin nhw'n gwneud eich bod nhw'n dyn nhw. Felly, mae'n ddigonio i'r munisrataeth yn ddweud drwpl a drwplau cyflwyno ffag ar y dyfodol i ddweud drwpl sydd yn ddweud drwpl a drwpl yn ddweud drwpl yw'r gyffredin sydd, ac mae'n ddweud ddweud yw'n ddweud y ddweud drwpl i ddweud ar y data. Mae'r ddweud ychydig hefyd gan y ddweud drwpl, at y dda'u iddo o draws, i ddim gweithwch i'r system hon i'ch gael athau yn gwahanol. Be yna'n dod wedi'u swyddfa o'r cyfrifiad, ac yn ymwynt gen i'r ddaeth ni mae'r gweithwch yn gweithio'r swyddfa ar weithwyr. Mae'n ei adeiladio'r cyfrifiad yn gwahanol i ddydig ar y cyfrifiad o'r cyfrifiad, ac mae'r ddaeth nesaf y cyfrifiad yn y ddaeth ni sy'n gwneud y cyfrifiad, ac mae'n adeiladio ar wych yn gweithio'r cyfrifiad. So, sub, wat ay's angler, angler jest. Angler jest is a front end framework. Ys going to be doing all of that theming layer that we do inside of Drupal, but instead of that we're going to be doing it in JavaScript. It's going to be rendered in the browser. So angler jest has a templating language and templating engine and it uses HTML to build it's templates. Later on in the talk I'll do a demonstration exactly how you go out constructing those templates so you can understand what that looks like compared to doing that with Drupal. Why did we select AngularJs? When we were looking at the marketplace and what was out there for the front-end frameworks, one of the main points of Angular when we looked at it from 18 months ago was that it has a very large community and it's back by Google as well. Google is doing lots of development work for it. But there's also a huge community of people out there using AngularJs. And, the important thing about that is that when you have any problems, a solution that you think well there must be somebody That's already solved this particular problem. And that information is already available on Stack Exchange or people have blogged about it, or ng-modules.org is a place where you can download modules for AngularJS. So you think, well, this must be a solved problem. You'll find modules for those problems on ng-modules.org. So it's got a big ecosystem just like Drupal has. And, of course, it's a front-end framework as well. Felly mae'n gwybod bod hynny'n gweithio'r cyfle o ddweud ychydig sydd yn gweithio gweithio'r gweithio o'r hynny. Felly ydych chi ddweud y gallai Drupal 8 yma o Gwyl Fynghor i Gwyl Fynghor. Mae'n rhai cyfnod o'r teimlo'r cyfeidliadau ar y gweithio ddiogel. Mae'n gweithio'r gweithio ar gyfer â'r ffyrdd yma. Felly mae'n golygu o'r cyflym o'r cyffredin iawn a'r gwahanol ac ar gyfer o'r cyffredin iawn. Those are things we'd expect not just from a front-end framework but from any good software framework. This allows us to build a well-structured application. Perhaps what we would have done previously with JavaScript was building scripts and tying them together, we can now build a fully-featured application at the front-end. That of course allows us to test the code of doing well and to build a well-structured application. Yn y peolig sefydlu cyflym, wnes i ddwydwyd y f thaim neu yw'n ei ddwyddiadau nifer o Ruper. A gwnaeth i wellu. A nu ddwyddiadau eich ddwyddiadau o feidio enghraifftig nawr cael ei da, rydych chi i'r iawn i'r sefydliadau cyflymu a'r amser rhywfyd reuaeth i chi. Yn y prifegyrdd y model, y ddwybl hefyd yn cymaint i'r ddwybydd y maen nhw. A yna'n dwi am y ddwyddiadau eich ddwyddiadau i'r webbwyng, i chi'n gwybodaeth ynddo ddiwrnod a gwybodaeth mi'n gweithio'r ddylai Mae'r ysgwrdd yna i gyd yn ddim ffordd mewn yi ddim yn y cyfrydd, ac yn ddweuduno sy'n meddwl yng Ngwybod Ddiwrdd Gyfalogadol yn chi'n gweithio'n f�odol Ac sy'n credu fe i chi ysgrifennu g Pelwyddynau a'r cyflog ddweud, a'i rhai o'r maid, oedd yr unrhyw yn gwybodaeth yn gwleidio ar gyfer 300 ynny, mae'r rhaid ei ddweud o'r ffordd mewn cyflog y model sydd yw'r cyflwyter hwnnw, felly mae'n gweithio allwch ar gyfer drwyber gyda'r gweithio ar y bocs a'r gweithio'r gwybod yn fawr, o gwybod y bywyd yw'r wlei'r gweithio, o gwybod y system ymlaen yma, ac ydy'r cyflwyter o'r modd yn gweithio'i cyflwyter ac mae gen i'w'r cyflwyter cyflym yn ei cefnod, ac mae'n cefnod i'r cyflwyter. O'n ddod, rwy'n rwy'n credu'r brwywer o'u cyflwyter a'n I'm just going to switch over to the browser and see if I can show you an example application. So this is one of the first applications we built for one of our clients and the reason we selected AngleJS is the front-end framework. So this is an interface for searching an art collection of some, there's about 250,000 objects in it, 100,000 of which you've got images. So this is the life side at the moment. And what we found with, if we were going to build this just purely with Drupal form API, is that there might be some limitations in the way that we can construct the form. So it's not very clear on this screen, but there is form elements on here and this allows us to build up a search for the data within this collection. And then underneath we have our search results coming through and these are building underneath the actual search interface. And some of the nice things you can do if you're now rendering this in the browser rather than in Drupal is if you do things like want to change the view mode, we don't have to have a full screen refresh. So here we've got a tiled view or we can switch to the record view like this and it just happens in the browser and there's nothing else needs to, there's no screen refresh and the page just renders it much nicer. So if we then did a search, so if we're going to look for things that Queen Victoria purchase is a prolific collector of art, then we can just apply that search term there and already the search, the items that are related to Queen Victoria in some way are brought back and then we want to apply a second search into that. So let's see the objects that she's created and then the page results just refresh underneath. So what we're doing here is within the AngularJS application we're constructing a search object. So we're constructing a piece of state on the client side inside of the browser which are the information about the search. And then that is then sent via Ajax requests back to the search service and then it's sending us the data directly. So we're not actually talking to Drupal directly, we're talking to a search service but the content administrators are entering their data through Drupal and this allows us to then make quite a rich search experience so we can then start building up additional facets. So if we want things that are linked to both Queen Victoria and Prince Albert then we can add additional facets there as well and we can get quite a rich search experience and we're also able to do things like apply secondary filters inside there as well. So as Queen Victoria is the creator, Prince Albert is the subject and then we should be able to find things that he's drawing off Prince Albert by Queen Victoria. And then this just goes on so we can then keep constructing additional facets to our search interface so perhaps we want to restrict that by a particular category whether it's from the arms and armour category or we only want to find things that are at a particular location and it allows us to construct quite a complex search query. So that was just a demonstration of what's possible when you start using a front-end framework to build your application out. I'm now going to go through the process of getting started with AngularJS and what you'll need to do to build your first AngularJS application. But before you begin, if you've not worked with front-end frameworks before or any of the new front-end technologies there's an awful lot of subsidiary build chain things that you'll need to get up to date with and to understand what they are in order to start using these tools. So one of the first things you want to install on your and your development environment will be Node and NPM. So Node is a service-side technology for executing JavaScript and what it's used for within a development of a front-end application is as the server on the application so it's going to serve up your initial application for you. NPM is the package manager for Node. So the first thing you want to do is install Node and there's some instructions there on how to do it for Mac and Linux. And then just check it's running with Node minus V. The second tool you'll need is a JavaScript package manager and this is a bit like Composer for PHP. Bower is a good choice for this. So again, install Bower globally with NPM, install minus G, Bower. So now you've got NPM and Bower installed. Next tools you'll need are a task runner. What a task runner does is it allows you to bundle up a series of instructions together and call that a task and that can then be installed with your front-end application so that the next developer who comes to work on your front-end application and your building needs only have a look inside the grunt file for using grunt to see what the build steps are in order to build your application. So an example task might be a test task and there might be a number of steps that need to happen in order to test your application. So if you're building that application, you can define those inside of the grunt as a grunt task and then the next developer that comes along need only look inside the grunt file and see that there's a test task and they can just double-click that to run the test. We'll look at that and look at more detail in a moment. Next tool we probably want is a scaffolding tool. Yeoman is a good choice. There are other scaffolding tools such as Slush out there but Yeoman is what we use. What a scaffolding tool does is it allows you to provide a recipe to start and to scaffold your application. So if you're starting with nothing, you use Yeoman to say, I'd like to build an Angular application, please, and it will go away and construct the folders and the files and put in all the necessary dependencies to get started on building your application. The next thing to consider, of course, is the testing frameworks. Karma is one that's supported by Angular and that's one that people are using AngularJS on its own. You're writing your tests using the Karma language. We use Behat to just run the tests through a headless browser as well. But the important thing is that you keep your tests with your test code with the rest of your applications code. Now I'm just going to go through the steps of building a Drupalate back-end and a front-end application with AngularJS. So in Drupalate, for this example, a simple example, we use the views module and the rest for web services module to provide us with those JSON endpoints, those data API endpoints, and then we'll consume that within an Angular application. So I'm going to switch over to you. OK, so this is my Drupalate website and what we're going to produce is a blogging platform. So if I have a look inside of the structure, you can see under the content types that we've got a blog post content type. And if I manage the fields on there, you see it's quite a simple content type. It's got a title and then it's got just one field, which is the body field. So in order to provide that information via a data API, all we're going to do is create a view using the use rest service module. So I've constructed a view called blog and if we edit that, I'll have a look. So this is going to be a view which is a slash blog. This is a view of type rest. So if I just hit this out of one here, you can see there's a display type provided by the rest for web services module, which is the rest export. So that's the type of this view. We're then displaying the fields. So these are the fields we want inside it, title UID, which uniquely identifies each piece of content on the system. Then a field for the body, the path and the content type as well. So that's the machine name for the content type and we'll see what that's useful later. So if I now go to slash blog, then we can see that we're getting Jason back. So this is the title, the UID, the HTML for the body, the path and the type of the post. So there we've got our Drupal website acting as a content management system and now providing information back via a rest API. Okay, so now you're ready to start your friends in application. So we talked about using Yeoman for scaffolding the app. So before we've started anything else, then these three commands, we can make a directory for our project called AngularDrupalate, go inside the directory and then use Yeoman, Yeoman, Angular, AngularDrupalate says I want to create a new front-end project of type Angular, so Angular is the recipe, and the project's going to be called AngularDrupalate. And once we've run those three commands, then what we get is a project directory which looks like this, and I'll just go through the elements of that. So inside of here we've got an app directory, which is where our source code is going to go. There's directories there for barrel components and node modules, so these are external dependencies that are going to be pulled in, and we'll look at those in moments in a bit more detail. And there's a directory in there as well for our test code for any test that we write on the system. At the bottom down here we've got a file called gruntfile.js, and this was produced to us by the Yeoman script, and it's already got within it a series of tasks that will allow us to run and build our application for us automatically. Because I'm using PHP Storm, PHP Storm is grunt aware, and I get a link in my... because the grunt file is there, I get a link down in my PHP Storm window, which tells you what tasks are available to me. And those tasks are the build task, which is what we'll run once we're ready to deploy the application. And this was what turns all of the code within our app directory, and it compiles it down into something we can actually place on the server ready for distribution. There's a test task in there, which is going to execute all the tests. And there's a serve task here, which we're going to use now for actually running the application in development. So by double-clicking on this, it kicks off a series of steps, which then fires up the Angular application. So without having to do very much, we're already at a point where we can start development. We've got everything in place to allow us to do it. So if we just look at the anatomy of an Angular app now. So inside of that app directory, get several files, one of which is the index.html. So if this is a headless application, this is the single file of the single file application. So this is the first file that gets requested by the browser, is the index.html. Inside here, there's a few things we just want to look at. There's a tag here, the ngapp directive, which is applied to the body tag. This tells us the scope of our project, the project that we're going to be building. So at the moment we'll look at the actual Angular JavaScript, and it's going to work on this body tag or on the code within it. Down inside here, we've got a hard-coded menu. So the application's got three menu entries, which is the home, the bounce, and the blog links. You can see under the menu, home, about, and blog. So those have been hard-coded into this headless application. And then down here, one other thing to look at is this div here, which has got the ngview directive applied to it. What ngview directive is going to do is a bit later on when the Angular application runs, is go to look inside our HTML, looking for the point at which to place the HTML that gets rendered by the Angular application, and this is where it's going to go inside. At the bottom of the file, we've got our included dependencies. So these are scripts that are required for running the application, and underneath are our scripts that we're going to write ourselves. So these are the components of our custom code. And each of those are contained inside these comments and what these comments are telling the build script. So when we come to actually deploy our application, all of those files get concatenated down into a single file. So all of these get concatenated down into a vendor.js, and these underneath them get invited into a script.js file. So in the scripts directory, we've got an app.js, which is the first one that gets executed. And this is where the application actually gets bootstrapped. So in here, we are defining our application we're building. So we've called it AngularDrupalate app. So this is the name of our application. Under underneath we've specified the modules we're going to be using. So these are the Angular modules. Most of these are ones that got created for us by the Yeoman script. If we wanted to include our own modules later on. So if you found a module you wanted to use from ngmodules.com, you'd also specify it in here as well to say that your application depended on it. And then underneath, during the bootstrapping process as well, we've got a configuration section. And inside here, we're passing in two parameters. And this is Angular's way of doing dependency injection. So there's two services, and we're saying that we depend on them at this point. One service is the root provider service, and the other one is the location provider service. And underneath there, we then configure these two services. So with the root provider service, we're going to tell it what the roots are for our application. So there's forward slash, which is the home page. And if the application is at the forward slash, and it's going to use the main controller, which we'll look at what that means in a moment. And it's going to supply a template in the views directory under main.html. So what we'll look at next, I think, is the blog page. So if we go to... We can't quite see that here. So we've gone to slash blog, so that's the root. So if you have a look at slash blog under here, you can see that that's what the roots is going to be defined as. It's going to make use of the blog controller, and it's going to use this template to render the results. So if we now look at that blog controller, and see where that comes from. So underneath controllers, I've got a blog.js file. And up here, we've specified a... In our Angular application, we've specified that there is a blog controller. And same side of here, the blog controller lies on two services, one of which is called Dullescope. This is the global scope, and this is the place where we're going to put data. So that data is then available to other controllers and also to our view, which we'll have a look in a moment. And the HTTP service is what we use to dial out and request data from external services. So underneath, so we've created an array on the global scope. We're requesting data from our Drupalate development site at slash blog, and then we use the HTTP service to go away to that path, and then we get some data back, which of course is our JSON feed we saw earlier. And we're going to place that on the global scope under the blogs variable. Going back to app.js, that was the blog controller, then went away and got the blog's information from Drupal. It then needs to render that into its template, and the template we're using is the views listing blog.html. So underneath the views directory here, underneath listing, we have a blog.html file. And there's not a lot much going on here, but this is the, this is Angular's templating engine. So we've got our own template here, and the templating engine is HTML. You can see we're getting, we're looping over each blog in blogs. Blog is obviously the thing we just populated on the global scope. And for each blog we print out a H2, which is its title, and a link underneath, which is a read more link, so it takes us to blog slash and then the UUID. So there's the blog, there's the titles, and then we have a link going to each one. So we'll just quickly go through this one now. So when I clicked on that link, it took me to blog slash and then the UUID. And then we've got the actual data coming back for that specific blog post. So just running through the steps again, we can quickly see under app.js, we've got a blog slash UUID, that code on integrates that there's going to be a variable being passed in, which is the actual specific UUID. We've got a blog post controller this time. So again, inside of our blog.js file, we've got a second controller called the blog post controller. This one relies on the scope and the HTTP services as well, but it also relies on the root-param service being passed in. The root-param service is what tells us what's been passed into the parameter that got passed in the root, which is the UUID. And this time we request from Drupal the blog slash and the UUID, and we'll get the specific blog post back again. It's placed on the global scope in the blog variable, and then going back to our router, we can see that the template URL is under pages and blog.html. Inside here, we've just got a very basic template, which is going to print out the title and the body of that blog post. So that's kind of a really high overview of all of the things that you start to put together when you start building a front-end application. It shows you where the templates live, where the application logic lives within your front-end application, and how those things can tie together and how you go away and get that information, the data that you need back from a Drupal back-end. So there's a lot more that we need to consider in here. I've hardcoded the menu. This is a headless application, so it's been completely delivered via AngularJS, and we're only using Drupal as the data store. So if you want to build something that's completely headless like this, then you've stepped away from a lot of the good things that you do out of the box. For example, the ability to manage your own menu. If you want to give your content editors the ability to manage the menu, you're now going to have to build an endpoint which tells the Drupal application where to find that menu. So your Angular application is going to make perhaps several callbacks to get the menu, to get the content of the page, to get anything else from the page. One of the other things perhaps that you'd be walking away from as well is the ability to specify your URLs. So here we've kind of got a very ugly URL just in order to return the blog post. But just as an example, just to show you some of these things are overcomeable, you just have to build these things in yourself. I've got here a page that's coming back, so slash about is a page that's that slash about URL is an alias that we've told Drupal about. The Angular application has no idea what is that slash about. So we have a quickly look at it in the app.js file. We look at the routing again. None of the routes in here tell us about slash about. There's just the home page, the blog, and the specific blog post. But there's a separate section at the bottom called otherwise. So if none of the routes match, I've written a controller which is going to go and ask Drupal what's at the URL that's been given. So quickly look at that. So inside of content is my content controller. We've got an endpoint to Drupal called slash content where we pass in the path. So the location controller gives us the current routes and then we'll go back to Drupal and ask what's at that path. Drupal either tell us or it will respond with a not found and we'll just set the not found template. You might as well now. So for the headless application there's no templating system going on here. The art client website I showed you earlier, that one there is an amount of Drupal templating going on. So Drupal is providing us with the headroom footer of the page but the search interface in the middle and the results of that page, that's an Angular application providing that. So Drupal is giving us the basic page and then everything in between is being given to us by the Angular application. You end up being doing theming in two places so you'll do some theming inside of Drupal 8 to provide you with the basic template of the page so Angular is completely separate in a way so then you would then do whatever templating you needed to do within Angular so you've separated up into two projects. So yes I was going to quickly show you this one. So I've built a controller which allows us to get the data back there so if we just have a quick look at what that looks like on the Drupal so there's a Drupal view at slash content which takes an argument of the path and it goes and gives us the path back Joe's thing didn't exist we get nothing back from Drupal this time. And so in the app.js we can see that once we've done the logic to get the data about what's at that path then we use the view slash content HTML to render the page and inside of here we've got what's effectively a switch statement and it's telling us we're going to load in either a 404 not found page or we're going to load in the right page for the content that's come back again. So this is just an example of what you have to do if you're going to build a completely headless application you're going to have to do some things that Drupal isn't providing you with. Okay, I'm just going to go through the last few slides. So, as mentioned before there's plenty of modules available on ngmodules.org so if you get to a point where you now need to add perhaps an infinite scroll to one of your pages and you realise that this must be something somebody else has solved go to ngmodules.org, have a search around and perhaps you'll find this module looks like it's because the work you want to do. In which case there's instructions there for installing it using Bower and you can add it to your application. If your headless application is on a different domain from your Drupal sites then you're going to have to use something called core support where you tell this cross-origin request source so this is something where you tell your headless app you define from your Drupal site what other websites are allowed to access the content or to use the content. So I don't think there's anything within Drupal at the moment that allows you to do this or there are some patches and people talking about it at the moment but you can use your rules within Nginx or Apache to always supply this particular header which is the access control allow origin header and afterwards you specify which domains the data from the Drupal site is allowed to be used on so the top one says I only wanted to be used on the localhost domain but it's the one underneath of the star and it says actually the data coming from my Drupal site can be used on any domain. Yes, what's the catch? So we mentioned a few of the catches before the fact that you will be stepping away from Drupal so you're going to have to kind of hand build a lot of the things that Drupal is providing without the box for example some things like login, the ability to login to your site you're going to have to build some construction to allow you to do that things like the menu and the routing and those are all things that you need to now build to do yourself. Another big one is SEO so if you've got a headless application then I think some of the crawlers will try and execute your JavaScript but if you want to ensure that all of the content on your site is indexable then Google's suggestions at the moment are that you provide a non a non-Javascript way of getting to your content and there's a couple of ways of doing that so one is that you can just create your HTML alternatives on the site and there's things you can put into the meta tags at the top of the page this URL here which you can't quite see but it gives you information from Google where it tells you what it is you need to do so you have your JavaScript app URL which most people use then you have kind of ugly URLs with the search engines and the search crawlers we use to get the data from the site rather than having to create two versions of your website you can use there's some instructions at this site here you can use phantom.js to crawl your site for you and produce those HTML pages automatically and they're also paid for services that allow you to do this as well and that's everything so thank you very much for your time thank you thank you for any questions so the question was how do you include your Angular app inside of a Drupal-ended page in the example given so this isn't an iframe it's an application that's built it's included in the page so we would include those in the same way as you include any JavaScript within a Drupal application so we include the JavaScript files and then you tag the element of the page that you want the Angular application to work on and it works on that element so it is just JavaScript at the end of the day so you just include the right JavaScript files at the right point and it will execute on the page so your Angular app starts at index.html which is what we showed you but this could have any HTML within it this isn't actually part of the app the Angular app starts at the JavaScript and you just put some tags inside your HTML to say where you want it to start to start working on so inside of here we'll start here but this page, this index.html page could have been rendered by Drupal which is how you then embed it in the progressive way so the question is what can you do if JavaScript is not available so I think for us and the way that we've used it we've been selective about the ways so we haven't built an entire site out of AngularJF's application we looked for those places where it was particularly useful at this point we are now thinking about what we would do in terms of a complete website whether you'd have a fallback and Google's suggestion is that you do have a fallback because that's the thing that the search engines want to use in terms of the demonstration site that I showed you it's just the search interface there is a very simple search interface that enables you just go to one where you can just you've just got your standard sort of Drupal form where you can type in some text and press enter and the server will do the search for you but you lose all the richness of the application as a result of that so the ability to build that rich application becomes much harder if you're only doing it through the Drupal website so I don't want to do a check yes, although you wouldn't be able to get to that page without JavaScript enabled so you would just be left with a site search in that situation so the question is do we load in all of the information about the 90,000 art objects on that particular site and then do all the searching locally or do we construct the search and then what we actually do is we construct the search locally and then we send the constructed search as a request out to the search API and the search API then returns the first page of results and so every time you manipulate the search through the search interface the project which is holding state and the browser is changed and once that changes it triggers a request back to the server to say and this is what the search looks like now and then you get the first page of results back in the page, that search result bit then rebuilds itself underneath so yeah, we're not holding several hundred thousand pieces of data on the site because that would take a long time to pull all that in so the question is what are the other advantages to give some examples there of speed and ease of development one of the other good reasons for taking annuals which I didn't touch on which I probably should have done which was around how you construct your development team around it as well and finding good Drupal developers and the good at the theming layer comes quite high because you're getting quite a narrow set of skills that are required there by separating this out you open yourself up to all of the people that are working in the front-end JavaScript space you don't know any Drupal but do know how to build good quality user interfaces and web applications of which I think there are more people out there allowing them to do that so it improves your ability to bring in talents into the development pool it also frees those front-end developers and there are a lot of people that prefer front-end developers who prefer not to work with Drupal there's a number of those people out there as well so you can have your Drupal specialists and you can have your front-end specialists and you get their best of both worlds of course that brings some dangers as well because you're obviously separating your development team out and I know that some places perhaps then create kind of a front-end group and a back-end group and they only talk to each other over an API document which is definitely not the right way to run your projects very much in favour of making sure that those people are still collaborating very closely and they're working together to do this thing and actually I see a lot of back-end developers that are very interested in AngularJS as well because it's bringing form and structure to what was kind of a the front-end sphere and actually the back-end development doesn't stop at the API it goes into the Angular application all which is the front-end developers are now working on the views the templating side of the Angular application and the back-end developers are working perhaps on the programme logic at this level so they're working on both the API and the consuming of the API on the client side we haven't got any specific standard I mean obviously there are the rest standards and the way that you should structure them for a Drupal 7 builds we use the restful module and there is a Drupal 8 version of that coming out now which allows, is a very programmatic way of constructing your API and it gives you an awful lot of nice things such as versioning of your API as well so you have APIs in different versions but I think there's some other talks on APIs and the API versioning at Drupal camp this week as well but yeah there's a whole subject on how to do with the API and how to build your API as well so the question is do I have any experience with Angular 2? so the question is do I have any experience with Angular 2 so we did this process about 18 months ago to decide and made the decision to go with Angular 1 because it felt like a good fit then 18 months later everything's changed and now we're having to re-evaluate everything again Thrice actually put a blog post very recently where his team sort of evaluated all the front-end web frameworks with the thoughts about which one of those perhaps should be bought into Drupal core and perhaps should be standardised and that's an ongoing debate at the moment they were kind of leaning towards Ember as the front-end framework that might fit well within the Drupal community but that's an open question at the moment Angular 2 is really interesting, it is a lot faster it simplifies a lot of what I've shown you today actually it's the number of things that you need to deal with actually reduces down and Angular 2 ends up looking an awful lot more like React in the way that it's structured and the way that it's working so we have to make a decision at some point in the next few months about where we're going to go because we want to move on to the next new shiny thing as everyone in the front-end community does Angular 2 is definitely of interest again because it's backed by Google because it's got a very big developed community behind it but it is still in beta at the moment we find it pretty dependable it's the same with Drupal you've got to evaluate each module on its individual merits don't you think that's a good module it seems to do 90% of what I want and that last 10% takes me I could have rewritten it in the time it took me to solve that last 10% of the problem so these things exist it's just being on top of what's going on they're reading the blog posts and getting feedback from things like the AngularConnect conference that happens once a year it's very true it provides a bit of I think it provides a bit of structure around that but if you've got to get up a count you can just chuck it on there in the same way a PHP Symphony application library you might be able to just chuck that up and get up but it's where the people are talking about it and whether it's got enough reviews that's going on so the question is if you're publishing all of your content on a search service which is openly available to the world are there any security what considerations do you need to make under that circumstances it's a very good question it's a great question it's a great question it's a great question it's a great question it's a great question it's a great question it's a very good question and it very much depends on your application if you've got lockdown content you can't put it into a service like that because the authentication is going to be between an Angular application and a back-end service so for the example I gave this is open data it's good to put it on something like elastic search because you mentioned the DDOS attack vector that's potentially possible there if we've opened up a service to the world so that's a service you can then put onto the cloud somebody else can look after that so elastic search is a big built for this, this is the kind of application that it's there for so allowing for large quantities of search and access to that kind of data but yeah very much comes down to your particular application you're going to have to hide your data behind some form of custom API or some other service but this is for high volume exactly if it's a high volume high number of requests then this kind of setup is really good and you've taken Drupal out entirely you're just talking to a back-end service which you've built for that kind of thing so I think the question is how much work is it to index the data well exactly and this is what you're stepping away from so the ease of being able to just configure a few modules and click some buttons and then you go okay well there's my site but it looks like a Drupal site because there's a lot of things that they do so if you want to build an interface which allows you to do that to build up facets to build up search terms so we've got the ability to say okay here's one type of person then I'm going to add a second person and a second person and I'm going to add some sub features to that as well these are all very complex things it was a long project and it had a lot of complexity within it so yeah this is a big project I think not for this particular search interface but in terms of the back-end of that it's going to be available all the way that you search into Facebook because it needs just data and facets at the end of the day so it's just about structuring that in the right way but yeah have we got type 1? it's got that so okay I'll be around for a little while so if anyone wants to talk to me any more okay thanks very much