Using WebAssembly to Build Fast & Secure Web Apps | Eric Simons | ng-conf 2021

[Music] hi i'm eric simons i'm the co-founder and ceo of stack blitz if you have never used stackblitz before it's an online ide for rapid web development so if you've ever used something like codepen um think of the like codepen on steroids you have like full npm support you can import packages you actually have webpack loaders running and we've actually got something pretty cool coming out in q2 that actually lets you run all of node.js inside of your browser so for the first time ever you're going to actually be able to run entire node.js tool chains like graphql servers all these amazing new innovations coming out inside of the browser security sandbox and it's incredibly fast and super easy to use and so today i want to do is i'm going to talk to you about stacklit's enterprise which is in short all the power of stack blitz just behind your firewall it's just a very simple kubernetes based installer so it runs again on-prem or in your vpc behind your vpn it integrates with your sso providers like sample-based and it can connect to your internal artifactory or nexus registry for npm i can also connect to bitbucket gitlab and github for doing any git operations you want to do so a lot of companies that we work with they use stack blitz to accelerate and efficiently scale their organizations and the way that they do this is they actually will embed stack blitz in their documentation so it's very popular for design systems to have live examples right because you want to disseminate this information to make it really easy for people to adopt your design system and some great examples of projects that use stack blitz that you can actually check out uh one i believe this uh rxgs um i believe this was actually made by netflix and you can actually see this here all the examples in the rxj rxjs docs actually use stack lists for them so if you click on them you can actually see this is running and i can uh run this code and you see when i click it's doing the doing the actions in the code so rxjs is one of the projects that uses us in the in the public world another one is from the google chrome team with uh lit element they actually use stack blitz for live examples helping people get familiar with the lit element api surface so you can just go in here and start typing and see it automatically reload so it provides users a really fast way to get familiar with what this thing is before they have to download it makes it really easy for debugging as well because a lot of teams will have you know a team of uh especially in enterprise companies there'll be maybe a team of 10 20 people or something that are working on the design system or a library and they're responsible for it but they just get overloaded with bug reports right a lot of bugs aren't even bugs it's just people who didn't actually uh uh who are confused right and so what's nice about forcing people to have a stack blitz link or recommending people to have a stack blitz link with every uh issue that they're filing in jira or get out or whatever have you is that it gives you an instant environment to open it up and see first of all is this even a bug and second of all have an instant environment where you can actually debug what is going wrong with this thing and so over in the public market we do a lot of work with google and the angular team makes heavy use of stack blitz so if i were to click on the issues tab here and create a new issue file a bug report one of the first things that they ask for is give us a minimal reproduction with stack puts they they won't even look at bugs anymore that that do not have a stock blitz link and they've had over 40 thousand issues filed and stacked has been a key part of how they manage that workload um and both internally at google and other companies stackblitz is is empowering them to to efficiently scale their development organizations and finally this is a great environment just for rapidly prototyping ideas you know if you want people to try out building something with your design framework every stackblitz url is actually publicly hosted so you can just share it with anyone you want they can open it up so you can loop designers into the mix or other key stakeholders in your projects and say hey does this look good and you can actually you know make changes hit save and they'll see it instantly reflected anywhere they are in the world as long as they're on your company vpn uh they'll be able to access it so uh now for for the fun stuff this is coming out in q2 um stackwoods is about to get a lot more powerful for the past year we've been working really hard with the chrome team and some other folks uh to bring the first operating system made in webassembly to the browser and it's less than the megabyte and it boots up and boots up node.js in your browser in a couple hundred milliseconds it's it's kind of remarkable and it kind of blows the lid off of what you can do with a tool like stack blitz because if you look at other tools in the market like code spaces or even like things like code sandbox when you want to run server code like a graphql server or apollo or nexjs they actually have to spin up a real server to do that work and if that's behind your firewall that's a huge security risk that's some stuff that your devops teams are going to have to manage and make sure they stay up and that if those things don't get infected because they're arbitrarily executing code it's a total nightmare and by being able to actually run containers node.js containers in your browser it gets all the same benefits and what makes things like this the small things like codepen great it's incredibly fast there's no latency it actually works entirely offline uh the second thing is it's very very secure it's actually more secure than your own local environment because all the code execution is happening within the chrome security sandbox so it can't break out and download things to your computer and install a daemon or something it's if something's going wrong you can just command w your tab boom it goes away so let's go ahead and let's start by opening up a brand new nest js application and for those who aren't familiar an sjs is one of the most popular frameworks for building backend applications in the javascript ecosystem and especially in angular because it also uses typescript and dependency injection and a lot of shared uh technical decisions there and this is stackbust.com i have a special feature flag that you can get too and i'm just going to go and open this and this is happening really fast but you're going to notice a big thing here you've got a terminal this is the first time you're seeing terminal in stack blitz and already it has mounted our operating system done a full npm install and booted this nest.js application in our browser right so it's kind of walk you through what just happened there in the past you know a couple of seconds i'm going to go ahead and just refresh this page it's going to start this process over uh boom operating system booted boom install just finished up the npm modules this is a fresh install in every page reload right and now it's just executing our nesgis server and it starts up it's pretty incredible way faster than a local machine could even do this right now a really cool thing about what's going on here is every on every page though we're building that container up from the ground up and so what that means is you know how many times have you had to have to like rm rf your node modules because something gets wacky in there right this eliminates that problem so to demonstrate this uh in this uh uh cli right now i can actually nest is installed and that's why it's green so i can hit enter and uh nest will execute right what happens if something gets messed up and you know let's i'm just gonna go ahead and rm rf by node modules and so if i ls-l it's not in there anymore so if i type nest it shouldn't work and it doesn't uh oh what do i do well with our web container technology here backing this i can refresh this entire development environment the same way i do a web application just go ahead and hit the refresh button and it's going to bring me back to a fresh clean state every single time so can you imagine you know having this sort of experience not just for live examples but for day-to-day development someone wants to review a branch you know you don't want to pull that down and uh you know stash your changes and install the stuff right this gives you reproducible environments like we've never seen before which is pretty amazing it doesn't stop there what what makes this an actually even better environment than your own local machine is that we can actually now use the same dev tools that we use to debug our front applications to actually debug our back end application so to kind of show you an example of what i'm talking about here i'm going to go ahead and open this up in a new window and so what's going on here is we've actually mapped the node.js server api to the service worker api so this is actually just a service worker over here doing its thing and um on this page uh what i'm going to do is instead of just returning this get hello i'm going to go through a debugger statement here and i need to kill the server because i'm gonna have to restart it in order to do this and uh but actually real quick i'm gonna change this to say i want to change the uh this to say hello and g conf because i want just to be visually different so i'm going to restart the server what should happen right we have a debugger statement that in this file that's going to handle the request that comes in but it shouldn't actually resolve the request until we step through the debugger right you know on local if you had if you want to connect to the node.js debugger it's kind of a huge pain you know really uh not a great experience but with uh stackless v2 because we're running node.js in your browser just open up devtools boom we're live debugging a node.js application here this request you can see over here this request is hanging because uh i'm going to need to step through this just like any other javascript code i you know when i'm building a frontend app i can go and inspect what's going on here what are all the variables what's in the scope right i can see what the request is the incoming message and you know let me go and step through it and keep keep your eye over here as i step through this request right boom you see it goes through so yeah this is kind of mind mind bending right but this is just debugging at a whole another level for node.js applications that that simply hasn't been possible before and you don't have to install anything you don't have to install a chrome extension to make this work the devtools already built into your browser so it's pretty amazing so it really blows the lid off of the the types of you know uh applications that you can build with stack blitz you can use this for building your storybook you know ui components you can use for building out your nesjs end apis you use this for another example i've got off the bat because it's so fast to boot these servers i'm just going to open up one up right now i wasn't planning on showing this but hey why not graphql server let's go ahead and boot this up right um look at that already booted just simple line to javascript here i can execute this uh this command uh let me go ahead i'm going to close this up i'll change you know really simple i can come in i can change to say again hello ng conf hit save and then uh i'll go ahead and just type node server.js i think that's the command to restart the server here so it's re-running on port 4000 so if i go ahead and hit the run button there you go all right so again a whole bunch of different types of applications are now possible to run in this not just for live prototyping and debugging but for actually real development and to give you kind of the ultimate example of this i'm gonna go ahead um this is something that the chrome team recently shipped that we've integrated with and um they've been awesome kind of buckle up this one's this this might kind of mess with your mind a little bit it certainly does with ours but one of the cool things they ship recently is this fs api which gives web applications the ability to request read and write access to portions of your file system and so to do this we've actually got this button here i can actually open up a project on my local machine uh i do want this this is an angular cli project on my local computer and i i want to point out there is no node modules folder here i have not done an npm install on my computer so for all intents and purposes i don't have node on my computer i don't have npm in my computer it doesn't matter i'm gonna go ahead and just open up this folder and because node comes in with stack blitz v2 and mkim comes in with stack with v2 it's just going to open up this folder and it's going to go ahead and do a full npm install just like you saw before it's going to boot up five seconds for the entire angular cli to come in and it's starting up the angular cli now in our browser right it's actually starting up you know ng serve it's pretty amazing and what's even cooler is if i want to make a change to this file i can actually save these changes back down to my local file system okay and so what's amazing about this right is if i let's say i uh i've got want to use vs code for us for some reason i can actually just go ahead and pull vs code over here i've got the same folder pulled up okay and i'm going to open up the app folder the app.component and i want to change this title to sb app take a look what happens when i change this over in this file by the way again no no module so this thing's uh throwing an error and this is real vs code so not to be confused between stack blitz versus vs code because they're looking at a heck of a lot similar now right so i'm gonna go ahead and change this code over here and this by the way correlates to this sb app running thing here okay so i'm going to change this to say uh ng conf and hit save and i come back here and you see you see it actually pops up in the editor i'm going to do you know vice versa engine comp is awesome and hit save and you'll actually see that it pops up and i'm going to go ahead and just close the preview for a second here but you can see it actually pops up between these two things so if i just type some gibberish this is syncing oop actually i mean here let's just to show it this is syncing all my code whether it's valid or not between these two editors right um and so what's cool is that that means i'm going to close vs code now what that means is that anywhere you go you now have node.js and npm with you in your browser and it can connect and have read and write access to your local file system which is pretty incredible and so if i go ahead and just open this back up you can actually see that the new version of this is is got what i wrote on my vs code running in pulled into the browser recompiled with node.js inside the browser the operating system inside the browser and served inside the browser right so you can kind of imagine this being amazing for onboarding new developers to your team something that would take weeks to set up now they can oauth with bitbucket or github or whatever you use internally and they're up and running right so there's a lot of amazing new applications that become possible with this and uh that's all we have time for today i think but we are opening up a alpha testing group and if you'd like to participate and try this out and give us your feedback and work with our core team on this go ahead and over to stackblitz.com v2 fill out the form and we'd love to have you be a part of this this is going to be rolling out to our enterprise customers later this year so if you want to be one of the first companies in the world to actually use this behind your firewall or new v2 technology um you also go fill out our v2 form but also head over to stackblitz.com enterprise because you can actually use stacklit's enterprise today with all the great functionality that use that the angular team is using it for a whole bunch of other companies and this is going to be just an update that we ship that you pull down and it'll just work so you can actually get that process started today and actually start using the stack blitz current functionality to supercharge your development and debugging workflows and when v2 rolls out on-prem it'll be available to you and you can pull it in there so i really appreciate all the support and love over the past year's ngcomp we're really excited to be here we've been working a long time on this we really hope that you're gonna like it um can't wait to hear your feedback thanks so much have a good one oh are you all still there well um i mean i guess uh oh i guess we do have enough time we might uh we might have one more thing to show you we actually have some great partners over at xbm you all might be familiar with angular boot camp and the other services they provide they've made something pretty cool that if you are in the atlassian ecosystem one you should check them out but two they made an add-on for confluence that's pretty amazing and integrates stack blitz in a way that wasn't possible before so i'm gonna let's go pull up their video here so we see we're in confluence and uh normally it'd be difficult to embed a stack blitz but with this add-on it makes it really easy you just copy and paste the editor url and you can pass in all the options for embedding stack blitzes that normally you'd have to go to the stack what's your eye to do these things then i don't even know how you would get it into confluence but this makes it incredibly easy you just save it you can see it shows up right there when it ready you can go ahead and just hit the publish button and it just works and you can share this link with anyone the embed shows up and it's really a great experience for you and so if you have a design system you're trying to share live examples this brings it into the same workflows that your entire team is already using it's not some other thing they have to go and check out they can just come in here and you can add comments and talk about the code without having to send them to another url and it's entirely in line so feel free to give us a shout at enterprisestacklist.com or go to stackblitz.com enterprise and we're looking forward to chatting with you and with that this is actually the end of my presentation here at ngcom thank you so much for having us and uh looking forward to seeing all of you in person hopefully sooner rather than later

Channel: ng-conf

Views: 1,081

Rating: 4.2941175 out of 5

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, Javascript Tutorial, Programming Tutorial, Computer Programming, Google Angular, Google Programming

Id: ZZC1SVkdmBY

Length: 17min 35sec (1055 seconds)

Published: Wed Sep 15 2021