 So today we're going to be talking about Ionic moving to web components. We're super excited to be here especially kind of a late edition, so If you don't know what Ionic is we'll talk about that first, but before we do that a Little quick intro about ourselves. I am Max Lynch. I'm the co-founder and CEO of Ionic I'm also one of the co-creators of Ionic framework the open source project and I'm Adam Bradley lead developer of Ionic and also a co-creator of Ionic So really quickly if you're not familiar with Ionic Ionic is basically a cross-platform UI component kit Initially kind of focused on building native style apps for the app store So people used to call this they still do call it sometimes like bootstrap for mobile and if it's helpful to think think about it like that That's that's really what it is It's open source MIT licensed cross-platform UI kit So you can build iOS and Android apps. That's really kind of our bread and butter You can build universal windows platform apps, but increasingly People are building progressive web apps responsive web apps and electron apps all with the same code base So the right ones run anywhere a thing that's always been kind of elusive and people still laugh at a lot of our developers are Actually doing that today because it's just based on the web and the web runs pretty much everywhere So we're 100% based on web technology HTML 5 JavaScript CSS And if if if you're used to building mobile apps one thing people really like about a web approach Is it's just really easy to customize? CSS and HTML is one of the easiest things to style and so we're proud that we're based a hundred percent on web technology Ionics one of the top of the source projects on github and we've had millions of apps created Some you might use like Dow Jones market watch and untapped, which is a social network for people who like to drink beer And then one thing we're seeing a lot more of that. I'm really really excited about These big enterprise companies are starting to build a lot of apps internally and Ionic is is powering a lot of these So we're really really excited about that. They're starting to do their own mobile development And it's really great Finally, it's a real business behind Ionic We build services and tools for app development if you want to learn more about that check us out at ionic framework com So real quick We want to go over a brief history of kind of how we got here today and why Ionic and the decisions that we made Why is the way it is? so This is our original goal goes way back to when we first started that we really kind of wanted to focus on letting developers Focus on building their applications and not so much the details So in this case we want to be able to enable developers to just add a toggle not worry about how does the toggle work? How to add gestures what happens when it gets all the way to 50 pickles to the right or left rather? We just want the developer to worry about I want to add a toggle there because I'm focused on my own app So if you look back we started this in 2013 and Alex had a great talk earlier Kind of talking about the details of how difficult this was to do and I will I'll freely admit that in 2013 I had never heard of a thing called web component But what we were at was we were largely using jQuery and jQuery kind of was great But it also had required a lot of Kind of manual setup and things like that and Alex's talk did a really great job of showing that So it really wasn't the ideal solution so then we came across anger and anger directives and and personally I was blown away by it kind of was exactly what we were looking for so with anger directives We're able to make components and provide a large UI library to all of our users So that they could have this cool UI library pick and choose which components I want to use and build large applications with it But again meeting our first goal of letting developers build large applications And so we fell in love with anger jazz from the start But then also if you look at our very first commits We had a bindings directory and in that bindings directory. We had anger jazz Backbone Amber and jQuery and a few others were in there So we were kind of naive and kind of ambitious to think that well We'll just make a binding for all of them because it's got to be that easy, right within a week We quickly realized that's not gonna happen So we decided to stick with anger jazz But it was kind of a eye-opening for us like how difficult it is to build components for just one framework let alone Many of them and even if you were to fast forward today We would have had to build even another 50 more components or 50 more things to the frameworks So fast forward to today. I still love anger. I'm personally a huge fan of it I have nothing about the utmost respect for the core team and what they brought to the web development community But the reality is is that anger is not the only awesome framework right now and then we've moved from Which is the best framework Conversation to now which framework do you prefer because they're all actually in in reality They're all great So it kind of comes down to the team that's using or the developer of their choice of which framework they want to use So I think you can see where I'm going with this is that as Web components emerged as we realize It's actually a viable solution. We started a question It's like maybe this is trying to meet our original goal Maybe of what we wanted to do of kind of writing one component and having it work everywhere. So This is what you were here to talk about today. So that was kind of our journey to discovering web components and actually Considering them a viable option, but at the same time around this time progressive web apps really emerged on the scene and Considering ionics goal was really right once run anywhere Kind of a UI framework for all for building apps on all platforms It was obvious that we were gonna jump right in and embrace progressive web apps And our early experiments were actually really really disheartening for our team We initially work and still to this day like we we've focused on Cordova apps In the app store and on a court on a Cordova app all your code is Bundled next to your app in the same local domain. So there's no network latency There's no 3g to worry about and when we took that approach of building with a framework like Angular and bundling all our components together We were seeing really really bad results when it came to go into progressive web apps We're talking like 73 scores on lighthouse on 3d 3j emerging market tests 13 seconds time to interactive It's just not even usable and we were shipping like over a megabyte of code for the first view And and the worst part about this that Alex has mentioned a lot and it's totally true We couldn't solve it We hit an engineering wall our current our approach of bundling all these components up and then trying to pull them apart and do code splitting Once everything was already bundled together was just not working. We spent a lot of time We spent a lot of effort and frankly spent a lot of money trying to figure it out and we couldn't and so we kind of Took a step back and at the same time We had bet the the farm on Angular and what had happened in the front-end space is that frameworks really proliferated Angular we had a lot of usage, but so did react and so did view and so did ember You know, I'm sure if you asked individual developers of these frameworks They would pretend like it's the only game in town But if you look at the data, it's not at all true and so Ionic was looking at this fragmentation happening and saying well We're having issues with framework performance in general But if we want to support these other frameworks now we have to go and build bindings for each Individual framework it just wasn't really going to happen. And so we we felt like we were kind of stuck But then we we started experimenting with web components We started taking our angular components and pulling them out and porting them to vanilla web components And it was actually really really promising and it actually ported over really well from Angular 2 and I give the Angular API a lot of credit for Kind of being similar to web components And our first results were really really encouraging our 3g time to interactives were four to six times faster 2.78 seconds compared to 11 and 13 seconds before We were shipping 10 times less code Especially for the first view we're talking 39 kilobytes compared to 422 like that's a that's a really big difference And that was a highly optimized Angular Ionic 2 app and then we we we had a build step because we use typescript and it was considerably faster We're talking like 3.87 seconds for production builds compared to 50 seconds So not only was it faster loading Components, but the developer experience was better But we still felt like something was missing from these vanilla web components We really really love traditional frameworks and we think they've given developers some really great tools things like reactive data binding virtual DOM support and and kind of embrace of typescript And also some key innovations that we saw like react fiber where the the approach for performance Performance was moving from you know How quickly can I synchronously render 10,000 items to how can I help the browser not lock up its UI thread and do less work? And we felt like those were key innovations that web components really needed to stay competitive And finally we we wanted to use JSX We're excited about some of the template literal stuff as well And we had we knew that server side rendering pre compilation had to work out of the box So we took our great Promising results from from going to vanilla web components with the desire to bring these framework features that we really really loved and Missed and decided to see if we could combine them together And so today we're really really excited to announce a new project that we've been working on that's really an artifact from our own efforts That helps developers build faster web components with framework features that they desire but in a hundred percent standards compliant way So today we're announcing a new project We're calling stencil and stencil is a compiler for web components that Adam will talk about in a bit It's still super alpha, but we are using it for a lot of stuff internally So so we created it for ourselves. We're using it for ourselves. It's gonna power the next version of ionic So we're really excited about it, but keep in mind It's still alpha and we'll have links at the end so and this is really Adam's brainchild So I should let him talk about it. Thanks, Max So stencil is is largely a compiler for web components. And so what it builds is Optimized custom elements. So the big thing I want to get across is that this is not yet another framework. It's not a stencil framework It's not window dot stencil that adds a bunch of stuff and a stencil API rather It's it's using the build time compiler to build just vanilla Custom elements that work in all browsers and that was key that we really wanted to focus on and so with that compiler We're also able to enable virtual DOM server-side rendering Pre-compilation asynchronous rendering and reactive data binding and it's absolutely been inspired by the best parts of angular react view and polymer And again as Max was saying it's based on typescript because honestly we use typescript because we it's made us really productive in building applications and building ionic itself, so We use typescript because we enjoy it the side effect is that everyone else gets the typed library that we have But the real reason is because we prefer it and we also use JSX along with that also and I'd also like to add that is MIT licensed So with our goal of creating just vanilla Custom elements, we really want to make sure that we had no external dependencies of any library to include stencil Stencil is not a framework, but rather it's just the compiler for it And so by reducing or removing on every single external dependency and having just a vanilla custom element We're able to then work in all frameworks, which is kind of our original goal So if you go back to what we originally want to do in 2013 was just make it easy for developers to build applications Fast-forward to today. There's many ways to do it in many different frameworks So we feel like this is kind of meeting our original goal and we're really proud of that and on top of that Stencil can be used to create just standalone components or it could be used to create entire applications and It's been working great with all framework with one caveat that we've had issues with React and that react hasn't been working the best with web components And so that's an area that we would love to work with the correct community and improving upon moving forward So the way I like to think about stencil is that it's kind of a pre it pre-bakes custom elements Pre-compiles, whatever it takes a lot of these concepts that we've really Expect and have gotten to like about frameworks like virtual DOM lazy loading change detection all that stuff And and there's a simple compiler that just takes those concepts and builds custom elements with some of that stuff baked in So we call it stencil because it's just a tool to help you stamp out these components. It gets out of the way at runtime All right, so we talked a lot about asynchronous rendering JSX and all that above so we kind of wanted to show off something here So a few months ago at a react conference. They had an amazing demo where they showed This this is react version 15 and what's going what's going on here? Is that there is the single node at the very top that's being updated with a new number every single second And then that passes all the information down to all its child elements and so on so forth and then every single frame each one of those circles has been animated out and Every single one of these circles has a mouse over and mouse out Event on it as you can see this is react 15 is no joke But this is very difficult difficult app to pull off because you've got over 700 nodes being updated every single second So what's happening here is why you see it kind of jank a little bit is because the browser is kind of freezing trying to get Sure that all those 700 nodes are updated So this is why it's kind of janking like that And so if you've heard wrecked fiber is kind of solving this problem So wrecked fiber is in is the next version of react. It's in beta right now And we read all about it and and we were really intrigued by how they're solving this where instead of trying to Synchronously update every single node It lets it it lets it kind of put into asynchronous queue Which then lets the browser kind of manage that so we were curious like that sounds awesome react I wonder if we can do that because frankly we also have asynchronous rendering can we do that with? Stencil and so we're really thrilled to show like we were blown away by the first refresh to see that actually This thing is pretty darn smooth. It's updating just as many elements It's the same thing all the properties being passed down And so it's kind of proving that this tiny little web component that we have here Which is just vanilla not depending on anything else is just as performant as react 15 in the next version a rec 16 The next version so we're really proud of kind of the performance that we've gotten from this So back to the slides. Yeah, so that's a quick kind of demo from the performance with the asynchronous rendering engine But we've kind of talked a lot and and haven't really gotten any code, which is the best part, right? so I want to talk through kind of what a simple stencil component looks like and The cool thing about stencils. This is pretty much the entire API. It's very small. It doesn't have a lot of Surface area to the API. If you know ES6 if you know typescript, it's pretty easy to understand So this is an example of a stencil component. It's a simple ES6 typescript class We are using decorators to indicate that this is a component We specify the tag name and then we can also link a style sheet. So we support sass or vanilla CSS out of the box Inside the actual class itself you'll notice this at prop decorator and what this does is basically indicate that this class member is going to be Filled in from a property on the actual component So someone above this component would actually write name equals blah or age equals blah We have typing information. So we kind of know what the type is going to be Stencil is based on typescript and we we do use this type information to our benefit And then inside the render function, you've noticed this a few times today. This is kind of where we feel things are moving We we compute the next view basically Using JSX, but in theory we could use template literals or anything in here And we're taking the value of this dot name and this dot age The cool thing here is if name or age changes the component knows how to redraw itself automatically There's also another thing instead of prop. There's states for internal state It's a very explicit way to indicate that this this member variable is going to change and if it changes We need to redraw ourselves. So this is what a component is and you and underneath the hood We generate a simple custom element Using this code so there's really not a lot of surface area if you know this little API You know how to use stencil So and also because we're everything is broken apart and asynchronous One thing we wanted to make sure we pulled off from the very beginning is that all the components are lazy loaded So a challenge that we've had with our existing versions of ionic is that if you wanted to use a checkbox You needed to use everything and that works well in Cordova world, but Moving forward is really not working well in and PWA So we wanted to make sure that if you only use toggle it was going to be the only stuff You download it so out of the box we made sure that we enabled this but also wanted meter goal of not having external dependencies So webpack was our challenge to say like could we do this without webpack because that kind of seems it the standard right now and sure enough The way we're doing it is that we're able to just register Just kind of the base information about a component So we tell the browser like hey these are all the components that are possible, but that's really about it We don't go further into detail Or we don't have any more code and saying like ion toggle is a thing ion checkbox is a thing and then hey browser If you happen to see that let me know and that's about all that we register up front And so then from there what we're kind of doing is we're reversing how a traditional lazy loading works where traditionally Developer on the computer will run the build step and we take these best guesses of which things should be bundled together And which pages should be bundled together and which stuff do we think the user is going to request? And then we ship that as as one big final package, but with this we're letting the browser decide exactly what it needs We don't even get involved. We just say Hey browser, let me know when this thing happens and when you need ion checkbox, then we'll send it to you at that time And so then users are only downloading what they need and another awesome benefit of this is because we have a compiler We can hash all the file names of these files And so with that we can then forever cache all of these files So on your phone and CDNs and edge networks all these files can be cached So if you have the slightest update to your app, let's say you had a misspelling you want to update the app You don't need to rebuild the entire application and reshift it to all your millions of users for them to download the large bundle anymore now you can just say I had this one file update let's update that file and users are only Updating the root updating the change file and everything else is still Static on their phone or as fast as it can possibly be so we're really proud of this being able to enable this with kind of how We're using a compiler to pull that off And on top of that we want to make sure that all of this stuff was easy to share So with large organizations and any company really or any organization It's it's often a challenge of which framework different teams have different frameworks So different developers use different frameworks And so this has been talked a lot about a lot during this conference And so we want to make sure that was just as possible for people to put together a collection of their components that they can then easily Share with all the teams in their company and we want to do this also through MPM Which which is awesome to hear that polymer is doing the same thing too But another challenge that we've had has been with sharing our SVGs of like our IANA cons So IANA cons is a project of ours where we have over 900 SVG icons, which people can choose from again That has the problem of like why don't want to download 900 icons for this to work So we were able to solve that with kind of the same concepts here But at the same time It's easy for a developer to build this and have their 900 icons in their application But as a UI library that wants to share these 900 files It becomes a challenge because now it's in node modules Which needs to get copied to the correct folder in your application And then at the same time it needs to get requested from the same location from the browser So there's kind of two steps there That's always been a challenge that we've had a lot of work grounds But with stencil we make sure that this was seamless where you just import or you just require Which are you require the the collection of IANA IANA cons and it's all handled for you So you have to worry about that and additionally we also able to group certain components together because in reality There are certain components that will come together for example We have IANA card IANA card has IANA header and IANA content inside of it So chances are if you use IANA card you're going to use those other two also So we want to make sure that we can reduce as many requests as possible or separate requests as possible So we're able to easily bundle them together And again the biggest thing I want to get across from this is that the final output is not a stencil thing It is purely vanilla custom elements and IANA core is really just another collection So again, it can be reused in any any framework to include IANA Angular So and that's another thing I want to make sure that I get across is that the next versions of IANA Angular will continue To work the exact same everything you're using about IANA Angular is just like how version 3 works Except now under the hood we're using this to pull it off And then we have the added benefits as a developers that we can then enable it for react developers and view developers and so on And whatever comes out next month Additionally, we want to make sure that server-side rendering was enabled Traditionally that's been kind of difficult to do with web components, but we because we're using our own Asynchronous rendering engine. We were actually someone easily we're easily able to add this to our components So what that means is Your first paint can be just HTML and CSS So that perception is lightning fast and as fast as it could possibly be because you're only rendering the bare minimum of What that first paint has to be but then on top of that another thing that keeps coming up is TTI time to interactive That was our core focus to make sure that the actual time direct and time to interactive was really just as fast as possible Could be so what we're doing is making sure that all the existing nodes that came back in that first request For that first paint are the same ones that we just enhance with listeners So we're not repainting the whole thing like you see in other frameworks And also just like how we want to make sure that you develop on desktop and you develop a mobile You kind of have a single Experience of what you're creating we feel it's the same thing of like if you're developing for client side a browser Or you're developing on the server So we want to make sure that the experience of developing stensive components is the same whether you're doing server-side rendering Pre-rendering or it's for the browser So to do that we're able to have window and document and everything that you're used to so you don't have to kind of change your mind Or do a mind shift of like between the different versions So just some some FAQs here who is stencil for well first and foremost it's for us We built it because we needed faster apps like like we mentioned We wanted to be and we do want to be a major UI Framework and solution for progressive web apps and frankly we we just were kind of dead in the water without coming up with a different approach So we need faster apps with with components that run in all frameworks because we can't possibly support all the frameworks out there with our Components and the ones that that will come out in the future Secondly, it's available. It's it's meant for UI framework authors I strongly believe that the days of building a CSS jQuery framework like like to say a bootstrap or even like an ionic that has its own CSS And then trying to build custom bindings for every framework. I feel like those days are coming to an end I think it's it's a really positive thing for both UI framework authors because they they can do less work But also users. I think we've all used a like bootstrap binding that had One set of features for one framework and had different features for another And so web components kind of solve that problem for us and stencil can help these developers build these components For large development teams that are using a lot of different frameworks and build chains Using stencil and using web components They can share components like branded like your team has a branded button or a specific thing that has to be in every single app Instead of duplicating that every time you can just share the components with everyone And then finally for app developers. We all want faster mobile and desktop apps, right? So this can help us get it So how is this different from current solutions? I think the biggest difference is that it's a compiler not a not a runtime solution So we do all the work during the build step It's just a simple npm install. There's no CLI. It's just a npm script for your app And this just generates a set of optimized custom elements So there's nothing stencil in the final output. We keep saying that but I just want to really like drive it home There's no window dot stencil. It doesn't exist. It's just your components And this complements all frameworks because we really like don't want to discourage anyone from using react review If you like it, that's great We kind of have taken a step back and saying we don't really care what you want to use anymore We're done fighting that battle. We're just going to create Custom elements you can use them if you want but if you want to explore this brave new world where you don't use a traditional Framework you just use web components. We support that too, and we're actually really really excited about that hashtag use the platform and It's a small footprint. There's very little view code here There's no CLI and then finally this is you know going back to kind of preferences We built this on typescript typescript has let us get a lot of rich typing metadata that we actually use for the tool But as a company, we've really embraced typescript. We feel like enterprise usage is really really accelerating on typescript So we base it on typescript. We love it, but if you don't then maybe this is a point of disagreement So what's next with stencil our stencil created components are going to go live in you know hundreds of thousands Hopefully of ionic apps Who knows this might be the biggest distribution of web components in the app stores In short order, so we're really excited about that We're going to begin seeking some feedback on an experimental ionic with stencil starter instead of just ionic with angular or a typical framework And based on the feedback we might integrate that more deeply into our tooling. So this is still experimental We're not really sure how people like it. We need better state management. I'll have something like redux So we're working on something like that Trying to make it easy to import third-party modules Looking at maybe template literal templates like lit html beyond jsx because we're just a compiler It's pretty easy to swap that out But we've just decided to go with jsx today and then we're going to submit our hn pwa, which we're really excited about Yeah, so we're really you know again This is something we built for ourselves But we're really proud you know to show this off and you know get some feedback of what you guys would think or what the The community thinks and so we have it up on our github and we have a couple demos out there They include the fiber demo and the hack news demo So I've labeled enough we've level enough about this But one thing I want to say is like take a look for yourself So take a look at this hack news app and do the traces yourself look at the file sizes Look at how fast the time you're inactive is and just take a look and you'll see that its rivals the best PWA is out there right now. And so we're really really proud of it and on top of that It's built from a component of libraries It's not just a bunch of divs that have you know different background colors and stuff and and just switching out divs This is an actual legitimate large-scale application that has modals and alerts popovers all the different things that you want an application But it also loads just as fast as any other of the fastest PWAs right now So please we encourage you to take a look and we're really proud of what we have so far Thank you very much. Thank you