 So far. So how many of you are from Mumbai, actually? Mumbai, Mumbai. All right, so a lot of people coming from outside. Different part of India, as well as outside of India. Good. So right after the lunch, everybody is sleepy? I'll try not to bore you that much. We fell asleep. I think we have to wait just one more minute before we start the pottering experience out of the box. And media management, with Drupal 7 or Drupal 8, the media module is there. And there are a couple of other related solutions which really help us to manage all the media. We can upload images, drag and drop, put in videos, whatever we like to do, we can do. And it's very, very powerful. And with S3 integration, you can even just export all your media into Amazon Cloud. So it's very, very powerful. It's very hard to replicate. And reinvent the whole wheel again in some other system. And communicating to third-party APIs in front of integration, which comes in so your Drupal back end can still talk to many APIs and can get you data from them. Securing user data, for sure. Drupal is very secure. We, as a community, work very hard to make it safe. Keep it safe. So whatever we are saving, we make sure things are behind the lock if they are supposed to be behind the lock. And it helps put that lock in and securing user stuff, because that could be another wheel to do. Structuring content types and taxonomies. So we take these things for granted when we are actually a Drupal developer. But taxonomies, users, content types, when we look into it as a prospective website building, they are so easy in Drupal. And they are right in the core. And we get that functionality out of the box. Creating new content types, taxonomies, defining relations between things, that is much easier than any other framework. And it's all UI-based. So that is a very powerful tool while building different sections of your website here, or even your mobile app. So decoupled way, is it really successful? So to prove that NPR and Netflix are the biggest decoupled examples in the whole world. NPR is back-end system that powers a lot of different systems. It's been there for 12 years, and they are really happy about it. And Netflix as well, they built an API system which feeds to all their different kind of apps, syncs all data from all different apps. It's just a distributed system they have built as microservice layer. So what results we're going to get out of it? Great front-end. So you can use your favorite front-end now. Any framework you like in UI and CSS JavaScript-based, you like bootstrap, you just take bootstrap in. You use as many components as you need, and you just use that in your product. If you like a new framework, you like bourbon, just use bourbon. Whatever framework you like, you just define and use it. You don't have to wait for a new theme to come in in Drupal. You just don't have to make your own theme compatible with it, and just to make sure that every damn element in the whole CMS is working with it. Define the elements that you need, and that's it. That's what you need. You'll get great front-end, great websites with responsive design, very fast. Angular footprint is very, very small, and the Angular single-page applications, the websites that you'll get, are very, very fast and responsive. With iNIC as well, iNIC is the only framework that can compete with, kind of like compete with, like I said, 90 to 100, in combination with the native UI that you get for iOS and Android. And with Angular, you also get Angular Material Design, so which is, again, a very, very large framework on top of it. You can use that in your projects, and you can get Material Design implemented out of the box, and not much to, like, you don't have to deal with Drupal theming at all, and it will just work out of the box. You can build mobile apps as I described with iNIC, and that will help you. APIs that you've got to build out of your old Drupal site that can power multiple systems in your enterprise, that you can build mobile apps, you can build different desktop apps, whatever you like, you can build out of them, whatever your needs are. So you have a clean set of APIs, because you will be defining them for your site, you will have them, and you can even make them open so that other people can utilize and build upon them or integrate those things into their existing systems, and the other teams can use those as well. Easier upgrades, for sure, now that your core could stay really small, because a lot of modules and dependencies in your Drupal are about the theming or about the user interface of your project. So once your core is protected, your core is small, you can even, I won't say skip them, but you can even skip small upgrades, even small security patches. So if you want to put your website behind a VPN and just expose the feeds that you need, you don't even need to upgrade them, like you should, I will say, but there is no urgent need to upgrade them, because nobody can reach them then. If you put them behind a VPN, your company can access that, you're already putting a lock on top of it, on your APIs, and only you know how to communicate with them, you go in, you log in your VPN, and you make changes to your content and everything, much secure, so easier upgrades, don't have to worry much about it or sweat about it, as, oh, my site is gonna go down, my user state is gonna get stolen out of the box today, so those kind of fears can go away. And that helps a lot. This was easier upgrades, and this is a really good selling point, if you tell me. We have done it in fast, this is the key, because at overnight when we get so many security upgrades, like the whole enterprise is shaken off, by last year we had a couple of big security upgrades, came in Drupal, which were really urgent, and so that made sweat a lot of people, because overnight you have to make the deployments, and sometimes deployments in enterprise is not that fast. It's not like I'm gonna give them my deployed code, and they're gonna put it in like three hours, or two hours even. They have a schedule, they have to follow, they have different things in pipeline, so those things, if we can protect, and get some timeline on it, that is much better. Faster development cycles, that is I think is again very important. You are dealing with two different teams here, the theming team can work on their own, and the backend team can provide those stuff in APIs. So they're independent, they're not much dependent. They are dependent, but not much dependent. Theaming team can still work on the UI that they need. And that will definitely run into faster development cycles, and it's a much lesser amount of code that you'll be writing this way as well. Okay, it's not already right in the park, there are some problems as well. So talking about what issues you can have with Drupal, so very first is like you lose multilingual. So out of the box you lose it, you can still implement it, you have to reinvent a little bit in Angular, or via your APIs. So you lose multilingual, which is already there in Drupal, and our core team works very, very hard to get that support in Drupal, and it's part of seven, eight, every Drupal you just make it multilingual, whatever you want, the way you want. You have to reinvent that in doing it in your new website, Angular, or the mobile apps that you're writing. But it's still possible, it's just extra amount of work that you have to do. Accessibility, we add a lot of accessibility features to our markups in Drupal, out of the box, and those will be lost, or you have to learn them and implement in your code again. That is another thing that you will miss. Rebuild layout management, like with panels and things like panels, display suit you, you can just drag drop interfaces. Once you have things set up, you can just push one block on top, one block at bottom, so that will be gone, you will be dealing with HTML divs and part of HTML. So you may have to rewrite your layout management, or just define it in a way so it could be used better. I will discuss that later on, like how you can do a little bit, and how you can define templates in your code, and still reuse them in your new Drupal site. But you have to reinvent that, which is already there with panels. But it's much complicated, so I think it's some cases, it's much better to get out of it than to be deep inside of it. Accessibility improvements made to core, area, data, and schema.org attributes which were added in Drupal 8, that will be gone, and it's important to few organizations and people, and you have to do it yourself in your HTML then, so reinventing the wheel again. You can export them with your data, but it doesn't produce very pretty outputs there, so you have to think about it, how you want to handle that in your project. It may or may not be important in your product, but Drupal 8 does that already for you. So discussing a little bit about Drupal architecture, like what will you require in your Drupal 7 or Drupal 8 site to do it, to have Angular website off of it, and what does it make sense for us, what to use. So you can do it with Drupal 7 or Drupal 8, what I'm writing here. But basically you can do it with your Drupal 5 plus website. Even in Drupal 6, the services module exists, so if you have an old Drupal 6 website, you can still use that, and you can use services or any data source, we use data source module to export out the JSON feeds and feed them to your different systems. Restful module is very popular in Drupal 7, that can help you rectify all the entities, and I will describe rest later, and services module is similar, you can fetch data out of user, taxonomy, menus, views. So all the basic portions are covered with restful or services module, I'll choose you, make you choose one. I like services better, but restful is much more advanced, if you talk to me about it. Views data source, if you just want to do read-only operations, you don't have much rest, like you don't want to send data, update data, delete data, you don't need those kind of operations, you can just use views data source to export out feeds. You can build feeds using views and just export out feeds using views data source and utilize them in your app. Doing that, you may need to write a little bit of custom code, if you are using a lot of reference entities, that way you have to maybe write a little bit of custom code to handle that, maybe or maybe not, you won't even need it, so you don't have much have to worry about it. So web services, so web services like expose of raw data at certain URLs. So you hit a particular URL, make a request, you get data out of it, could be JSON, XML, whatever header you requested it for. So web service is just that, so you fetch data out of it and that just works. And when we say a REST API, that's like an architectural pattern that we define to do more operations just to read just out of, so not just get operation, but you can also do delete, update and create. And so you can create data, you can update data using that, you can always fetch data, that's important part of it. So REST API helps you with that. So you can decide whatever kind of architecture you need here and you can go for a read-only solution or a REST API, which will be much more completed. And with Drupal 8, you can use web services, which is in which part of core and you can use this key initiative as well. So Drupal 8 does it out of the box, you don't have to install any custom or a contract modules out of the box. You just have to enable a couple of modules that you have and then you can build feeds out of the views or use the entities to build out the feeds. And that will just work, which much more cleaner than Drupal 7, by the way. Any questions so far? Angular is a project that we, we can also have something like progressive in a couple of pages. We can have just a part of the page that Angular and the rest of it to Drupal 8. We'll discuss it in the end. I have one slide on that. Yeah, we will discuss a little bit on that. So this is all about like complete decoupling and like redoing the whole front end of your site and quickly in saving the budget. So like when you are thinking about decoupling, there are a couple of things comes in mind and there are a couple of ways in which the data can flow. And so like for, this is majorly for like read-only systems. We are making data flow from Drupal to your apps in this diagram. So what it does is like you have a Drupal 7 site or a Drupal 8 site and you are getting data out of it and you may put an intermediate database layer in between. You can use Couch, TB or MongoDB. So this is the architecture that could be more useful for much larger systems. If you have a website with a couple of thousand views a day or 10,000 of views a month, you don't need this architecture. But for larger enterprise systems, you need such kind of architecture that can have an intermediate layer who can handle a lot of requests. So that could be a Mongo layer or a Couch, TB layer that you can put in. Couch, TB is much better, I say, because you get a web service part out of it already in Couch, TB, so you can just query directly and get data. So then you have the endpoint which will be querying your intermediate layer and which can give or send data to your Angular website or your React website or even your app. So this is like data model for large organizations or whenever you think it's important for you, you can have it. So what you'll do, you will push data from your Drupal 7 or Drupal 8 site and you will send it to your Couch, to be your MongoDB databases. You can use QAPI and use Drush or Krone to handle that process for you. So whenever you are creating new items, you are updating content that can push it to Couch, TB or MongoDB and then that can be served as rest end points for your Angular or React app. So this is something Lollabot.com did. They put a Couch, TB layer in between and what they do is they push data into Couch, TB. We are also doing a similar architecture in one of our enterprise projects. We are planning to use MongoDB because that's standard in our organization and that handles the data updates and keeps all the data and then it pushes it into your React or Angular app. So the benefit of using it, you don't have to bootstrap, you don't have to ping your Drupal API all the time. You can just use a much faster API built by Mongo or Couch. They're file based and they're much faster in response time. And the other data flow model that you can define is instead of defining a new Mongo or a Couch, TB layer in between, you can just use the caching layer. So Drupal caching is great. We've used caching, Drupal caching, entity caching, all of them you will be using. So caching layer can handle those requests quickly. So if they are read-only data, you can get them much faster if that data is cached and you can use the Drupal caching layer and the whole infrastructure to do that. That will again serve the purpose and you don't have to spend a lot of time redefining the middle layer and logic to wire cues to push data or update data into a new database. So that's much faster and easier to build data flow to I say. So a little bit about Angular, like how the API calls are gonna be. So you make a get request, that is API URL, that is API blogs. This thing gives me a list of all my blog items and then you make a get request and then when it's successful, it gets, gives me all the data and I save that into my scope.blogs, that's Angular variable and which I'm gonna use later in my template and that's it. That's pretty much like which will retrieve my code. We don't actually do it this way. We actually do it via services or factories but to explain it better, I haven't put it in a way. So you can see the exact get call and how you define variable in a scope. So we actually, as I was saying, you actually do it in via services. So you define a service as factory and then you return the function and then you make a success call in there back in your controller and define the data. Fetching a single node. So that's again, you're again defining a new factory and you're defining a function get node and that will get you a JSON object of your particular node, whatever you're requesting. So this kind of function could be used for your single page, single node, that you are referring to like node slash one, two, three. You make a call to that, that will make a call to this particular URL. It will send back data and you will display that data on your Angular site. So it's very, very similar in logic to what you do in Drupal. And the data we get back from Drupal is that this is a data source module that I'm using views data source as a JSON output. So what it's giving me all the, all the items that are requested in JSON format. So nodes and title description image. So these are like five fields that are defined. I need to display them in my list. So I'm just getting these data, these items from the list. My title of the blog, my description, my image URL and image URL can even use your image cache. So that is much more helpful here because you don't have to reinvent the whole wheel and getting restyled images. So things like image cache out of the box you can use with views and that will help you building it. And the rest of the things that you will require to build a particular item or a particular template, you can just fetch it out using views module. And the previous data that we saw in that blog output you can see in Angular representation what we have here. We are putting a date, date field like when this blog was published and a blog source URL which is the image. And we are defining image responsive. It's a bootstrap theming at the moment. So it's using image responsive bootstrap class and MD5 column. And MD6 we are making the title as a link over here. So like Drupal you can define these kind of URLs in Angular as well. So node slash, this particular hash URL can get me to any node full ID. I can define that in Angular's router. So we can define those kind of things similarly to as we define in Drupal menu API. And then we are showing description here and then a read mode button. So this whole code will actually print me out a list of blogs that I'll require for my blogs page. So this is the amount of template that you have to build. That is it. This will just, and you repeat will just alter through all my API and it will all my array and it will just build me. I will do it in demo, but I was just trying to show you how clean the code is. Like how lesser amount of code you have to modify or write to get it done. Or if you have to add a new class, you just look into it, you add a new class and your whole page is set out. Routing, Angular has its routing framework. So we use that to define inside of Angular route. So I prefer like not using Drupal routing and just try to export that into Angular. It's much faster if you define your routes at least in your Angular app. So you can use the route providers to write your routes, write all your routes and then they can refer to different controllers and the partial, seeming partial that you're using. So 404.html, fq.html, pout.html. So these are all my HTML partials that I'm calling and pushing data. So integrating with clients, we already discussed like we do it. So what integration, so we can build like Ionic-based Codo apps for sure. That's again Angular kind of, and you can build Angular-based websites. So Angular website is something I really wanna focus upon because it can give you a new website out of the box without upgrading to anything like Drupal 8 or maybe in some cases even Drupal 7. You can just have a new website, have a new frontend, don't have to spend a lot of money, just have to write your API and feed data to your new Angular website. There is another reference. So this is for Angular Drupal. You can use services module with this particular framework. It's written by a community member and this is very nice actually. It gives you all the operations you have to do in your Angular for like node editing, fetching a node, creating a node, all that is already written here. So you can just use these functions, define it there, and actually just look at the examples and just implement it your own way. That will be helpful. It uses services module and Drupal 7. All right, we'll do some demos and hopefully they will work. I haven't prepared any videos for offline, so we'll see. I'll go. Any questions so far? Yeah. How do you deal with this? We have Angular app, that's the one of that. And the main problem is we might have 10,000 nodes. Yeah. And so if you do service like that, you can use all the Angular filter goodness, you know, because you can only filter on what you return. Yeah. But if you don't then you have to wait a long time. Yeah. Have you guys had to deal with that? But if you want to do filtering in the whole data list, which is not loaded yet, you have to make a call back to Drupal. Right. But you can define the filters in your Drupal view and actually retrieve back data by sending views filter arguments. So services let you do that. It lets you send back arguments to your views. So if you're making a get request to a particular view, you can send back filters or even search items. So whatever filter you have defined, exposed filters, you are able to send them an argument. Yeah. Our main problem is so if you have properties that are nested, you can't filter on those for the rest of the, we use rest of the services. Okay. So the services can filter on objects. So basically nested properties. You have to give me an example. Okay. Oh, maybe it's too big that's fine. So we will do, so this is like a basic intermediate course at the moment. We can discuss that more later in the questions. And how do I get out of it? View exit presentation mode. So everybody pray that our demos work, huh? All right. Okay. So I have a very simple Drupal 7 website here. This could be like your corporate website. Your company's new website or one of the product that you're working on. And you're planning to move it to your Angular site and you like a template. So what I'm going to do is like, we have one template right here. So this is a bootstrap template. And this is called business or something. It's on start bootstrap if you want to download it or if you like it. So this is called modern business. So it's a very, very popular template. It's in bootstrap framework written. So what you can do is like, you can just download the code of it and convert it into your own Angular project. It uses bootstrap, it's a very, very lightweight. There is nothing much it does. So in the website I'm going to show you. I'm not even using ngbootstrap framework. So ngbootstrap is a rewrite for Angular elements of the bootstrap framework. So you can use that heavily to build your applications actually. That's a much better way of doing it. It defines all the directives that you can just refer and push data into Angular and a much more robust. But I'm just going to keep it very, very lightweight and just going to use the bootstrap library, CSS and JS files and Angular JS files just out of the box, whatever we get and build our Drupal site. So this is kind of a site that we have right now. And so this is an Angular project at the moment. I use this bootstrap template, which were just HTML files to build my own Angular project. And it has a couple of files and a couple of sections that we have that we actually feed from our Drupal website. So I'll show you how we are feeding them. So first of all, this is a very simple Angular project. It took me less than a day to build all this, what I'm going to show you. I just spent like a day before yesterday to come up with the whole thing. So I was almost able to finish this whole website in this theme. So it's not going to take you very long. So that is the budget saving for sure. So what we have, this is our homepage as our normal enterprise website has. And we have one description on top. It's about Mumbai DrupalCon. We have a description right here. And we are defining three features at the bottom about it. They used to look different, but because on my projector I have very large screens so they look different, they're responsive. So we go into our Drupal site to check out what we have in there. So in the content section, I have a homepage I have created and I'm editing that page to feed data into my particular, this page of the website, the homepage of my new Angular website. So I have a Mumbai DrupalCon that I just want to rename my home page. I say, I don't think I want it. I want a DrupalCon Mumbai. And the rest of it looks good. And I'm also defining all my features block here. So this section is also powered by the same page. I'm defining my features block. I have first one is bootstrap three, ready to style and blah blah. So they have drag and drop interface. I can just reorder things. You can use your Drupal knowledge to build all fancy things that you want to build and use views to make it appropriate as per you need for per page. You can use views to make any output the way you like. So we are using that. And this is another feature I'll show you in the end. So we made a change to a title of the page. And it's called DrupalCon Mumbai now instead of Mumbai DrupalCon. So the same way I make change to my CMS site. And now I come to my Angular site and the data should be updated as it is fetching from the same source. So it's DrupalCon Mumbai now and which I just updated. So you are updating your website just as your CMS and but you are actually feeding it to another system which is much faster and much robust and easy to maintain. I'll show you the code in a minute. And the other thing you can actually do here is you can define your theming outcomes. So that is like a little tricky and you have to give it a little bit of thought how you wanna do it. But you can define templates in your items and you can actually use them to assign classes and the way you wanna customize it, as we do in Drupal as well, like to give control to the person who is editing content or who is managing the website. So they don't have to get their hands dirty with the code. For example, for this home page, we are using, we sometimes we wanna use a well class for these three features that we are showing up here. By the way, we also changed the order of them if you remember. So for these three feature items, you can build ability to have different theming elements in them. For example, this is using a well feature. If you are familiar with bootstrap theme, well is a class that you can define it. It gives a nice padding layer over it. So if I say like, I don't wanna extra padding on my feature section now and I say, we can just define that as in your field in our UI and you can even create a content type that can drive your whole UI and you just create a content or you can just create a new settings page where you can define all your Angular UI theming related changes that you wanna do and just push them into your configuration variables on your Angular project, use them across your whole theming. That way you can have a configurable theming as well. So you are not even controlling your theming from your Drupal CMS. You are controlling content as well as theming. So as we remove the well element from it, so now the well class is not coming because I said I don't want my padding. So this way you can define all the UI and theming part of your Angular product. So it's giving you more control, not just taking control from you, but it actually can give you same amount of control, not more control, I'll say. And so this is again a portfolio section. So every corporate side has a portfolio section. So we have a portfolio content type that I've built and what it does it has couple of portfolio items in it. You can add a new portfolio item and it will show up over here. Let's try to add one actually. So what I'm doing, I have whatever content I have for portfolio, I'm creating a view, I'm exporting it as a JSON feed and whenever a new portfolio item is added, it automatically pushes it to that particular view. Call it Drupalcon, we choose an image for this new portfolio. Let's use this data chart image that we had. And once we add it to this list, it will actually show up in, I'm not even sure if this is a URL. This is a URL. So you see, this is my views output, which I have an endpoint at apiportfolio.json. So I'm making a get request to it. So the new item that I just added gets added to my JSON feed and my site is actually feeding upon it. So whenever I'm gonna make a refresh to my page, it's actually gonna load nothing, really. Okay, here we go. So on the portfolio, I see a new item is showing up now. So this is the way you can manage content in your CMS and still power your new UI. So this is a brand new website that we have written, which is CMS-driven in Angular and with using the latest items and still having the control of a CMS. So this is again FAQ section that I have built. So this is just to demo any other website we have a FAQ section in our website. So what you can do is you can actually use field collections to power such kind of sections. You can have a content type, you define a field collection, you have unlimited fields in it, unlimited field collections. So let's try to edit this particular page and see how it structures. So if I go to my FAQ section, so that's a content type right here and what I'm doing, I'm creating a view again to export out all my FAQ questions and answers and that is building that whole page. Click on edit and you see at the bottom we have a couple of field collections. That's a question, that's an answer question answer and you can sort them here. It keeps that in mind what sorting order it is. You can define different kind of sorts, whatever you like or you can even define a new integer elements here if you want some different kind of sorting. That can, those are all already part of views so you can use views to handle the rest of it and so this is all your content that you're building and it's in same structure as you have and once you make a change over here, this page will automatically update once the website. So you can have, so the code behind it is very, very tiny, I'll show you. So we are looking at the FAQ section and the code I have is like 35 lines of code that I have to write for that whole template. So I have a container class which is a putre class and we have this header section which is frequently asked questions, FAQs and then this is my code for all my FAQs. That's it. What I'm doing, I'm alterating through my FAQs in my FAQ array and I'm displaying the title and I'm displaying the question over here and displaying the answer at the bottom. Using bootstrap elements which are part of bootstrap using the same HTML divs and classes and this whole page will build out of it. If I need to make a change to a class, I just make change, the themeer will go in and make change to this template element and I will have that update. All right. Any questions around this? Anything? Yeah. Oh yeah, exactly. We created a view and we created an endpoint call at FAQ.json and it gives me all my questions and answers from Drupal. That is the way that Drupal fits the application, just my view. This application is fed by views. You can use whatever you like, the options that we discussed. You can feed it via views, you can feed it via services API, you can feed it by a restful API. So you have a couple of options. As per your needs, if you have, but like this is very fast way of feeding the views. You can only define the items that you need. If I need just a question and an answer field, I can just define question, answer quickly and get a field out of it. Yeah, listing, fetching data out of Drupal in whatever container you need, it could be very, very fast. And so if you look at my FAQ controller, this is my controller code. It's making a call to FAQ service which is defined in my services somewhere. And this is making a get request to this particular API that we just looked at. And it's passing data back into my FAQ controller, defining my FAQs array and which I am feeding into my FAQ.html actually right here. So we are altering through the whole array over here and we are just showing the question and answer. So whenever you are making changes to the view or your content, it's gonna be updated over here. So the basic idea is with very less amount of code, you can actually put out those basic pages or a basic website that you have in Drupal or an old version of Drupal into a newer framework like Angular or React, whatever you choose. We'll discuss about that later too. But yeah, that gives you ability. So this is the pricing HTML that we have. We have a pricing page. So most of the websites also have a product page which they're trying to sell so pricing tables can also be defined like this. So this is using a bootstrap to do it and you have four content items I'm exporting out as my, which are my products right now. So if you have products, you can do it too and we'll discuss about products in a second. And right now I have like four products and I have one unpublished product. So if I make it publish over here, so my view takes care of my published and unpublished content. So one side publish it, there will be five content items instead of four. So they will automatically appear. It's responsive so it will take care of the responsiveness automatically. And as we go, it's bootstrap and it behaves like that. So yeah, adding, editing any kind of content, feeding it to your site is quite simple this way. So you can still use your all taxonomy items, all user, all content items, whatever you need and just feed it to your site. Simple site for now. And so this is the blog listing page. Actually we demoed, we saw in the code before. So we have an image, title and a description. So whenever a new blog is added to it or whatever changes are made to it, it will show up over here. And it looks much better on a larger screen though. Right now it's squeezed out. So image coming on top and the description is at bottom. All right, so this can power all the services. So you can even define your own services if you have some different kind of content submission or stuff. So what you can do, you can define your service endpoint, you can push data to it and that will take care of your contact form or whatever way you like it to be done. If it's a web form, web form services are different. And for the products we can talk about in Drupal 7 there is a module for commerce services that can take care of your, if you are trying to build your commerce website into Angular, that is possible using that module. What it does, you can have a card defined services. It will create a new card for anonymous or authenticated user and it will, you can keep adding items to it, retrieve it back, show it the data on the Drupal site. A lot of people are doing that already. But yeah, that's again very powerful if you have a commerce site and you want to put a new face on it using Drupal 7. All right, so that's pretty much with the demos. If you like to see anything, but in particular I can show that like if any questions around it. Yeah. This is the Angular deal website. Okay. All right, so Mobile App is, okay, I was not getting into Mobile App because Angular is same as Mobile App. Ionic is same as Angular. I don't differentiate them. So the same code, same stuff you will write there. You just have to change the instead of div you are using directive of an Ionic framework. So that's the only difference by the way. And so if your organization has a need for a Mobile App, you will build that first of all, you don't have to like the real question is that when you need it, if you need it you have you can build it in Ionic. But like see, yeah, yeah. So this is a website. Website should, yes, yes. So the question is like, when should we go with the app and when should we go with a website? So to answer that really like in general, you go with the app with a particular set of functionality that you wanna solve. You wanna solve a particular problem. So your website may be solving 10 problems. Taking care of 10 things. But you're in app, you may just wanna do two and be very, very focused what you are doing over there. So in that case, you can define those cases. You can use those APIs that you're already building and just go through it. App can do much better. It can take care of push notifications. It can take care of the communication between users and you. You can get them back to it by pinging their phone notifications. And it can use device camera. It can use device capabilities as Ionic can, Codoba can. So those things when you need that kind of interaction, you can go with a mobile app. When you don't need hardware interaction, you don't need push notifications. And you don't think like you wanna make lesser functionality on the app and you can just find the website. Then in that case, you can have a new Angular front end and an Angular website. Like that's my view of it. Everybody has their own views about it. And so in the same manner, you can actually feed your Ionic app. I can show you one app that I'm working on. So Ionic app is very similar. You define your controller, you define your HTML templates and you just use Ionic tool to compile it for iOS or Android framework. That's the only difference. And you use the directives, the theming element that Ionic provides to make it almost same as your responsive, in a form of a responsive design, but it's almost similar to the native elements of iOS and Android that you get. Let me try to find something. So, the server is closed. This is actually an Ionic app, which is, this app is actually fetching data from a CO code-based Drupal site. So this is Drupal site. It's fetching all the sessions for a particular conference and it has a couple of dates and stuff as well. So what we are doing, we are fetching that data and in Ionic, it gives us capability to use some sort of offline database in your device as well. When you need that, you do that. So here we are actually relying upon an offline database. We are using luke.js to have intermediate layer. We are saving data in luke and we are making calls to it. You can get a particular field out of it. You can sort data accordingly. It's a file-based database system like Mongo or anything. You can also use SQLite in your Codobabs, but a file-based system is more flexible. You can just save your JSON object into one go and just make a call. And so here, this is an Ionic app. This is using Material Design in Angular, NG Material Framework it is using. And you see nice wave animations and the things that you get to see. You can compile it for Android or your iOS devices and it will work as a Codo app or a native app out of the box. But yeah, so these things are all out of open source. This is the all nice animations you see, all tabs, these menu items. Everything you see that is part of Ionic or NG Angular project, the Angular Material Design product, sorry. So they are all used here and you can have very nice interactions, very nice 60 frame per second or like almost 60 frame per second animations in your mobile device as expected in any native app. So yeah, you can do that using this. Any other questions related to Ionic? Yes. From the beginning of the session, you told us as a content developer, we may have to face some problem to find out the GPS, which GPS, I have to modify or something, but I'm learning Drupal 8. So I saw Drupal 8 is using content operating, you know. So they have a nice debugging system. So if I run the debug system, so there are a lot of template commenting in our, if I inspect the browser, I can find out easily what should I modify. And how can everybody do this? My question is if maybe I heard a couple of days ago Ionic beta 2 reads and Ionic 2 beta using Angular 2. Right. So you're showing us maybe Angular 1. Yeah. So as a new, with Varsha, should I choose? Should I go with Ionic 2 and Angular 2? Okay. I was waiting for the part where you actually come to the question. Okay. I have another question. Yes. How can we get the original mobile app.apk file? Or for iOS? Okay. Air phone. All right. So there are two questions. The first question is you should go with Ionic 1 or Ionic 2. For now, I'll say go with Ionic 1 because that is only the production ready environment that they have. And it's using Angular 1.3 or 1.4 now, and which is fine for now. I think, I don't think like a lot of people are using Angular 2.x. There's a huge learning curve between Angular 1 and Angular 2, first of all. Yeah. So I haven't jumped through that curve either yet. I'm like more towards React than Angular, with Angular 2.x, like you better be with React, which is very similar. React and Angular 2.x is kind of where the direction they're heading towards. That's definitely future and great. But for now, I will suggest personally, Angular 1.x, 1.4 or something, and Ionic 1, which is stable, and where all the support is around, you are new to it. Personally, like me, I can still figure out the things, but a new developer will face a lot of hassle in Angular 2 finding those answers and Ionic 2.x answers, both of them. And the other question, like where the bills go. So Ionic is a NPM package that you install, and then you can just write in your project, Ionic run Android, that will run it in your Android device. And when you Ionic build, Android, Ionic build iOS, that will just create you the bills, build files for you. Yeah, you get that in the build folder, as any code over project. Yeah. Yes, yes. So have you used any code over project in past? Never. Okay. So code. Yeah. And build them. Right. In the build folder, you will have the bills. You read a little bit about Cordova, you will get to it. So it uses all the same export elements as Cordova app. And in the build folder, in your Ionic app, you have all the bills under iOS and Android folders. You get the build file. APK or whatever the iOS file is. We still have like two minutes left, I guess. And progressive decoupling, one person was asking. So, okay, we'll take questions in a minute. Really, we will go over time with the questions. We'll cover the slides first. So progressive decoupling, that's amazing way. I think that's great too. Progressive decoupling, if you have a page where you need a lot of elements which you require to update quickly or you want to build out search functionality out of a long list, but you want to push it as an Angular block into the page. Then you can definitely use the Drupal block framework to build that particular Angular piece, and that way you can do progressive decoupling. And I think that is great. The heavy elements which requires a lot of API calls, I prefer they should be decoupled. For example, like if you have a huge news website and the top section loads up a different kind of news from different sources, also based upon location, also based upon user interest. So all those sections could be, in that particular page could be loaded by a progressive decoupling as an Angular block in Drupal, and the rest of the page can still render as a normal page. So in that, in those kind of scenarios where you don't want to go completely Ionic or Angular, and you want to stay in your Drupal environment, but still want to use some fancy widgets that you can build, that in those parts, progressive decoupling is really important. Better for business sites. For example, thousands of user clicks are happening every second. It is better for business sites because they will be loaded on the browser. The block will be loaded, the data will be loaded on the browser. It won't take time on the server side to render it and then send HTML. So that part will be, page will fast much loader. That particular block can load later on. But the HTML that we are providing via Drupal that can first load and show the data all on the page. So the heavy sections of the site can be like this. And the other tools I wanted to refer to like React and Amber, they are pretty good. React is pretty good for building websites too. That is more where the whole world is leaning towards because you can actually compile the HTML on the servers and then just serve your HTML pages using React.js. So that is something to be considered. And that is very hard to do in Angular 1.x for sure. There is a whole hack layer that you have to put on it to get to that. But React gives you isomorphism, isomorphic JavaScript applications out of the box. And Amber is again great. That is an JS framework based upon Angular. And there are a couple of other tools in the market. I just wanted to really discuss Angular and how you can have quickly a new website out of it. And use the advanced frameworks, advanced tools to do it. And if you like my session, please evaluate on Drupal.org. If you don't like it, no need to evaluate. And thank you very much. Yes? No, I was just referring. You should not make a HTTP get request inside your controller. I showed that controller part so that you can see where I am referring my scope.blogs or scope. My scope variable was referred directly into the data. So I said that that part should go into factories. That is the best practice I heard. So there are MVC, model, view, and controller. So it's kind of like MVVC. So there is a view for definite late. Then there is a view-based controller. So controllers are actually feeding data to my views. So that part is actually aligned towards my making data for my view. And then the whole in the back end, I'm defining my services to generalize the rest output. So those services can be used anywhere else wherever required in the project. Not just in that particular controller. If I want to fetch that particular block and render it as a block on my home page, the block section. I can just refer to my service. And I can just get the blog item and put it in a blog on my home page after that. Makes sense? All right. Thank you very much. And I'm Sumit Kataria. And Sumit came on Twitter, or Drupal.org. You can find me like that. And questions we already done. No need to go back to the plan.