 Welcome. Good evening everyone. PrimeNG. It is a leading U.A. communal library for Angular 2. Is it anybody aware about PrimeNG? Anyone using PrimeNG here? Or Angular 2? Are you using any competent libraries? We will see what is PrimeNG first of all. About me, I am Sudhir. I am a full stack developer and consultant. I am a core team member of PrimeFazers and extensions open source projects. I am an author for multiple books as well. I am a technical reviewer for a few books. I am a trainer as well. This is about me. Then we will go to Azenda. First of all, we will see what is this PrimeNG and what are the features it is going to provide and why we need to choose this PrimeNG. And we will see some of the quick start also how to develop this PrimeNG application. And then at the end we will see what are the other products we are going to get with this PrimeWolf other than this PrimeNG. It is a sibling of PrimeFazers, the most popular JS of communal library. If you are from Java background, if you know about JS, then obviously you might know about PrimeFazers. Actually, PrimeFazers will provide more than 100 rich U.A. widgets. Other than that, it will provide themes as well. You can grab the themes and you can change the theme at any time. If you want to use it for different clients, you can use the different themes. And at the same time, you can get layouts also. So you don't need to develop the page. Just get the layout and you can start the application. So it got around 60 premier clients as well, big clients other than the open source. So considering this successful PrimeNG started around one year back, exactly one year back and that current release is 2.0, why we need to choose PrimeNG? In the recent years, there is a big revolution in web and mobile development. So most of the projects are trying to move to single page applications. So considering this, so many frameworks came into the picture, AngularJS, Angular2, React, Polymer, VueJS. But at the same time, you can't develop full application with plain frameworks itself. So we need a component libraries. If you have component libraries, just get the components from the showcase or anywhere. Then you can develop the project with a quick span of time. Actually, Angular2 was released three months back, October or November. When it was an alpha stage or beta stage, this PrimeNG started. At that time, we saw that TypeScript is the better option compared to JavaScript and . and it will provide all the features, type system and everything. So considering this, PrimeNG started in January in 2016, as of now, there are around 80 plus components. If you compare with other component libraries, you might see maybe 10, 20, like that. And if you want to use some other components, you need to go to some other component library. If you take all these components are open-sourced, unlike some of the component libraries like KendoEI and Vimjo, there you have to pay $900 per developer license. And one more thing, if you don't want to use component libraries, we know about HTML, JavaScript and CSS. It's easy to learn, but it's very difficult to maintain. So in the future, you can't maintain that kind of code and all. And so considering this, we better go to component libraries. And this PrimeNG, it's not in alpha or beta stage. It is complete and production ready. It is used by many clients as well. And apart from these components, there are themes as well, 16 plus themes. So you can get them from the library directly and there are some of the premium themes as well. So there you can get additional support. Actually, these three themes are created from jQuery. So if you use jQuery, it will be good certain amount, certain part of the time. But if you use professional sketch based designing themes on top, it will give you the great look. So you can get the premium themes as well, because it is requested by some of the clients. And there is a good support from the community, from the forums, blogs, GitHub and everywhere, just like in PrimeFaces. So people know about PrimeFaces. So many of the clients migrated to this PrimeNG. What Angular team says about PrimeNG? Brought from Google, is a director at Google and Angular. Within one month of development, he recognized about this PrimeNG. And it is mentioned in Angular conferences as well. And now this PrimeNG is a sponsor in Angular Bs and ng conferences as well. What Angular develops are thinking once you are using PrimeNG. You don't want to go to some other component libraries. And you don't want to use application with only Angular 2. Because we want to create an application within a month, years. We don't want to wait for longer time and deliver it to the client. By that time, some other technology will come. And our business won't be there, first of all. What are the technologies used in this PrimeNG? Here, you can see all the latest technologies, HTML5, CSS3 and SAS for pre-compiler. And it provides accessibility support also for screen readers and keyboard support. And AOT support as well. Ahead of time compilation, this will improve the performance actually, Angular applications. It will compile the application in the compile time itself, not in the run time. So, the initial payload will be good. And at the same time, it will reduce the download size also. Because you don't need to add separate compiler. In the run time itself, you will get it. And also, it will provide the security as well. So, there is no chance of injections. So, it will prevent all these security problems as well. Because of this run time compilation, sorry, in compile time compilation. So, you don't need to wait the compilation in the run time. And then, CLI support as well, it will provide. With this CLI support, you can create the PrimeNG application within two minutes as well. Just like in Angular CLI, the same support will be there in PrimeNG. And Google Material Design. And we saw that there are 16 free themes and some of the premium themes as well. There, you can provide the, there you can get this Google Material Design. Now, most of the applications are based on this Google Material Design. So, this also can be provided. And image sprites and font awesome icons. Image sprites, it will include, for example, if you have 100 images, all that 100 images will be clubbed into single image. Due to this, number of server requests will be reduced. So, you can make a single request instead of 100 requests. So, that also supported along with font awesome icons. These font awesome icons, there are around 500 icons. With these 500 icons, all these icons will be used in across the components. And the next, webpack and system.js modular setups. Okay. Now, you want to use PrimeNG, but you don't know how to do that setup and all. You don't want to configure all the libraries, dependencies and all. Considering this, there are setup projects as well in PrimeNG for both webpack and system.js. Just go to that repo, just clone it and you can start it directly. So, within two minutes, you don't need to do any configuration. If you want to do any Angular and PrimeNG application, just get that and start that and you can add whatever the components you want. You can get the components from the showcase directly. And then some of the standards used across these components. CSS over JS. If you use more JS, then it will cause change detection in Angular context. So, it will cost, it will cost the performance. Considering these, most of the time, it is being used with CSS. Wherever it is possible, JS is reduced and CSS is used. So, it will improve the performance. All these technologies and standards are used in PrimeNG. And these are some of the, one of the layout from PrimeNG. Here, you can get whatever the design you want and along with these free themes, you can get these layouts as well. And this graph will show the progress of PrimeNG. In the last month, there are around 40 to 45,000 downloads out there. It's very rare for one year project. These are some of the premium clients for PrimeNG. Mercedes, Ericsson, Fox Network, and there are so many other clients as well. These are just premium clients only. There are some other companies are using just as a open source. What next in 2017? Okay, already we have 80 plus components. Then, the next plan is for this 2017, creating new components like spreadsheet, color picker, and timeline. There are some of the components also there for this 2017. And more focus is on performance as well. For each component, they are going to test on each component, how much time it is going to take, and what are the technologies we are going to use to improve the performance. All those things going to be considered. Along with this, accessibility will be improved for screen readers, keyboard support, all those things. And RTL support is also supported because some of the clients are asking for RTL support, right to left. Yeah, we will see one quick setup how we can do that. Actually, we have three setups, one for CLI and other two for webpack and system.js. Just we need to grab it from GitHub repo. Then we just need to install, just NPM install on that terminal. Then you can run the project. That's it. Then we will go to the demo. Here are the major things are you need to remember. If you know about Angular 2. Here we need to remember only four files. One is main.ts. These four bootstrapping the application and app-model.ts. Here you need to provide all the modules you want to use. Actually, these prime engine components are divided into multiple categories like form components, data components, file upload components, charts, that kind of. It is divided into multiple modules. So you just need to import all those modules in this file. And then the main thing is app component. Here we will provide the component instance. In this example, I'm going to take data table component for cloud operation. And template URL is this file. This is the HTML file. In this HTML file, we are going to add our prime engine components. Here you can see that data table component. Here in this data table component, we need to provide all the attributes and even binding and property binding. This is what about everything in Angular 2 applications. Property binding, even binding, and attributes. That's it. Here if you take, here we are providing selection as well. Single selection, single row selection. And then selection two way binding. Here we are going to send that whatever the selected object from the UI to the backend. And row selection. This is the event, even binding. And other features you can provide with paginator equal to true. Then you will get the paginator. That's it. And number of rows also you can provide. And responsive. Actually all these Angular prime engine components are responsive. Not only for web applications, it can be used for mobile applications as well. It is tested in all kinds of mobile and what is that? Tabs. It is tested across the devices. Not just for desktop mobile applications or desktop and web applications. So here we can see that all these features we will provide with attributes. And for example, for the sorting, we just need to provide sortable binding. Sortable equal to true. Now we will run this. Actually I installed all the dependencies. So directly I will go with start. Here we can see that variable component with just five lines of code. You can get this variable component. Here you can see that sorting feature and pagination. And you can see the row selection as well. Here we are trying, we can add delete. We can do all the crowd operations. And if you want to delete, you can delete that as well. So all these crowd operations we can provide with this single, I mean five lines of code for this data table. We don't need any landing curve for this because there is a lot of documentation for this prime engine. So you just, you can grab it from the showcase, then you can use it in your applications. Now we will go to that presentation. And if you want to see all the components, you can go to the showcase. Actually it is not displayed properly here. All the components are divided into multiple categories. For example, I will go to charts. I'm not sure what is the problem with this. Okay. So these are the sum of the charts. And you can find out all the components as well. We are not going into that. And if you want to change the themes, you can try it out later because I have not able to find out that themes drop down. So we can change the theme and entire web page look and feel will be changed. So there are 16 themes available. Okay. I'm not using Angular 2. Then what should I need to do with this prime engine? So I'm using React or Polymer or something else. So considering this prime tech team started a prime React as well this year. So they are going to provide the same number of components like 100 plus components on React world also. And there's a plan for Polymer and Vue.js as well. Because other tools as well are that much popular. So there's a plan for other component libraries as well. Yeah. That's it about prime engine. So you can better go through this showcase. So then you will get all the components available. You don't need to go for any other component libraries. Any questions? So why would someone use this over that when it's officially released? Angular material, official material library. Yeah. Angular material is there. But as of now, how many components are there in the material? I think there will be around maybe 20? Yeah, that's it. But here you can get 80 plus components. And if you go to that project, you can see around 1500 stars for this GitHub project within one year. And if you compare with, you can compare with all the Angular EO component libraries. And it's not just providing the EO component libraries, but it provides the themes and layouts as well. So you can change the themes at any time for different clients also. And we don't need to pay for anything. And if you want any new component, you can just raise a GitHub request. Then you can get it easily. So there is more support from the community. Thank you.