 So, I am going to share some information about AngularJS development with ES6, ES6 in Texas. So, I just want to know how many of you are already AngularJS developers, are you a developer, please? AngularJS, sorry, then I am going to bore you guys with AngularJS syntax and everything. So, because you are new, right, I think you heard about AngularJS already, so it's one of the lacks of libraries we have already on the client side. So, with AngularJS, it's very easy to build UIs and components which can be reused across your application. So, if you build one component, you can use it across any applications, you can share, put it as a bore component and use it in your other applications. So, that's one of the ppp of the Angular components. So, in this talk, I am going to show you some Angular component which has written in ES5 basically and then it will show you how can we modularize with ES6 as well as bundling all the stuff. So, this is my project structure and this is where my code is. Let me show you, we are running it. This is Angular 1 or 2? 1, not 5. 2, yeah, maybe I will present later. Let's find some Angular working guys. So, it's just a table component, so it has a simple base nation and because it is a component, you can use it anywhere. So, let's see a code. So, this is my table directive. So, we call components as directives in AngularJS and so this is the file which has all the component definition. So, I have some constants. So, Angular, it comes with a good separation of constants and basically dependency injection and all the MVVM pattern need to come to it. That makes your development very easy. So, these are the set of constants I have and then a service. This is a service which is giving me data back and then the actual directive definition. So, this is a very common directive definition. We see this in the AngularJS. We are asking it to restrict to element and we are replacing it with the directive template we are using in client side and this is the template URL. So, you can plug the HTML content which should be rendered at the runtime. So, that is the HTML template, it's the template URL part and this is the link where your actual task is being executed. All right. How is it doing that with the, it's telling you the type of the property? Sorry? How is it doing that with the, it's telling you the type of the property Visual Studio. How does it know? Okay. So, this results to your code is fully integrated with TypeScript. So, it's good with TypeScript development. So, that's the reason it's going. I haven't started that. I enabled that. So, this is the ES5 code. So, when I join here in my company, all my code is like this. So, when you have everything in one file, it's very hard to maintain it. In terms of finding out the issues, it's very difficult to look over the other files. So, I thought of introducing a modular system so that I can take out pieces which are unique with a separate file and then easy to maintain and then load it as well. So, that's where I started with ES6. So, other than ES6, we have different modular systems already in place like the required, that is the AMD format. And then, common JS, we have basically server-side modular loading. But I've chosen ES6 because ES6 is what upcoming modular system. And Angular 2, they're completely using ES6 syntax as a wrap-up TypeScript. TypeScript is like a combination of ES6 plus something comes with TypeScript. So, that's the reason I've chosen ES6 for modular system. And also started using some of the new features coming in ES6, like functions, error functions, and parameters, default parameters, rest parameters, everything. So, initial challenge was to set up the ES6 code. So, the existing project, how can it make sure it runs with ES6 code? So, we got to put some transpirations in place because as of today, browsers are not supporting ES6. So, but we want to get the benefit of ES6 syntax and all the stuff. So, because we don't want to change the job together at one time. So, let's start doing from today. So, by the time the browsers are ready, we have the code which can run browsers automatically. So, that's the reason I've chosen ES6. And let's see how the same component looks like in ES6 code. So, this table, this is the ES6 code I have written. And here, I have separated all the direct-tubes, service constant, everything is separated by it. So, with ES6, we can define everything as a class. I'm using the classes syntax from ES6. So, instead of a function, I can create my own class. And that class instance, I can pass it to the model system to create a direct-tube. So, that's what I'm doing here at the end. I'm creating a static class, static function. It's part of class ES6 syntax as well. And passing that instance back to the main file. That is a module. So, this is where all the pieces are coming together and combining as a component. So, these are our modules exposed from different files. I see. This is the config-helpful class. And this is the page-nation class. So, by following this classes syntax, it's very easy to convert to Angular 2 once they're ready, production ready. So, that's the reason. So, the best practices if we follow as today, it's easy to migrate to Angular 2. So, that's one of the reasons I'm choosing with the classes syntax here. So, that's about ES6 classes. And if you see most of the places, we can use, this is the arrow function I'm using. And then, similar way, we can have, this is weak map. This is a new type coming supported by ES6. So, that will basically reduce a lot of your code with smart syntax coming in ES6. All right? Why don't you do that? So, using the weak map there, why attach the config-help to the weak map as opposed to the instance? Yeah. So, the reason is that link function. So, we want to use services injected to the table class. It should be accessible inside the link function. So, it's like shares. That's the reason. So, otherwise, you'll not have control on any of these objects. So, that's the reason. And what else is here? So, this is the ES6 code. And how do we run this code in the browsers as of today? So, for that, let's see the index.html. So, in the index.html, I'm using the browser.js. Browser.js is a library from Babel. Babel is a third-party library or a task we have to transpile ES6 code back to ES5. So, when it comes to transpiling, we can do it in the browser as well as at the build time. And I say browsers, in the local development, we don't want a run task to run for a long time and transfer it back to ES5. So, we wanted to let it happen in the browser very quickly. So, that's the reason. Babel, browser.js for the browser transpilation. And I'm using System.js. System.js is another library. I think I'm throwing a lot of names here. So, System.js is a module loader, a universal module loader, they are saying. So, the modules written in the required JS syntax are common JS or ES6 syntax. So, any of these modules can be loaded through System.js. So, System.js is like a wrapper on top of all these module loaders. So, I'm using System.js. And if you are aware, Angular 2 is also coming with System.js as a module loader. So, it's like we are trying to be as close as Angular 2. That's the reason. And then here, I'm initially triggering the main.js file where it starts the bootstrapping process. Angular bootstrapping. From there, it will trace through all the libraries or files we needed and it loads into the browser. So, if you see main.js. So, this is where your bootstrapping application, Angular.bootstrapping. It's called giving the element document body and then giving the main module name. So, that is my demo table. And in my demo table, I have dependency to my actual table component. So, I don't need to bother to load about the table. This module is from the table module. And I have given that as a dependency for my demo module. So, demo module will load the actual module as well as. The similar way, we will have multiple trees and all the trees will get connected to one main file. So, that will start the bootstrapping process. So, that's about the System.js module loading. And let's run it in browser and see how it works. If you are not aware of Grunt, Grunt is a task runner. It's very famous in client-side development. So, there are thousands of libraries written and published on the web. You can take any of the tasks and run as part of your Grunt tasks. So, every task can do some specific work for like converting HTML to JS file, JS content or concatenating, copying files. So, for every purpose, we have a Grunt task. So, that's where we are using Grunt here. So, I'm running it on a different port. So, this is the same content. There's no change. But let's see how the files are being loaded. So, this is my client library. If you see, every file has another transpiled file here. So, that's where the transpiration is happening. See, the browser.js, which is from the bubble. So, that is transpiling and putting another transpiled file. This is the ES6 syntax. And it comes to ES5. It comes with a lot of code. You don't need to be worried about that. It works. And so, this is the same with all the files. Whatever is written in ES6 to get another transpiled file. And when it comes to debugging, you can put breakpoints on your ES6 code directly and make sure all your debugging is working fine. So, it just gets on its, and you can debug it there. So, this is about ES6 translation. And so, we have the component ready. And we got to deploy this component. So, because this is written on the client, all the JavaScript, we have to... And also, all the code is written, split into multiple files, and we got to bundle all of them. So, we don't want to deploy all these 100 files into server. We got to bundle it together and make a single file. So, for that, I'm using system bundle. So, that is also from system.js family. So, this is the transpiled task I have written. And here, we have a bubble. As I mentioned before, bubble comes with the build time task as well. So, this is the task I have configured here. And I'm asking bubble to watch all these files or take all these files and transcribe them back to a dist folder. So, I'm running only the transpiled task. It should generate a dist folder. Just remove just now. Actually, it runs a little quick, but it's taking time. So, because it is a build time, it's okay to take me a few seconds instead of happening it in the browser. So, I think they're optimizing it in the bundling process as well because there are a lot of complaints from the bubble side and the time taken by transpiration. Okay. I don't mean to be rude or anything. Just wondering how many dependencies do you have just for a table? Yes. So, this is a project, right? So, one component I have as of now. So, I'm trying to show the overall workflow of your project development. So, I started with the table. Later, you can add thousands of features to it. So, basically, the project is set up with this structure we have as of discussion, right? So, we have the transpilation. We have bundling process. We have the compression and then zipping. Everything is done. So, once you pull this code from the GitHub, you can keep on adding your code and new features and then it applied. So, it's like a production ready. So, the setup is there. So, I wanted to just give you the hints of both. Yeah, the client-side development will be like that. You have to pull a lot of libraries, dependencies. Like, for example, a project I'm working on, it's got a total of 2,159 packages. All right. Is it working? Yeah. Like, these days, it's normal to have 1,000 packages. That's a few. This is, I could probably, I could probably get more if I wanted. Okay. How did you find out about this project? I don't know. It's the end of this. Right. This is, I think, transpired. Transpiration over. So, the ES5 that is being generated from bubble that looks a little different from what you write every day because it comes with object-oriented notations there is a lot of logic added extra or it's kind of wrapping on top of your ES5. So, that's the difference. But you'll get used to it once you start writing before debugging it in ES5. So, I'm basically saying, run-release, it's like preparing for the deployment. So, while it's happening, any questions on ES6 and Angular 2? Your amount of code that's in ES6 is probably quite minimal compared to the rest of Angular. Does it make any difference on what's delivered to the client? So, the performance-wise? Performance-wise, there's no difference because it's all the same code, but only the benefit you get in the development plane. You're talking about the workload, right? Yeah, yeah. I'm always wary of setting more stuff to the client. As soon as you start transpiling, it's going to impact some description. But then, the amount that you're actually writing yourself compared to libraries is probably quite small. And Jesus. Yeah, I think so. Probably doesn't actually make any difference. There's actually a problem at the moment. There's no decent... AgriFlight doesn't work with ES6. But AgriFlight's awesome. But, yeah, it won't work. So, if you've got an arrow function in there or something, AgriFlight is just like an arrow. So, if you're trying to target, like, modern browsers or modern... There's a branch for it, though. So, once you transfer it back to ES5, it should work. Yes, that's right. Yeah, it should magnify ES5. Looks like it's not working. So, what I'm trying to do in Runtral is basically bundling all this stuff. So, to show the bundler files, so this is where I'm asking a system.js bundler to bundle my whole code. So, this is my main.js. I'm asking to bundle this. And bundle the file will be moved to this location. So, one file is going to aggregate. And then we'll just zip it and apply. So, that's it.