 Okey, mari kita mulakan. Jadi, siapa yang sudah menggunakan HP.NET Core? Experimental. Experimental. Okey, saya juga sebenarnya. Ya. Jadi, ini adalah eksperimental. Jadi, kalau ada sesuatu yang salah dengan apa yang saya lakukan, maaf, awak boleh membantu saya. Jadi, kita bersama-sama, serius. Rule No. 1. Jangan berubah sebelum pembentangan. Jadi, saya hanya berubah sebelum pembentangan. Ia berubah selama setiap hari. Untuk menghubungi pembentangan yang membuat begini, pembentangan pembentangan. Mereka berkata, oh, ini hanya menggunakan pembentangan. Oh, okey. Saya tidak tahu. Jadi, ya, semuanya okey. Mari kita mulakan. Jadi, perkara pertama yang saya ingin berkongsi dengan anda, HP.NET 5 itu mati. Maksudnya, tidak hanya menghubungi pembentangan, hanya menghubungi pembentangan untuk HP.NET Core. Jadi, ada banyak perubahan. Jadi, jika anda menikmati pembentangan HP.NET, ini bukan Microsoft. Apabila saya katakan pembentangan HP.NET Core, ini pembentangan pembentangan. Ini pembentangan yang ada di GitHub. Jadi, saya tidak akan bercakap tentang pembentangan pembentangan. Tidak. Untuk saya, tidak. Saya hanya akan bercakap tentang pembentangan pembentangan. Jadi, mereka menghubungi pembentangan dan kemudian mereka mengubungi sesuatu seperti pembentangan. Untuk membuatnya sama seperti, jika anda adalah pembentangan Ruby, anda adalah pembentangan HP, anda adalah pembentangan Note, tentu saja. Apabila anda menggunakan pembentangan HP.NET, ia sepatutnya sepatutnya sama. Ia tidak seperti, pembentangan HP.NET adalah cerita yang berlainan dan pembentangan pembentangan web yang berlainan. Jadi, mereka membuatnya sama. Sebenarnya, ia sepatutnya sama. Yang berlainan hanya pada kode C-Sharp. Tetapi, seperti contoh, kode struktur, kode file struktur, ia berlainan. Sangat berlainan. Okey. Jadi, saya akan bercakap tentang pembentangan pembentangan, pembentangan pembentangan dan pembentangan. Jadi, pembentangan pembentangan adalah pembentangan yang biasanya apabila anda membuat pembentangan pembentangan. Sekarang, dalam pembentangan visual atau dalam ekosistem Microsoft, kita menggunakan apa? Pembentangan baru, bukan? Jadi, ya, pembentangan itu berubah. Ia berubah. Jadi, kita menggunakan sekarang pembentangan pembentangan. Okey. Tetapi, kita masih mempunyai pembentangan baru, tetapi ia hanya untuk DLL, untuk pembentangan pembentangan. Bukan untuk pembentangan pembentangan. Dan kemudian, pembentangan pembentangan. Pembentangan pembentangan adalah untuk membentang pembentangan dan pembentangan sendiri. Jadi, jadikan seperti ini. Sebelumnya, apabila anda membuat pembentangan ASP.NET, semuanya dalam pembentangan Microsoft, file MSBuild. Anda tidak dapat membuat pembentangan. Anda tidak dapat mengubahnya. Anda mengubah salah satu pembentangan. Itu saja. Jadi, pembentangan pembentangan adalah separat. Sebelumnya, saya patut beritahu yang kita gunakan sebenarnya. Dan yang terakhir adalah pembentangan. Banyak pembentangan sekarang, pembentangan pembentangan. Anda dapat pergi ke gallery studio visual. Anda dapat menambah di studio visual atau anda dapat menambah hanya menggunakan pembentangan. Seperti APD Get jika anda menggunakan Linux atau MacOS. Okey. Pertama, saya akan bercakap tentang apa itu? Ya. Jadi, pembentangan pembentangan. Saya akan menunjukkan kepada anda nanti. Okey. Ini adalah pembentangan yang kecil. Ini hanya seperti 5 pembentangan. Jadi, pembentangan ini beritahu anda yang saya akan menunjukkan untuk demo. Jadi, pembentangan pembentangan adalah untuk pembentangan pembentangan. Seperti pembentangan. Sebenarnya, apabila anda ingin pembentangan pembentangan atau jQuery, anda menggunakan pembentangan baru, bukan? Apa yang akan berlaku jika anda mengubah dan ia hilang? Ia sangat keras dengan visual studio. Jadi, projek anda sangat keras dengan visual studio. Jadi, dengan pembentangan ini, jika ada pembentangan baru, kita akan menunjukkan seperti ini. JQuery mengubah atau Angular mengubah. Mereka tidak menggunakan pembentangan baru. Mereka menggunakan pembentangan baru. Jadi, kenapa kita menggunakan pembentangan baru? Sebab itu, pembentangan pembentangan pembentangan baru akan mengubah. Jadi, yang saya akan menunjukkan nanti adalah menggunakan pembentangan baru. Yang lain adalah pembentangan pembentangan baru. Jadi, pembentangan pembentangan baru adalah seperti pembentangan MS, tetapi yang ini adalah untuk proses pembentangan sebelum mereka mengubah pembentangan pembentangan baru seperti ini. Sebelumnya, di ASP.NET pembentangan bahkan pembentangan CSS atau menggunakan javascript ia membutuhkan kode c-sharp untuk melakukannya. Kenapa? Kita tidak perlukan itu. Ia hanya menggunakan pembentangan normal CSS untuk menggunakan c-sharp. Tetapi, pembentangan pembentangan normal orang menggunakan pembentangan pembentangan seperti gula, gula untuk menggunakan pembentangan itu. Kemudian, selepas itu, anda dapat menghubung. Jadi, di awal pembentangan pembentangan pembentangan ini yang saya tahu, mereka sangat pengetahuan. Bagaimana membuat ia berhasil dengan pembentangan pembentangan pembentangan? Kerana pembentangan pembentangan pembentangan bukan pembentangan, bukan IDE. Anda dapat mengubah atau membuat apa-apa dengannya. Jika hanya membuat pembentangan dan anda memuji, bukan IDE lagi. Anda dapat menggunakan pembentangan pembentangan atau membuat pembentangan pembentangan pembentangan. Jadi, mereka membuatnya di pembentangan pembentangan. Jadi, pembentangan pembentangan dapat bekerja dengan gula, gula sepanjangnya di awal pembentangan. Sebenarnya, anda hanya membuatnya. Saya akan menunjukkan kembali. Ini adalah sebuah magic. Jika anda tidak mencoba, itu bagus. Jika anda mencoba, saya tahu itu. Dan, ya, pembentangan itu adalah pembentangan pembentangan. Jadi, apabila anda memastikan Studio 2015, anda sebenarnya juga memastikan pembentangan pembentangan. Ia memastikan node.js di dalam. Jadi, pembentangan pembentangan meminta saya seperti ini. Jadi, ia tidak mempunyai pembentangan pembentangan? Tidak. Ia hanya membuat pembentangan pembentangan. Ia hanya membuat pembentangan. Bukan apa-apa yang membuat pembentangan. Anda masih mempunyai pembentangan pembentangan C sharp.net di belakang. Jadi, ini hanya untuk pembentangan pembentangan. Dan, mereka fikir seperti ini. Jadi, kita mempunyai pembentangan, semuanya. Kenapa kita melakukan itu? Jadi, pembentangan pembentangan pembentangan, pembentangan pembentangan. Jadi, mereka ingin membuat pembentangan ini pembentangan pembentangan pembentangan. Jadi, ia tidak seperti sesuatu yang Anda menambah, anda tahu. Ia tidak seperti orang yang membuat untuk anda. Ia adalah pembentangan pembentangan. Jadi, jika Anda memakai alat kebanyakan yang normal dan anda memakai alat kebanyakan, apa-apa yang anda tukar di alat kebanyakan, ia memrefleksikan alat kebanyakan. Apa-apa yang anda buat di alat kebanyakan, ia memrefleksikan alat yang di alat kebanyakan. Jika anda memperkenalkan, ia okey. Saya akan membuat demo dan anda akan melihat apa yang saya maksudkan. Okey. Dan kemudian, tiada alat kebanyakan yang spesifik. Semuanya. Tiada hubungan. You create this even using visual studio and then you copy the entire folder. You open in Linux or Mac, you still can develop ASP.NET. No need visual studio. Visual studio not required there. But the old one ASP.NET, you cannot. You have the solution file, you have the bunch of stuff. You remove something, error. You add something, you need to add in the project. But this one is not. So it's very open. And then extensible. Yes, extensible. So you can create your own process or you can create your own stuff tooling. It's a thousand of tooling for visual studio for web development now because of this. It's a visual studio 2015, nearly one year. But the tooling is already like you can just find in the visual studio gallery or you can go to GitHub and it's all open source. That's a good thing. And the last one, it's optional. It's optional. You can use it or you're not. So it's not like when you create a project, you must use this, you must use this. Remember the old ASP.NET? You must follow the MS build way. But this one is not, it's optional. You can even ties with GitHub. You can ties with, for example, like the team service, official studio team service or using TFS, team foundation server, the more enterprise one. Then you can use this kind of thing. So what we're going to do now is showing this. Note package manager, Bower, Grand CLI, Gop and Git. So any one of you doing full.NET framework before? Of course. Okay. And next is demo. Nice. This is what I love. Yes. Demo. Okay. Maybe before the demo, any question maybe? Anyone wants to ask something? No? Okay, good. So I'm going to open also my command line. So this visual studio command line. Let's make it smaller. And then this is visual studio. And I'm going to show you, this is, I just create one, which is the old ASP.NET just to share with you what is the difference. So I open this, I choose this one. Remember. And then when you click okay, there's an option. This is what I choose. So this is the file that you see now. Here, the solution, which is why I suddenly close that. So this is the file. So I'm going to show you what happened for the bundling. You see this bundling config is a C sharp. Look at this. Even for jQuery validate. Why on earth a jQuery file for client-side is doing in C sharp? The idea is like that. So this thing doesn't make sense. So this is the ASP.NET core. So they take that out. So for managing that kind like bundling, modernizer, even bootstrap. You see bootstrap. Just imagine if you want to change something for the bootstrap. What do you have to do? Recompile. You want to rebundle something. You have to recompile. Okay. That's the old way. That's the old ASP.NET. So the new ASP.NET is this. I'm going to create one. It doesn't matter. You don't have to choose this. You just choose this. Don't add source control yet. And this is the template. You already know this. So I'm going to create an empty template first. Empty template. And I'm going to open it and view it with storing packages. And let's go to the folder. Yeah, this is folder. I'm just going to copy this. Yep. So this is the entire project that you see. And this is the one that you see compared to this one. It's totally different. If you look at this one, you cannot just remove or delete file in here. It will not work. Okay. So this one is just a file folder. So what you see in here is actually only a file folder. Okay. In this laptop, in my laptop, I already install NPM. I already have NPM. Okay. So if you haven't installed NPM, you can... There's two ways. You just install Visual Studio or you install separately NPM. This is the node package manager. So if you go to the NPM. Yeah. NPM. Ya, this one. Okay. So you just download and install this for Windows. The other one that I already install is... Oh, ya, not yet. One by one. Because I said to you, I'm going to demo this. So put it like this. The one that I do in console is exactly the same if you do it in Linux or Mac. Okay. So this one I'm not going to... Actually, I have Linux in here but I'm not going to do it because it's the same. The command line is entirely the same. There's no different. Okay. Because we only see the command line. Okay. Let's start now. I'm going to add... because if you run this, you just a normal hello world kind of thing showing in here. Just going to make it fast. See this? The only hello world. Nothing fancy there. So I'm going to delete this. I'm going to use static file. You see this? You can... They know that you need to add this. That's why they call it IDE. And they edit the library automatically in here, which is the... Ya, actually you can remove this one. Later, I'll show you. So this is the static file that I use. And then I'm going to use app.usedefaultfiles. Here it is. Okay. So usedefaultfile is, for example, if you want to use the HTML or whatever default file you want. So this one, the www route is similar if you, for example, you create an express or you create a Ruby. There is a www route. So actually it's the same thing. Look at this on the right side here. And this is the file. Look it on the right side. I will create one file here. Look it on the right side. You see this? It's showing in here. Ya, just put it index lah. For example. What the hell is that? Okay. You see this? Index. Or if you delete in here, you will delete. And also it's gone in here. So it's a file. In the old hp.net, you cannot do that. When you delete and suddenly that's wiggly red line. So this is only a folder. You see this is the www route. It's only a folder. And this one is the folder. So I'm going to create one. There's two ways to create this. If you use the hp.net, sorry, if you use the official studio 2015 with the web tooling, you just can create shift f2. Just press shift f2 and you can create this. You just put where you want to create and then I just index.html. Okay. See they just create. You see that? In www route. The good thing is that for example you can do like this. Leap. Persempel. Ya, whatever. Persempel. Like site.less. Or. Ya, site.less. Persempel. You see they create the library folder directly. So you don't have to remember the old ways. You have to do like this. You do like this. And then you folder. And then you create the file one by one. Okay. So that's one thing. So to create html also currently well if you like editor then it's good. But if you use this anyone knows how to create the skeleton of html with only one line. Yes. You just html5 tab. Ya. So if you don't know this good. Use it. Okay. And how to create for example like Have you tried this? Have you tried this? Okay. So this is the different between IDE and editor. Okay. This is IDE. And the good thing is you see this one it will show you the intelligence. So the intelligence is even for Angular is available. Okay. So this is the different. So I'm just put something here. Okay. So now if I run this I should be able to see this in. Okay. Very simple. So I'm not going to talk about MVC here. So I'm just going to talk about the HP.NET Core the what tooling. So now how do how do we get the bootstrap? Let's say I want to use bootstrap. I want to use jQuery. Okay. So provisional what did you do? If you use the first one you go to NuGet. Remember? You go to this and then you go to the package manager you open the console and then install package jQuery. Is it? That's what you do, isn't it? And then you do like this and they will download all the entire jQuery. The problem with this there's no problem with this. The problem is every time jQuery updated this one is not. So one of the guy in Microsoft as far as I know his name is Scott Hanselman doing this. So if there's update in Bauer they convert it into NuGet package and then headache. You cannot do that over one time, two time, yes but you're like if the update is like every week then you did. So that's why we move they move it to Bauer. Just use Bauer. You know something like that. So let's use Bauer but this one is the web and this one is the project. There's two ways you can do this. First, you can do NPM install Bauer Global. You can just install this you do it in command line. If the internet is running you just record it. Or the other way you use the IDE. Like I said to you this one is following whatever changes in the open source. So you can do like this look at this. I will add new item Bauer. It's available. Bauer configuration file. Later, I'm going to use Gop file. Sorry. Gop. NPM. It's all there. And this one is automatic updated. Every time there's new stuff it will be here. So let's try Bauer first. You see what I'm talking you're going to see what's the different. So Bauer JSON. See what happened with the this one. Bauer JSON. Let's say you see the logo now it's available. And the good thing is for example like this one IntelliSense. So if you don't remember Bauer well there's two ways you buy the book or you print the PDF look what is the command. The other way the properties is just do like this. You'll see all the stuff and it's easy. So let's add what Bootstrap. Bootstrap. What you see there is pulling from Bauer. From the GitHub. Through Bauer server. Okay. So the same thing as you do like this. Bauer. Search. Bootstrap. Am I right? There. So you can choose. You want a command line you do like that. If you don't know which one. But this one in Visual Studio I can just do like this. Bootstrap. And they will okay this one forget to tell you this one still RC. Not final release okay. So sometimes I have to do like this to get the yeah I see. So I can get this. I can get this. I can get this. See what happen if I choose for example like look at this dependencies. Okay. I'm going to choose this to save. Yeah whatever. Just save it. Tabify. Whatever. See what happen. You see they pull everything from Bauer. Okay. And then include the one that's the dependencies. Okay. So this one if there's new update you just update or you just stick with that. No more C sharp. You see there's no C sharp in there. It's only this one. There's no C sharp. It's nothing to be C sharp. It's just a Bauer file. So if this file you move it into Linux or Mac you still can do it. You still can do it. Okay. Okay. So for example this one is jQuery is pulling on depend. Sorry. This bootstrap depend on this jQuery. Yeah. As far as I know NPM will pull it the latest one with that dependencies because the dependencies related to that one. So that's why sometimes in NPM you see a lot of in folder. You go inside inside inside. It's too many folder as far as I know also actually they try to make it efficient. So it's not like 200 folders to the right. It's like too many index. Okay. So it's supposed to be like that. It's supposed to be like only one jQuery for the entire system personally. JQuery also in this Bauer configuration file is an version but you want for example you can open Bauer and jQuery is the lamp here and you can specify which version you want from example. Yeah. If you know the version you can you can just you can specify jQuery here also. Yeah. You can also do like this jQuery and then you choose the version. Yeah. But they always show the latest one. So usually it's always the latest one. The rule is modern web development always update framework library. Okay. That's the rule. There's no such thing like for example okay. I'm using the modern browser the new Chrome the new edge whatever but you're using the old jQuery. That's not as far as I know in modern web development you have to use the latest one. Always get the latest one. This one is I prefer this one. So if I save or I do update they will get the latest one. Okay. But yeah. Or even for example Angular. Yeah. Angular available here because it's it's the same thing. The same thing that the PHP developer use it Ruby developer use it it's the same thing. Okay. So what you what you use in here you see they add restoring is like that. Now can I do in here can because the the bower file is already available. Okay. They will do the same. So for example like bower install jQuery. Okay. They will install it for you. They even added in the file. Oh, it's already validated. Okay. Yeah. They even add inside the bower jason file. So even you're opening visual studio you still can use the command line because like I said to you there's no visual studio specific. It's separate. Okay. There is the ASP.net core and this is the web tooling for bower. Okay. Of course you can add more than this. Okay. Okay. Any question before I continue with the next tooling. Yup. Is it currently supported in Azure? Yes. Azure. Okay. It's already going to be supported. Web apps. This one is something that to do with Azure actually. Yeah. Because this one is only for web development. Oh. That one is the project. You just right click and deploy. If you want to deploy to AWS you want to deploy to Google Cloud you just publish. Yeah. But currently I only have this Azure. Yeah. If you install the for example like the other cloud and then you will see in here you see in cloud explorer you will be able to see in here. Yeah. And it's available. You just go for example AWS you will see everything the service of AWS. All you have to do is just publish there. That's it. You have to choose the VM. Or yeah. Remember ASP.NET Core you can run anywhere. Okay. Yesterday. Not yesterday. Two days ago I tried the new Nano server. Have you heard that? Nano server is the minimum version super super minimum version of Windows server. Yeah. So the size the it's very there's no UI. There's no UI. Everything is command line and it's very small. Huh? As far as now it's the same almost the same like 3BSD or yeah. Very small. The footprint is very small. The CPU usage is like 1% less than 1% the memory very small. So that one is for clustering you have multiple it's for containers actually the same. The same thing. They call it Nano server. So you can test this in Nano server and you can download. Just download create a Hyper-V whatever you use and then you install it's a Windows server but it's they call it Nano server. Okay. Nano server. In Linux of course I also use Linux I use a lot of Linux. Okay. Now you already have this and then how are you going to use it for example you want to use the bootstrap you already have the bootstrap here you see this they put it in here okay now how are you going to use it in the when you do compiling for example for example like this when I compile before I compile the C sharp I want to compile the boot the CSS my CSS file I want to compile I want to minify my JavaScript or aglify in something like that so yeah that's why we use the ground or ground okay so well you need to bring the package in because it's a tooling some developer maybe ask okay official studio is a tool why we have a tooling it's a web tooling tooling for web for example you already have a big machine but sometimes you need a screwdriver to do it okay you have a big machine to create a lot of machinery but there's some item that you need a screwdriver to do it just put it like that so how to do that is very easy number one all you have to do just add the package the NPM to bring the gulp in so this project has no tooling web tooling yet will this go to the when you publish to a cloud or your server no it's only the C sharp part this one is the tooling for the project it's nothing to do with the project so whatever you see in here it's not going to go to the server no okay let's add new item and then we call it package yeah here it is package and I get this you see I get it yesterday and I was freaking out because previously when I I do several times doing demo for example it was supposed to be okay but suddenly I saw this oh my god and this is NPM is this NPM why it's happening and you see this if you go to the you know where this thing came from like for example like if I type something in here they show this you know where it came from not only for visual studio I'll show you where it's from here yep it's from here I know not a lot of developer knows this actually it's from here it's open source yeah grant anything that you type the intelligence come from here and this is open source in the github you just contribute if you think that oh this one is wrong then change so that one the package Jason is came from this there pulling directly from the internet okay no when you install this video they have the default one if you have internet they will try to pull the latest one just put it like that okay so this is actually a bug they told me to just use yes they say just use lower case and the error is gone oh okay so this is the template for the package see what I'm going to do type gold look at that again pull from npm this one is pull from npm okay so if you don't know what is it you just type it they will tell you there's two ways you can again you can npm install gold I think we have to use minis g minis g or not here yeah just use minis g yeah so the same thing like you do this okay the same thing there this is the power of node.js that's why I love it so much seriously you just imagine if you don't have this you have to find the file download remember the old ways unzip using rar you just imagine that so for for the the developer web developer that never use the open source this one something new actually it's not it's very old but it's getting better getting better okay so if you use it for development using other I try PHP I try Ruby this one is like standard thing is a normal thing okay but it's getting better so gop let's see what's version I'm gonna take this see again on the dependency side you see there's no npm here empty let's save this look at that look at that they pull gop so the same thing like I did this exactly the same thing okay but that one is in such visual studio the different is in console you see something like this and you have to know what you want to do in visual studio you can trial up type this something like that even gop less for example look at that it's available because it's the same thing save it okay I remember there's who wants to know Angular 2 you're the one who okay I'm still learning actually so apparently it's not from Bower must be npm install so it's actually in here Angular 2 is in here see it's not from Bower Angular 1 is from yeah Angular the Angular 1st Angular is Bower but Angular 2 you need to this and when you install this they will install a lot of stuff inside so when I try that okay I have to admit fail yeah because I'm still learning no it's not fail it's working but it's not a good subject for me to share with you maybe SingaporeJS is the best place for yeah yeah next time maybe I will try there but for Angular 2 you have to use npm to install it's not Bower this one can but Angular 2 this one you need to use npm to install because only Microsoft will support a subject like intelligence here but you can install it I can do like this I thought it's the same thing apparently it's not this is not Angular 2 yeah this is not Angular 2 see it's Angular 1 so it's different I don't know maybe I'm wrong you can share to me if yeah so yeah this is the correct one now it's beta 7 okay and it's not easy to set up because you need to know a bunch of stuff as well well anyway let's try this now I already have the gaub and the gaub actually what I need is only gaub all I have to do is now configure this for example I want to have a separate folder for my production or for my testing or whatever so that bootstrap I will copy to that folder before it compiles before I publish you know something like that so the idea is using gaub so how to do that you can using you can use command line or again right click you see when I do like this on the right side I'm not doing inside the content I'm using the project file okay add new item gaub look at that yes they even put this helping hand so let's delete this yeah so the tooling is in if you use visual studio for example not visual studio code if you still learning see what I did you see that I just tap double tap they will create it for you or if you want to just create the task okay so what is this this is a node.js is a node.js is a JavaScript so the tooling for ASP.NET Core is using JavaScript you see wow okay okay now let's copy let's say for example I want to copy I want to copy my file so how to do this anyone know how to copy file yes gaub.source so the source is bootstrap disk okay so the source is dub dub dub root lib bootstrap disk .css let's write css sorry and then because it's using piping look at this look at the intelligence so this is the method it's like you do coding in C sharp this is the JavaScript method using node but it has intelligence and the good thing is the intelligence is not just like that look at that there is an explanation okay so this is not only like autocomplete something no it's not like that so this really really understand oh you're going to do this so the same like normal intelligence so they give you suggestions you can even debug this okay so stream what is the stream there's no stream gaub.destination and the folder i'm just going to create this put it in here and i'm going to put it my css delete all is that all yeah so this one is telling you copy this part to this part so you can now execute this copy by using the task runner so what is task runner if you go to the view here where is it ah here it is okay hello refresh ah here it is sorry sir so if i double click this i will execute this see what happen in here you see in the there is no css there is no css sorry there is no css folder so i'm going to create css folder in here and then copy the entire css to this folder so what i'm going to do is just double click this they will execute and they will copy if i can refresh this how do i refresh this supposed to be showing here did i make a mistake it's empty okay there is no error okay what did i do wrong hmm shouldn't there destination be a folder name not a oh you are right thank you yep save double click yes thank you sir yeah okay so that's how you do it now how you tell visual studio hey visual studio before you compile my c sharp before you compile the things that is run on the server and this is for the web for the client side do something so all you have to do just go to the binding choose which one before build after build or clean up clean up meaning that you just want to clean this folder for example there is no folder usually they use a clean first do this do that you know something like that so you just put this before build still running before build okay this is what happen if it is cannot be oh sorry i have to put in here before build so if i compile the c sharp is a normal compiling i just compile this rebuild see what happen so they compile the gulp first copy the entire css and then they compile the c sharp ahhh that's how you do it now that's how you do it okay so this one if you want to change something you don't have to go to the c sharp no need to change the c sharp code anything that is already run in the server all you have to do just change the gulp file for not the gulp the bower or the package jason and then all you have to do just execute it in command line for example bower or gulp okay i can do like this for example because it's already there i can do like this gulp copy then it will execute the same thing it's on command line the same thing okay so this is how you do it now in ASP.NET Core the tooling confused no no confused okay good okay so the last thing for example okay this one anyone can do it what happen if for example i want a more little bit more complex i want to agrify i want to minimize my css you know something like that well the old ways you go to the c sharp you go to the bundle and do something with it okay in here you just use the gulp so you just do like this number one because in here we already have gulp less see what happen if i do like this i'm going to add another call it less for example require if you don't know sorry note then you need to learn it see what happen if i do like this you see that they know you have this module inside your project so they show it they show it the gulp less okay if you remove the gulp less you save it you cannot see that anymore okay so that's very powerful intelligence now let's do this gulp sorry gulp task okay less let's do same thing before that see less over here i'm going to add my own library here call it less sorry anybody don't know what is less okay currently in css for example if you want to change something you need to find the item let's say for example you want to change color color that's similar so less it's like the derivative of the css so they give you the ability to for example properties so you can execute in the css in the css way okay so if you are not using less well we still can use css but css is the final product it's like the finish compile product something like that so if you want to change something you have to find it let's say you for example you have you have a css telling you the color red you have like how many element how many class 10 of them red but you want to change all of them to blue what did you do if css you have to change one by one you have to change which one is red which one is red one by one one by one so using less you can replace that with variables you replace that with variables all you have to do just go to the less file and then you change the blue and then you compile using the gulp it becomes css okay let's do that good okay let's create that one add look at this less available in visual studio sas less it's available in visual studio okay it's here it's all here let's name it variables variables there delete this let's make how to make this some color okay who's expert in less and then what I'm going to do is to create another one call it side which is already here let's do that so let's say body background background color and then oh I have to import you can do like this actually you can you see you can oh I don't know that hmm okay cool no seriously when this happen maybe after the update nice okay cool you can do like this because this is a less file import ah look at that they know you have another less file in there just import variables and in here you change to not working so must be wrong which one this one no this one is wrong ya suddenly I become blank can anyone help me what is how to make a variable in less Michael maybe you can help I'm just sad ya ya ah ya as far as memory is using ya whether you bring it whether you bring it or just put it on the website and I'm sure you'll find out ya ya okay ya less less CSS less CSS variables yes yes CSS variables disrupt disruptive innovation not this one this CSS 3 ya ah this CSS 3 ya sorry suddenly become blank but I tried before ya I tried before not this one anyway anyway so this one then it's supposed to be some color hehehe no because I remember or maybe it's a bug no it's supposed to be when I use the ad it will show the variable from that this oh maybe I have to say first no no undeclared variables okay so that means my variable is wrong maybe just like that no oh okay what do you use no I tried Paul any idea no no I did it I did it I just forgot how to add variable in less because in my in my time I use CSS ya okay less CSS.org less less CSS.org CSS.org oops too many yes no no this is an example here you see ya oh okay I did oh maybe you're right we need to put some color okay it's not working oh this one this is a semicolon yes red back to red yes that's what I mean ya okay exactly okay that's cool wow okay now let's do the because if you use less HTML you understand the browser like what is that you need to make it as a CSS okay so let's do this let's do this come on where's the file here it is so all I have to do is now less before the destination less dot oh no no like this yes and then ah okay ya I remember this then you pipe yep compress am I right? wrong another pipe do I need another pipe? okay ya it makes sense pipe yep makes sense but you need to close another ya let's check it out yes see wow okay just to prove is it working I just want to prove myself sorry why it's not showing compress did I it's supposed to be like this isn't it why it's showing now okay okay put it like this maybe it's RC ya always bring the editor don't bring mas ya okay let's try this CSS so the output will be from lip less yes and the output will be ya so this one will be before another pipe hmm you need to close one break it's before another pipe oh okay okay ya sorry ya maybe this one let's try again no it's not working okay let's try this okay let's try this double click look at this supposed to be have we supposed to have put it just make it clear site only okay because site is going to use the variables so technically they will pull ya it's working ya cool no but I remember when I type compress it's showing the ya I don't know ya maybe it's because the update no serious I remember when I type compress then I know there is a compress in the variable so now I get this site less so if I just put this in the header pull in here boom done so I get site CSS and then what bootstrap boom done okay and if we run it of course it's going to be like a normal yes that's it okay okay so the final part is actually if you open the project which the one that is already created as a template is this one so this one is a complete example of what the one that we already did but this one is MVC so it's a complete set of this kind of thing so if you open the new template in a speedonet core no more shock because you already know oh this is how they do it okay so this is the speedonet core you see they all have the gulp file which is inside is this wow they use aglify web root everything this all is no JS file okay there's nothing got to do with your C sharp so this one is only a web tooling tooling to create stuff so if you open the task runner you open the task runner here you'll see the bunch of clean JS clean CSS where is it here it is yeah there there clean okay so you can bind this for example like clean clean before build which one you want to build you want to minimize or you don't want to minimize because you're in for example for testing only you don't want to minimize for example so you can tell visual studio do this do this do this with gulp I was amazed that they managed to marriage the node JS in visual studio so when I saw this like wow this is amazing something that that is never done before in Microsoft as far as I know yeah so yeah that's all I got actually because actually the second one Ujwal is not showing so that's all I got supposed to have one hour I try to make it like one hour and a half so anyway if you have any questions maybe yeah I try to answer if I don't know then share with someone yeah any questions no what is the future for these technologies now what do you see there are some types of technology now okay in terms of technology this is what I see but take it personally even I work in Microsoft please take it personally Microsoft is moving to the right way previously maybe is left right now he's yeah he's supposed to be like this yeah that's my personal opinion okay and it is it is for example like they acquire Xamarin for C sharp something like that they're going to make something okay so as far as I know this is the right way to create web web development is for everyone web is for everyone yeah I don't know as far as I know the future is all in your hand like it's not good to your desktop it's all in your laptop or laptop or the yeah exactly yeah according if you see that one software going to develop each like application which can be used or any platform yes that's an area you think that this thing can be done or there are other software market which challenge that you can develop application which can be used or any platform well this one already open source you can create your own for example yeah yeah so this one already open it's open source so this one one of my friend is using Mac computer Mac laptop for doing this exactly the same but the the worst nightmare for them they said to me there's no visual studio so they have to know what you are doing like the comment line anything that I do in visual studio here so visual studio with this npm is just a proxy so actually what I did is actually executing this in behind they executing this in behind visual studio executed yeah that's why someone is asking for example if there's new tooling npm will visual studio cannot be used anymore or we have to wait for new visual studio no need you just upgrade the npm which is easy npm install npm minis G yeah they will get you the latest one that's it so every time you use the visual studio it will be the latest one because this one is only tooling there's nothing to do with this C sharp so even if you look at the html look at this html any C sharp code here this one only any C sharp you see any C sharp code in here this is razor but you see any C sharp code only ok on the top that one that one is for telling you you can still use the old way but in the new way asp.net core there's no more C sharp inside the html yeah there's no more so what happen if the file suddenly goes out and you open it in the browser they just open because there's no code there's no business code in here so what they do is they replace so call it the tech helper which is this one for example like ok that one is not a good example here tech helper yeah this is a valid html 5 element so if you run it in the browser the browser just read it but don't care about it because browser is a fault tolerant ok so you can put and you can throw anything but don't do that please ok don't just throw garbage inside the html file ok but the thing is now you can point this environment so the C sharp the visual studio knows that this environment at behind is actually a C sharp code is a C sharp code yeah so this one is for example like asp fallback this is a C sharp code so call it tech helper there is a code behind it you can create your own tech helper so your html will be pure html 5 pure no more it's not a mix between language and between language and the html no more so in the asp.net core html html ok C sharp javascript javascript yeah something like that yeah but the thing is you still can use the old way you still can that's why they put this like this one this is the old way remember yeah I don't know the other than that the future that is what I observe yeah because I'm not part of the developer team I try to follow the community the asp.net core and then my email is like one day is like 100, 200 and then I stop I stop following the team it's too many too many to follow yeah yeah any more question maybe you want to ask something before yeah C sharp can Xamarin can whatever yeah yes just one question noJS yes how would you use that in a.net project for yourself if you're a developer where would noJS come into fiction for the maybe you'd like to better thing in a.net project say MVC and everything where would you actually use noJS the other one is only for tooling if you look at this this tooling is all using noJS stuff yeah on a personal level oh yeah I use express yeah that one is for because I love JavaScript because I use JavaScript since let's keep it's not just new it's since yeah noJS as the back end like so far for for whole B yes but for production I haven't do it because that time all my customers when I haven't worked in Microsoft is asking for back end using either PHP or HP.net that time yeah yes in US maybe Ruby as far as I know yeah but for most enterprise as far as I know enterprise HP.net they always ask HP.net that's far as I know am I correct yeah isn't it yeah okay that's what I know yeah but like I said to you this is what I share to you is not about wants to be the best no it's not that they are all all good tooling okay everything is good as long as you can develop web easily in any platform that is done that's good so now HP.net it's part of that part of the ecosystem yeah anyone can do some I know that they already develop using Linux and really really for real stuff real world stuff is not testing anymore yeah okay any more question no yes so can you use this tooling for other project like regular C-sharp non-ASP for C-sharp actually you can use it yeah this one but the I mean the real usage for project I still don't don't know what what is the benefit of yeah build actions yeah using yes because usually like right now you should go into the project file and use ML or something before build so if you can use something like docks to do some updating for example so program if you want to do the nugget package after build yeah so could you use this tasks for other project I haven't tried yeah we should try that yeah for building some javascript because for example we're using about 3rd party javascript and we build one big javascript and we from our web portal we have only one link for one javascript and for one CSS and we use galt to create one this big bundle for example for web project it's a normal situation because a lot of people use galt web it's a lot of packages now we have webpack we have a lot of tools for creating some bundles CSS and node package manager is like 150,000 it's a lot of stuff so you can use it for I don't know but for Node.js itself it's very powerful I tell you very powerful you can use NPM for example tools share some environment between development for example NPM package.json file contains a lot of I don't know a lot of reference and for example when your developer join to a team he downloaded some sources from source control and then he run for example NPM update and all these third party packages for example a lot of jQuery Angular React or something like this download it install it locally on his computer we use for example package.json to we don't store these third party components in our source control we store it only our code but for example for this third party to set up this dev environment we use this package.json file and when the our new member downloaded sub-source control first he need to run NPM update and then a lot of these packages download it from github and install it locally on his machine you you need to share with us you need to share with us some bit because it's very easy it's very convenient yeah okay and the other thing that you can use for example if you want to use visual studio is for example Apache Codoba it's a fully it's a fully JavaScript everything is JavaScript I also write but I cannot confirm just write from some news for example like for application for application that is in mobile phone like in iPhone or Windows 4 and Android not much people using app actually they use browser they are more or more people except like Facebook, Twitter then use app games they use apps but other than that they use browser that's why browser is the JavaScript and HTML that's why that's what I know that's why Microsoft hiding there because they focus on there like the chakra core the Microsoft Edge because maybe the data saying like that people that use mobile like me I use more browsing instead of using app that's me but some people maybe using app but how many app you can put inside the mobile phone that's why Apache Codoba is very good in that so you can create for example put it like this you create full JavaScript, HTML Apache Codoba fully responsive exactly for browser you don't have to change anything HTML5 web standard run it good in here and then you just can you can convert it into Windows phone app Android app or iOS app just like that so in using so called maybe you know this have you heard Manifold.js Yes this is very powerful I tell you you already have a website convert into app using this you don't have to do anything as long as your web is running responsive just use this NPM install Manifold then you can convert anything into iOS and and and behind that it's using Apache Codoba engine so they convert that into an an app something like that yeah so that's very powerful Manifold.js the other one that maybe you want to do for example for doing like this is a Vorolan.js I love this one you have if you haven't tried this I tell you try this Vorolan.js so this one is the same like similar similar like browser sync this one but it's you can do like that but this one is it's like what do you call it it's like you can test in multiple browser even the browser is not there maybe you have a friend that is outside in US and you want to trust the browser together and you'll see what happen for example I use iPhone I use desktop some of you using and then you can test together and you can see and you can update and go back in here or go back the result to the browser so this one is a server so you just install it's open source and PM again it's an PM yeah and then you just type Vorolan the server is running then you just connect anything that you do it will synchronize it will synchronize everywhere in the entire browser yeah okay so any more questions maybe before I close yeah yes and it's full TypeScript even the there's no controller in Angular 2 it's different with Angular 1 but it's it's using TypeScript for the that one that one actually I don't know the answer seriously I don't know so maybe someone can help why TypeScript but I know that TypeScript is powerful but actually it's a JavaScript thing it's the same thing yeah and even we everyone says that but when you they're going back to the language it is closely follow the Chinese yeah so I'm little bit of stuff saying that okay are you going to a JavaScript route or are you going back to the language and which direction your dog okay Tapi transkripsi hanya transkripsi, bukan? Am I correct? It's only transkripsi, ya. Ya, but you can run transkripsi. From GALP, for example. Ya. So it's only a transkripsi. Actually at the end it's JavaScript. You can target like ES5, ES6, for example. Ya. It's only a transkripsi. So it's only helping like less. Less. At the end it's ESS. Ya. Or using SAS, for example. It's similar. Similar. Very similar. TypeScript. Ya. You cannot run it in the browser. You cannot. You have to run it as a JavaScript. Then it will run in browser. Ya. TypeScript is like that. So it's only like, what do you call it? Helping hand for JavaScript. Ya. Adding this, adding that. But make it easy, you know. Because to make it a structure. Ya. And I know that one is they are heavily used in enterprise development. Which is, for example, like they have a 1000 developer around the world using the visual studio team service doing this, doing that. They say TypeScript is more manageable. Ya. Ya. Ya. Ya. Ya. Well, I don't know that whether it becomes like a standard as a de facto for, ya, I don't know. Or maybe, maybe the next JavaScript, ECMAS script, I don't know. They will include that kind of, that understand, I don't know. That's why I don't know. We, ya. Ya. You should ask Tip Oxley, SingaporeJS. He's the expert. Seriously. Ya. He's the one who knows everything regarding JavaScript. Ya. You've been to SingaporeJS? You should come. Ya. Seriously. You should come. Ya. That's the place to learn JavaScript. Serius. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. Ya. It's very easy to write some code in TypeScript. To me, guys try to use it. To me, TypeScript is a JavaScript thing. It's just like that. It's like Babel.js, Babel. Babel, Babel, Babel. Babel. Babel.js. Or the other one is what? Babel, it's only the JavaScript role. Yeah. It's only the tools that help some JavaScript to another JavaScript. Similar. So, for example, you want to transfer to ES6 from ES5, then you can use Babel. You can. But if your browser already supports ES6, then no need. You just use the ES6. Fully ES6. More powerful. Vanilla JavaScript. It's more fast. Yeah. I love vanilla JavaScript. I don't like to use a lot of framework. I like vanilla. Yeah, I don't know why. Yeah. Coffee script. Coffee script. Yeah. I think it's because of my time, that time when I use, first time I use JavaScript. Everything is vanilla. There's no framework that time. 1997. That's the first time I play around with JavaScript. Yeah. So, that's why, yeah. Yep. Okay. Any more question? Yes. As we don't know, it's using a different kind of seller, right? A different kind of seller. Ah, can we just add reference to preview seller? For.NET Core? Yeah. Here's the difference, yeah. Between the.NET framework and.NET Core. It's very simple. The.NET framework has Windows component in it. It's very ties with Windows. So, the.NET, when it becomes open source, they remove all this stuff. So, now the.NET Core, it's only the core for.NET, which is the compiler, the CLR, and now the new one, maybe if you know, it's the so-called RT.NET RT. The.NET Runtime. So, it's a machine code. You do not need to install any.NET. So, for example, I create a.NET Core, and then I compile native. So, you only have to do just that.NET. What is the file? CS? native. You don't need.NET to install. You can run in Mac. You can run in Linux. You don't need it to install, like, for example, Java. You need to install Runtime. This one don't need. It's a machine code, fully machine code, run by itself. Yeah. So, put it like this. You have a.NET framework code, you run it without.NET framework. So, actually in this community, last time I challenged before, like six months ago. If this happened, not six months ago, when we heard about the open source.NET, can someone create WPF, exactly similar WPF, like in the Windows. But I can compile in Linux and Mac, and it will run, exactly like in Windows. Okay. The Windows different, the button different, is that's number two. Okay. The same like Xamarin. But that one, if Singapore can do that, the.NET. Wow. Any WPF that you already create in Windows, then you can just compile and run in Linux. Compile run in Mac, for example. That will be a beautiful thing. Yeah. So, .NET Core is removing the Windows part. Yeah. That's what I know. Yeah. Okay. So, anyone want to take the talent? I tell you, you can give me rich, if you can do that. You just imagine WPF file, the one that we already create for Windows, perfectly enterprise application desktop, which is, you see, sometimes you go to the airport and you see the error, Windows error, I know that, this one is using WPF. But you can compile with .NET Core and we generate the machine code for Linux or for Mac. Just imagine that. Wow. So, there's no more, there's no more boundary that .NET must be only Windows. There's no more boundary. You can run anywhere. And .NET native already prove that. You just go to .NET CLI, still version, not even one. Still, they're still doing it. The community still doing it. Plus the .NET team from Microsoft, they're doing it to create that CLI. But you can create the native. I already tried. So, the difference is the file a little bit bigger, but you do not need .NET to run it. No need. It's just a normal file. It's like executable file. Stand alone. Because we try to compile something and it's very difficult to run, for example in macOS. Because there are restrictions. Yes. Currently it's still like that. For example, we cannot create complex than that because it's only very... But the target that I know from the .NET team is they're going to make it like that. Native. So, you can choose. You can use the CLR meaning that you install the .NET, you run the .NET. Or you compile as native. You don't need any .NET. You just run it. It's like C++ compile, output machine code. Just like that. Exactly. Oh, yes, of course. But it's straight way. It's the same code. One code for all. Same. The same thing. You don't have to change anything. For example, this file, the one that I show it to you, I'm using Windows, isn't it? I can just bring to Linux and compile it. Exactly the same. Yeah. Exactly the same. You don't have to do anything exactly the same. And the command line. Okay. Last one before I close. It's this one. You need to install this. Minus G Yo Generator ASP.NET. Okay. This one is if you develop using Mac or Linux, then you need to install this. This is also open source. Okay. Yo man. So, yeah, let me show you just a little bit. So everything is in the node package. Okay. Now, I can do like this. Yo man, doctor. What is this? Something new. Okay. Just pretend to know what's going on. What is this? Okay. Still. So, this is going to pull the generator. Exactly like Express. You pull it and then you can create Express or PHP or Ruby, whatever. So, you can do like this. Yo ASP.NET. There. You can choose the one that exactly like in Visual Studio. The one that I show it to you. This one, the web application. This one. Just do like that. Put a name. Blah, blah, blah. There. You see? They create all. And all you have to do is DNU store, DNU build, DNX web. But this is the current one. So, the latest one will be.NET. There is no more DNU. There is no more DNX. It's just.NET. And you can compile as an itif. So, this one. Your website can be machine code. Without.NET. Just imagine that. Wah. I was waiting for that. Yeah. Engine X in. Can. This one can run. I already try that. Engine X. Anything. Apache run. This one is run. This one is like, what do you call it? It just run. Yeah, seriously. It's just run anywhere. I tried everywhere. It's like... Yeah, so far it's run everywhere. Yeah, I haven't found a place that any server is not run. Yeah. Of course, there's a way to... Yeah, it's not... You just go to docs.hp.net. Docs.hp.net. VNX. Latest. Yeah. And then you, for example... Ah, here. Installing has been identified on Linux. Now it's in the coordinate. And it's all in here. You see? In Ubuntu. Just do like this. Instruction.org. Yeah. Instruction.org. You need to do a lot of things to run something like this on Microsoft, for example, on Linux. What? Because it's not running. If you do all these steps, it's not running on Linux. Because there are a lot of... a lot of things that doesn't describe here, for example. You just take a workflow and try to... One exception by one, try to... Well, actually, I managed to make it run. Yeah, but we can do something like... Try to do something like a lap, for example, to run this. But, yeah, it's very difficult because it takes a lot of time to run something on Linux or on Microsoft, for example, because it's still an RC and a lot of... Changes. Yeah, I know. So just wait for the release version one. I think it will be built 2016. They will... Maybe they will announce in build. Yeah. Which is on what, April? Build 2016. Yeah. Okay. I think that's all. We already... Over then... Yeah. Over 9 p.m. Okay? So maybe any question you can drop. And if someone can do demo for the next month meet up, Angular 2. Seriously, I want to try it because it's not working for me. I have to try it. Yeah. But if someone can share next month, yeah, that will be good for us. Yeah. Angular 2 Yeah. Okay? Okay. Okay, that's all then. I would like to say thank you and see you next month. Okay? Yeah.