NDC London 2016 - Aurelia: Next-Generation Web Apps
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 133 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/49588 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
NDC London 2016130 / 133
2
6
10
12
15
17
23
24
28
30
31
32
35
36
39
40
43
44
45
47
51
52
55
58
59
60
61
62
63
64
67
69
71
73
74
75
82
84
86
87
97
103
107
108
111
112
114
115
117
120
123
126
128
129
132
133
00:00
Software developerMobile appFingerprintSoftware testingJava appletAlgebraBuildingScripting languageClient (computing)Web-DesignerElectric generatorScripting languageJava appletBuildingTerm (mathematics)Series (mathematics)Open setCharacteristic polynomialSoftware frameworkMobile appCodeInternetworkingWeb applicationSoftware developerModule (mathematics)Set (mathematics)Connectivity (graph theory)Computing platformExistenceWeb browserWeb pageQuicksortSingle-precision floating-point formatCartesian coordinate systemPerspective (visual)Multiplication signProjective planeGoodness of fitLibrary (computing)Extension (kinesiology)Front and back endsImplementationMachine visionMessage passingOnline chatBeta functionMereologyWeb 2.0PlanningBootingVideo game consoleFormal languageTransport Layer SecurityStandard deviationWeightSpacetimePerformance appraisalDaylight saving timeFlow separationPairwise comparisonKey (cryptography)Different (Kate Ryan album)BitPatch (Unix)Latent heatModul <Datentyp>Software development kitTelecommunicationClient (computing)Tablet computerNumberOpen sourceFrequencyFreewareData conversionProcess (computing)MassAlpha (investment)SoftwareSoftware testingConstraint (mathematics)Order (biology)Server (computing)GoogolEndliche ModelltheorieCore dumpComputer animation
07:22
Line (geometry)Software developerClient (computing)AlgebraWechselseitige InformationSicMaizePhysical systemWeightBootingServer (computing)Subject indexingWeb pageMereologyDisk read-and-write headProjective planeData managementComputer configurationInstallation artService (economics)MappingComputing platformConfiguration spaceMobile appDemo (music)Single-precision floating-point formatComputer fileWeb applicationElectronic program guideModule (mathematics)Line (geometry)CodeSoftware developerSoftware frameworkFormal languageSoftware development kitExtension (kinesiology)Series (mathematics)Web browserBootstrap aggregatingStructural loadDynamical systemLatent heatStandard deviationType theoryBitFlow separationProduct (business)Scaling (geometry)QuicksortCore dumpVisualization (computer graphics)Data conversionApplication service providerSet (mathematics)Sampling (statistics)System callWebsiteOpen sourceHard disk driveScripting languageWeb 2.0Endliche ModelltheorieMedical imagingWave packetJava appletRight angleObservational studyDefault (computer science)Perspective (visual)Figurate numberLibrary (computing)Process (computing)Descriptive statisticsPattern languageHookingComputer animation
14:37
Software developerSurjective functionMobile appCategory of beingMereologyConnectivity (graph theory)Computer virusSocial classModule (mathematics)InterpolationString (computer science)Web pageDialectComponent-based software engineeringBitDefault (computer science)Source codeWeb 2.0View (database)Keyboard shortcutAttribute grammaroutputSoftware frameworkMessage passingState of matterCuboidType theoryElement (mathematics)Template (C++)Standard deviation2 (number)Content (media)BootingLatent heatSign (mathematics)CodeSet (mathematics)RootComputer fileConfiguration spaceFormal languageScripting languageRoutingDemosceneSoftware developerInterpreter (computing)Multiplication signComputer clusterDirectory serviceProcess (computing)Java appletBootstrap aggregatingRight angleTwitterMassSource codeComputer animation
21:53
Software developerSurjective functionWeb browserType theoryElectronic visual displayInterpreter (computing)Right angleKeyboard shortcutString (computer science)Attribute grammarCuboidElectronic mailing listEvent horizonEndliche ModelltheorieDefault (computer science)Loop (music)Formal languageInitial value problemoutputPattern languageInterpolationMedical imagingBitSource codeMultiplication signArithmetic meanGame controllerMereologyScripting languageSoftware frameworkForm (programming)TheorySocial classVector potentialDirection (geometry)Message passingComputer animationSource code
27:35
Software developerType theoryError messageLoop (music)Object-oriented programmingArray data structureClassical physicsMessage passingConnectivity (graph theory)Mobile appView (database)CodeEndliche ModelltheorieLibrary (computing)Data miningElement (mathematics)BitMereologySoftware frameworkDifferent (Kate Ryan album)Computer animationSource code
29:06
Software developerSurjective functionKeyboard shortcutMereologyConnectivity (graph theory)Mobile appElement (mathematics)Electronic visual displayCuboidCategory of beingDifferent (Kate Ryan album)Type theoryoutputWeb browserPoint (geometry)Independence (probability theory)Multiplication signSource code
30:23
Software developerSurjective functionRootConnectivity (graph theory)Mobile appElement (mathematics)Independence (probability theory)PlanningBuildingSoftware frameworkDynamical systemDirection (geometry)Module (mathematics)Data managementPoint (geometry)Function (mathematics)View (database)Endliche ModelltheorieMessage passingTraffic reportingComputer animationSource code
31:52
Software developerMathematicsCategory of beingFluid staticsTouchscreenConnectivity (graph theory)Multiplication signEndliche ModelltheorieView (database)Keyboard shortcutCodeUser interfaceDebuggerDemo (music)Entire functionBitSoftware frameworkComputer filePower (physics)HoaxDynamical systemPlanningCondition numberExecution unitSystem callSource codeComputer animation
33:46
Software developerBootstrap aggregatingModule (mathematics)Connectivity (graph theory)Set (mathematics)Server (computing)Statement (computer science)CodeDemo (music)View (database)Configuration spaceSoftware frameworkScripting languageInstance (computer science)MultiplicationLibrary (computing)Social classFunctional (mathematics)outputObject (grammar)Element (mathematics)Line (geometry)TouchscreenUniform resource locatorGraph coloringRootForm (programming)VolumenvisualisierungAttribute grammarJava appletPlug-in (computing)Right angleMobile appSoftware developerGreatest elementComputer filePower (physics)BootingWeb serviceDifferent (Kate Ryan album)Physical systemDefault (computer science)Category of beingRoutingCASE <Informatik>Process (computing)Validity (statistics)Discrete element methodGastropod shellWeb pageLatent heatInstallation artFigurate numberFamilySource code
38:26
Software developerBitGraph coloringView (database)Visualization (computer graphics)Category of beingConnectivity (graph theory)Electronic visual displayRight angleComputer animation
39:19
Software developerMobile appAttribute grammarContent (media)Connectivity (graph theory)Real numberService (economics)Interpreter (computing)View (database)Element (mathematics)Graph coloringKeyboard shortcutCuboidCategory of beingSoftware frameworkPhysical systemVolumenvisualisierungWeb browserFile formatComputer fileElectronic mailing listSubject indexingDifferent (Kate Ryan album)Right angleAreaStructural loadComputer programmingMetreSource code
42:34
Software developerThomas KuhnDemo (music)Element (mathematics)Connectivity (graph theory)RootDataflowComputer virusComputer fileForm (programming)Content (media)Keyboard shortcutMobile appBitWeb browserRoutingSource code
43:31
Software developerPower (physics)Computer iconCodeBitPower (physics)Social classMetadataView (database)Element (mathematics)Functional (mathematics)Multiplication signHookingConnectivity (graph theory)Demo (music)Computer fileExtension (kinesiology)Software developerModule (mathematics)Keyboard shortcutDifferent (Kate Ryan album)Plug-in (computing)Structural loadExpert systemWritingLatent heatMathematicsPoint (geometry)Software frameworkLine (geometry)Template (C++)Compilation albumString (computer science)Process (computing)Computer programmingMoment (mathematics)Cellular automatonFunction (mathematics)Computer animationSource code
47:17
Software developerCuboidKeyboard shortcutData miningPower (physics)Software frameworkView (database)Entire functionEndliche ModelltheorieConnectivity (graph theory)Point (geometry)Physical systemExtension (kinesiology)Right angleMobile appComputer animationSource code
48:48
CodeSoftware developerBenchmarkModul <Datentyp>Component-based software engineeringStandard deviationDifferent (Kate Ryan album)Markup languageConnectivity (graph theory)Mobile appParsingWeb browserExtreme programmingBitDemoscenePower (physics)Software frameworkSpectrum (functional analysis)Point (geometry)MereologyMultiplication signStandard Generalized Markup LanguageProduct (business)Electronic mailing listProcess (computing)Computer fileRight angleCore dumpDemo (music)Formal languageView (database)Random matrixComputing platformCodeCASE <Informatik>BuildingWeb 2.0InjektivitätLibrary (computing)Range (statistics)Maxima and minimaStandard deviationMathematicsVisualization (computer graphics)Configuration spaceNumberRevision controlScaling (geometry)WebsiteSoftware bugProjective planeBenchmarkSet (mathematics)GoogolFacebookFriction2 (number)BlogInformationPlug-in (computing)BootingData managementPattern languagePresentation of a groupCommitment schemeFlow separationGroup actionCombinational logicIndependence (probability theory)Digital libraryGoodness of fitTouch typingGUI widgetLevel (video gaming)CollaborationismDebuggerLine (geometry)Enterprise architectureField (computer science)Module (mathematics)Software developerRouter (computing)Cartesian coordinate systemNumeral (linguistics)QuicksortTrailCategory of beingReal numberMikroblogOpen sourceBounded variationString (computer science)Graphical user interfaceLaptopComputer configurationBusiness modelMonster groupWeb-DesignerTouchscreenVirtualizationParallel portHybrid computerCovering spaceTemplate (C++)Near-ringWave packetTerm (mathematics)Element (mathematics)Attribute grammarSoftwareLatent heatGame controllerScripting languageDivisorJava appletSemiconductor memoryClient (computing)Endliche ModelltheorieFamilySystem callPairwise comparisonMoment (mathematics)ParsingArithmetic meanComputer programmingRegular graphLattice (order)Artistic renderingNeuroinformatikFood energyComputer clusterOperator (mathematics)Information technology consultingPlanningRadical (chemistry)WhiteboardIRIS-THypermediaProfil (magazine)Type theoryStaff (military)Physical systemBeta functionLie groupSelf-organizationGraph coloringComputer animation
Transcript: English(auto-generated)
00:05
My name is Rob Eisenberg. And if you're interested in learning about Irelia or what's happening in the next generation of JavaScript or front-end web development, then you're in the right place. So as I mentioned, let's see if this is working or not.
00:27
As I mentioned, my name is Rob Eisenberg. And I have a fairly long history in terms of front-end frameworks and developer-centric workflows for building clients. I've been doing this for 10 or 11 years,
00:42
focusing on front-end development across a host of platforms. You may have heard of things like Calibre Micro or Durandal. Those are some of the projects that I led. I also worked with Google as a lead designer and implementer of Angular 2 back in 2014 for about 10 months.
01:05
To make a long story short, there were severe disagreements which couldn't be reconciled. And so I moved on from that to return to the communities that were already existing and to cast a vision for what the future of web development could be like.
01:20
And out of that came Irelia, which is a next generation front-end framework. So I'm the CEO of Durandal Inc. and the architect of Irelia. And that's what we're going to be talking about today. Our agenda is pretty straightforward. I'm going to first just give you a bit more details about what actually Irelia is.
01:42
I'm going to show you some awesome things that Irelia can do. Then we're going to go through a quick comparison across several different key evaluators for comparing it with other technology in the same space. And then I'm going to tell you about the status of our project and kind of what our next steps and plans are.
02:02
So first, let's talk about what is Irelia. Well, first of all, it's just JavaScript. But beyond that, it's really modern, very modern JavaScript. So what we've done is we've written a collection of collaborating libraries,
02:22
all written with ES2015 modules, and all written in ECMAScript 2015 with a couple of future features from ECMAScript 2016. So you can think of this as a modern framework in that it's, as most modern frameworks, if you work with .NET or Ruby or Node,
02:42
it's not one monolithic beast. It's a set of small modules. And usually you take a collection of those modules and you put them together, and that kind of gives you a framework for building apps. So what we've done is we've taken the same approach on the front end, which is very easy to do now with modules in the language itself and a standardized
03:01
loader as part of the platform. So we've gone ahead and we've written basically a new framework, highly modularized in JavaScript, but ES2015 and 2016, so very modern JavaScript. And you can take those modules and you can actually use some of them on the server, even in Node.js apps
03:21
or in console apps and all sorts of things because it's very modularized. But usually what people do is they take a standard set of them together and they use that to build a single page application. And now this isn't constrained to the browser. That's one of the primary targets that people use Irelia to build for, very rich browser-based web app experiences.
03:42
But of course, you can also use this with things like PhoneGap to build hybrid mobile apps across the various phone devices. You can use this, of course, to build tablets, apps, and also desktop applications with things like Node WebKit and Electron. And so we have people developing across literally
04:02
every single platform with Irelia as their foundation. And so Irelia, as we said, it's modern JavaScript, highly modularized for building front-end clients, but it also takes advantage of the modern DOM and various modern web component specifications, both using them and interoperating with other web
04:23
components. And in fact, this is the first framework and it might be the only framework in existence today with these characteristics. So very forward-looking, but even highly backwards compatible back to Internet Explorer 9. Our philosophy is pretty simple.
04:41
First, we're open source, MIT licensed. This is a very permissive license. If you've worked with just about any other web JavaScript library, usually the license they choose is either Apache or MIT. jQuery, for example, was the MIT license as well. So in terms of licenses, it's extremely permissive and just protects both you and us in a very sensible way.
05:04
So open source, free, open source, highly permissive license. The framework really focuses on helping you write clean code. And it enables that through a series of very simple, easy to learn conventions. The idea is that the framework needs to get out of your way.
05:20
When you're building your app, you should primarily not be looking at our framework code. You should be looking at your app code. And so what we try and do is support a developer workflow that involves you writing pure vanilla JavaScript as much as possible without our framework in the way. This makes your code much more testable,
05:42
more maintainable. There's all sorts of good qualities come out of this. In fact, we call those qualities the ilities. Or you may have heard of that term, the ilities. Testability, maintainability, extensibility. The more the framework gets out of your way, the more your code has the chance to take on these positive characteristics more naturally. The more intrusive a framework is,
06:01
the harder it is to achieve these, especially over long periods of time. If you have larger projects or your business is basing, your entire business is based off of this app that needs to live for x number of years. As the times change and the frameworks and libraries change, it's going to be harder for you to maintain that
06:21
and evolve that application over time if you've got a platform that's extremely intrusive into your app code. So we recognize that that is important characteristics from a business perspective when you're building software. And so we try and support that kind of development. And along with this, we also leverage modern tooling,
06:42
all the modern tooling for front-end development. And that's kind of part of the package that we help you get set up with. The cool thing about Irelia is it's a relatively new framework. We just announced it in February of last year, so less than a year from when we announced the alpha. We announced the beta in November of last year,
07:02
so less than a year that people have really even known that this thing exists. And we've seen a massive, massive adoption from the community. In fact, we have one of the largest getter chat channels in the world for JavaScript frameworks, and in fact, the most active channel
07:20
for JavaScript frameworks, with over 200,000 messages or conversations between developers. And there's approaching 3,000 developers in that chat room right now. We have a 15 developer core team distributed across the world. We also have had over 250 independent contributors to the project in the last 11 months.
07:43
What we've done, though, is also recognize that building apps isn't just a technical problem, but there's a business aspect to this. So we haven't just built an open source framework and thrown it out there. But what we've done is we've actually decided to commercially back this. And so we've been working really hard to put everything in place that you would expect
08:02
from any sort of large scale commercial ecosystem. For example, if you're going to build .net apps, Microsoft provides a set of services and assurances about that platform that you may care a lot about. And so we said, well, look at the JavaScript world. There's all these open source projects.
08:20
Companies are spending millions and millions of dollars building apps on top of open source frameworks, tying themselves to these things. And there's no guarantees. They can't even, even if they had a million dollars, they couldn't throw it at a company to support them officially for a lot of these frameworks. So we said, we need to not only solve
08:41
the technical problem, but the business problem. And so we've established a company and established a global set of partners for both consulting, training, and support to ensure that, from a business perspective, if you use our platform, those options are there for you should your business need them.
09:01
So commercially backed and a series of global partners for, like I said, training, consulting, support, all sorts of things, basically anything that you would think you need. All right, so that's enough of what it is. Let's look at some awesome things it can do, build a little demo app and so on and so forth. First, just a bit about beginner setup.
09:23
If you want to get started building something, the best place to go is arelia.io forward slash docs.html. That's our developer docs. And you can read the Getting Started guide there. Basically, the first thing you'll do is download one of our beginner kits. We have two flavors. One is ECMAScript 2016, and another is TypeScript.
09:42
So pick whichever language you like. And you can download that. And then in the docs, you can literally select the language that is your preferred language. And the docs will update to show you all samples and everything in the language that you prefer. So we support ECMAScript 2015, 2016, and TypeScript in our documentation. Of course, you can always write with ES5 JavaScript,
10:03
if you will, but we're really trying to push you into that world of modern JavaScript. So hopefully, you pick one of these. And the entirety of the docs supports all three of those languages. So you can select whichever one you like. These beginner kits are really designed to help you get started fast and learning.
10:20
These are not for production app development. We have a separate set of kits. There's four of them for doing production app development. Again, there's TypeScript and ES2016 kits. And there's also ASP.NET Visual Studio flavors of both of those as well. So I know there's a lot of .NET developers here. If you're using VS2015, there's Visual Studio 2015
10:43
specific kits for both TypeScript and ES2016 as well. And our standard kits are also really great in Atom, Sublime, and VS code. But these beginner kits are really easy. You download them, you extract the zip, and you start writing code. There's nothing to install, there's no setup to do,
11:01
nothing. You have to serve it up, which you can actually just run it straight from the hard drive with Firefox if you want, or just spin up some simple node server, or just open it as a website in Visual Studio and get going. So I'm going to do the first demo today using our ES2016 beginner kit. I've just downloaded it and unzipped it.
11:21
And so I'm going to start there today. And I'm just going to build a little demo and show you some features and talk about how it really works. OK, so with that, let's move on to some code. Can you all read that OK? Is that font big enough? In the back over there? Good?
11:40
All right. So with any Irelia app, it starts off the same as any web app. It starts with an HTML page. And of course, the interesting thing with single page apps is that most of the app is being constructed through JavaScript and the framework and things on the fly. So your HTML page actually, typically for an Irelia app, is nothing more than this.
12:01
So this is our index HTML. You can see in the head there's just some basic stuff. I threw some styles in there and other things just to make some things look decent. The really interesting part is in the body. And so I like to start by focusing on line 10. On line 10, we are bringing in a script called System.js. And System.js is a module loader
12:24
based on the standard specification for module loading. So I'm not sure how familiar everyone is. But of course, with ES2015, one of the big features in JavaScript that's a new language is modules. So along with that, there is a definition of an API for loading modules.
12:42
And it's actually a dynamic extensible resource loader to give us a standard way of loading things in the browser now. Scripts, CSS, even images, it's extensible. You can teach it how to load any type of resource. And System.js is a pluggable loader built on top of the standard spec for module loading. So we drop that in.
13:01
It really is very, very focused on standards-based development. So we start with the standard-based ES6 loader. So we drop that in. Config.js is a configuration file that configures that loader so that it knows, oh, when I ask for this library, it actually lives over here on the web server.
13:21
If you've ever used something like Require.js, you may have done mapping and path config. Config.js has that sort of stuff. The great thing about it is you never have to write it, because if you use System.js, you usually use another tool with it called JSPM, which is a package manager. So you can say, JSPM install Bootstrap.
13:41
And it will bring it down and install it. And it will determine, oh, Bootstrap is using this type of JavaScript. It's using ECMAScript 5, or it's using ECMAScript 2015, or whatever. It detects the module patterns, hooks that up, writes the configuration. And then in your code, all you do is import it. So it makes it very, very simple by integrating package management
14:00
with the standards-based module loader. So we're not going to look at that, because I never do anything with it, other than let the tooling develop it. And you can read about that on the docs. But basically what that is, is we bring in the standard-based loader for loading code. And we bring in the configuration for it. And then we just load the framework. So you see that system import call on line 13.
14:23
The system.import API is actual the standards-based module loader API. So we're just saying, all right, import this module. And the module that we're importing is really a Bootstrapper module. So this is one of our modules from our framework, which is just a module that gets the framework started
14:42
with a default configuration and boots up your app. So that's it. And again, every Irelia app is pretty much going to have an HTML page that looks like this. So what does the Bootstrapper actually do? Well, the first thing it's going to do is it's going to look in your HTML page and see if you've defined any regions of the page that
15:03
are actually supposed to be Irelia apps. Places in the page where an app is supposed to be rendered. And it's going to look for that Irelia-app attribute. So here we basically told the framework, hey, we're writing an Irelia app here.
15:20
And we want it to render the whole app in the body. That's the place. It could be some div. It could be any location inside of the DOM. But we're just going to take the whole page up with our Irelia app. So we've placed the Irelia app attribute on the body. So the Bootstrapper is going to load up. It's going to instantiate the Irelia framework. It's going to get it all configured with a default
15:41
set of configurations. And then it's going to start running your code and rendering your root component. So Irelia uses a component-based development. And everything is built as components. And so every app starts with what we call a root component or a main component that represents your app itself.
16:02
And by convention, if you haven't specified any configuration, which we haven't here, we're just keeping it simple, it's going to look for a component called app. And I haven't written one yet. We're going to do that in a minute. So a bit about components. They're really simple. Components have two parts to them. Let's go ahead and create those two parts.
16:20
So in my source directory, I'm going to create the first part. I'm going to call it, as I mentioned, app. I'm going to create app.js. Every component has a JavaScript part to it. So we're going to create a simple JavaScript module that exports an ES2015 class.
16:42
So let's actually do that. So I'm going to say export class app. And I'm just going to create a really simple class that has a single property called message. And it's going to say, hello, NDC.
17:03
Simple class about the simplest possible ES2015 class you can write. Every component has a JavaScript part that has the state and the behavior of the component. And it's just a plain JavaScript class. Most components also have this second part, though, which is the view.
17:21
So we're going to create app.html. And that's going to be our view. I'm going to turn this mouse off because it's sliding around up here. And every view is written with an HTML template.
17:43
And here, coming back to standards again, the template element is part of the web component specification. So here, you can see we're using part of web components to develop our views. And inside of the template, you just put HTML. So we can just put a little H1 tag in here and some text.
18:05
So that's great. But the cool thing about it really is there's these two parts to your component. And what it really does is it takes them and it binds them together. So all the properties and methods that are available in your class become available inside of your HTML.
18:21
So that message property, you'll recall, is right back here. We have an app class with a message property. So I actually can render that message property right out here, like that. If you're familiar with ES 2015, you'll notice that the syntax for actually rendering into the content here with the dollar sign and the two
18:42
braces is the same syntax that there is in JavaScript for string templating and string interpolation. So what we've done with our data binding and templating language is we've borrowed from ES 2015 syntax and brought that into HTML and enabled it. So this is our simple component.
19:01
We can come over here. I've got Firefox. Let me just refresh it. And there it is. Not much to that, not too exciting. But that's the basics of the component. And every component is built this way, a JavaScript file with a simple ES 2015 class and a view with a web's components template
19:22
with HTML in it and bindings that connect them together. Now, you can expand out from here. So let's do a little bit more. Sorry. I'm going to come over here, and I want to basically add a few more properties. So I'm going to add my first name property, and I'm going to add my last name property just
19:44
to show you a few other features of the framework. I want to add a computed called full name, this computed property. I'll go ahead and use JavaScript string interpolation syntax just so you can see that the syntax is the same in JavaScript as it is in our templating language.
20:05
And then I add a method down here called say hello. And that's just going to put up an alert box that says hello to this dot full name.
20:21
OK? So I've added some more behavior here. Notice, again, this is just a plain vanilla ES 2015 class. There's nothing at all remarkable about this, except for the fact that you won't find a single other framework in the world today that lets you write code like this to build components.
20:41
They all have you importing their APIs, calling their APIs, and it's just everywhere in your code. But with Aurelia, again, as I stated at the beginning, this is about getting out of your way. This is about letting you write your code. So here it is, a plain class. Now let's come back over to our HTML,
21:00
and let me introduce you to a little bit more of the binding syntax. It's very simple. What I want to have here is an input of type text so I can update that first name. And to bind that input to that first name property,
21:21
it's really simple. Well, what attribute in HTML do I want to bind? I want value. And what I want to do is I want to bind it. That's it. Let's go ahead and do the last name in the same way.
21:41
And then down here, we'll say that we want to display the full name out, like that. So let's go ahead and run it. I'll refresh our browser. Did I make a typo? Where is it? Oh, there we go.
22:01
Thank you. So if I run it, there we are. You can see the full name displayed. I can also type over here. And the full name gets updated as I type in those boxes. Again, notice the binding syntax is very, very simple,
22:20
very straightforward. And you've actually learned probably about 60% of it now already. OK, so let's talk about it. Basically, we've had this string interpolation binding right here that's borrowed from ES2015. You can put that anywhere in HTML, and you can also put it inside of any attribute value. But you can also bind to any attribute value
22:41
by simply saying .bind. And .bind does what we call our default binding behavior, meaning that it's smart about how it binds. It knows that if you're binding the image source, source on an image, that that's not going to be two-way binding. That's one directional binding of data, because that just makes sense, right?
23:03
But if you're binding the value at an input, you probably want two-way binding. You probably want to get that data out of your model. But when you're typing in that input, you probably want to push it back and update the model. So it's going to do two-way binding by default. So that's what we mean by the default binding behavior. But you can always be explicit.
23:20
So you can say, well, I actually just want one-way binding. Or I want two-way binding. Or actually, I don't want to sync at all. I just want to get the initial value one time. Just get the initial value from my data, and it's never going to change. I'm never going to update it.
23:42
So that's one-way, two-way, and one-time binding. For the most part, you just use .bind and forget about it, because it just does what you want to do. But you always have that control. So these are these simple conventions. .bind is the one thing that you just think about. It's really easy to remember. It does what you want. But if you want to take control, you can then step in and specify more.
24:04
All right. So that's great. Let's do a little bit more interesting stuff here. I want my person to have some friends. And I want to be able to add a friend. So I'm just going to show you some basic list manipulation.
24:26
And again, I'm going to be modeling this all in JavaScript. So in theory, there's going to be some input for the name of the friend that I want to add. So I'm just going to call that my potential friend. It may or may not actually be a friend.
24:41
And what happens is when I add a friend, if there's a potential friend, then I'm going to take and I'm going to say friends. I'm going to push the potential friend into that array. And then I'm going to clear out the potential friend. You'll see how this works in just a minute when I show you
25:01
how we build the UI. But again, I'm adding more behavior, but it's all just plain JavaScript. Just vanilla JS. Nothing remarkable here. In HTML, what I want to do is I want to have a list of my friends. So I'm going to have a UL, because I don't want to order my friends. That would probably make them unhappy with me.
25:25
And I want to generate an LI for everything in that friends array. So again, we're actually borrowing from ECMAScript 2015 here, because in ES2015, there's a for of loop for looping over arrays. So I want to say I want to repeat this LI for every friend
25:46
in my friends list. And that's going to generate an LI for every friend in the friends list. And then I just want to render out the friend like that.
26:00
So it's that simple. And then I want to be able to basically input these friends. So I want to say I want to know the input of type text. And I want to bind its value, you already know that, to a potential friend. So I can type that in. And then I want to have a little button down here.
26:25
And I want to call that button add friend. And when I click it, I want to call that add friend method. So I want to show you a little bit new binding syntax. So you've seen interpolation, value dot bind. You've seen our repeaters.
26:41
I want to show you how we deal with connecting events to methods. So I'm just going to say, well, what event do I want? Well, I want the buttons click event dot trigger. So I want it to trigger the add friend method. And that's it.
27:01
You can see a pattern here of that dot. This is actually what really helps visually to set off our binding language. Because this pattern is consistent across the entire framework. There's some other binding commands, as we call them. But you can easily see them because they always have the dot. And in fact, it's fully extensible. You can add your own binding commands as well. But right here, we've got something called trigger, which means whenever that click event fires,
27:23
it's going to trigger this method on our class, which is over here. So our add friend, our friends, and our potential friend are all right here. So let's go ahead and refresh the browser. Must have had an error. Let's see.
27:43
Oops. I made a classic mistake. And thanks to the error message, it actually was telling me what I did. So I used the wrong loop type. So for of is the loop, not for in. That's the old JavaScript loop type,
28:01
which you should never use for arrays, by the way, anyways. For of is designed for arrays. All right, so let me go do that. I saw Martin out there. Did you see me do that? Martin's on our core team. He actually worked a lot on the repeater. So you probably saw that right away. So Martin's my friend.
28:21
And there it is. You can see how that's working. It's that simple. Let's take it a little bit farther. So first of all, I think these are awesome things that I really can do, because look at that JavaScript code. It's just vanilla JS.
28:41
It's your code. It's 100% my app code. There's no framework in there. You're not seeing me import any third-party libraries. It's just working. So it's that simple convention of the component that has the two parts, the view and the view model. And that view model in JavaScript, the model of your view or the model of your component, is your code.
29:01
We try and keep that as clean, as simple as possible. What's really cool about this, though, is there's lots of different ways to use components. I've shown you that our app is a component. But components are also custom elements. So I could do this. That's the app component we just wrote.
29:20
Now I'm running the app component inside of the app component. That's obviously going to be a problem, because that will probably crash the browser. So I only want to render that if I check a checks box. So I'm going to say, I want to input a type Checked checkbox. And I'm going to show you another part of the bindings, which is you can put these refs on elements
29:41
in HTML, and then you can bind elements to elements. So I'm going to give this a name, effectively a reference of display. And then if that display is checked,
30:02
we're going to render that app component. So now you see conditional rendering with the if. And we're binding that, though, back to our check box. So if the display checkbox's checked property is true, we will conditionally render recursively the same app
30:20
component that we just built. So let's do this. Let's do that. Let's do that. So on and so forth. And each one, of course, has their own state independent of the others. Components are completely encapsulated. And so you can see we've had our app as our root component,
30:41
but every component can be used in many different ways. And you don't change the way you write it. So now we've used it as a custom HTML element without doing anything else. It just works. Clean, clean, pure JavaScript, now custom components, custom HTML elements. It gets even better than that, though.
31:02
Because sometimes when you're building apps, what components you render are completely dynamic. It depends on the data. If you've got an array of employees, maybe you render one component when it's a manager and another component when it's a direct report, for example. And so we can actually do this dynamic composition
31:21
of components by using a special element that we provide in the framework called Compose. So I can come in here, and instead of saying, well, statically, I know that this is an app, it's going to actually be dynamic. So we're going to compose dynamically, and we want the view model to actually point
31:42
to that app component using that relative path. So we're pointing to the module where app lives. And if I show you this, you'll see that it's exactly the same output as before, because it's still, of course, static. But now it's dynamically composing it based on the value of that attribute.
32:01
It's still pretty static, though, so let me actually come back and say, give myself a property name called component, and actually set that equal to app. And now I can come over here and take view model and data bind it to that property.
32:24
Now, whatever the value of that property is, it's going to determine what component gets rendered on the screen. And you'll see, of course, that it's going to basically work exactly the same way as before, because it's a static value. But if the value of that property changed over time
32:41
or changed based on data, whenever that property updated, it would recompose the screen with a different component there on the fly. So this is dynamic composition, and it works inside of repeaters, and it works with ifs. So you can build up entire user interfaces that are constructed entirely based on data, for example. And you don't change the way you write your code.
33:05
So this is something that, again, you're not going to probably find any front end framework that can do this. This is what I call polymorphic or dynamic composition of components. And it's all completely plain JavaScript files.
33:21
So that's enough for this demo. I got some other demos. Hopefully, you get a sense of the basic capabilities of binding and templating, how you do conditional binding, how you build components, how you do dynamic composition, even. And I want to show you some crazy, crazy stuff that you've probably never seen anything do before.
33:43
It's a little bit beyond the hello world, so I'm not going to get into all the details of it. But I want you to see the kinds of power that Irelia has. So I've got a few other demos here. I'm going to start at the beginning again. I'm not going to write them. I'm just going to walk you through them. But just like I said before, this demo
34:00
begins with a very simple HTML page, basically the same kind of stuff. In the head, I'm using Bootstrap. I've got some scripts. So I've got my system.js and my config.js. This is my loader. And then I'm bootstrapping the framework. The difference here is that I've got that Irelia app attribute on line 7. And instead of just having the attribute there,
34:22
I've set it to a value. So before, we used all the conventions. And it just said, OK, go find app.js and app.html, and that's my component, and render it. But you don't have to use that convention. Oftentimes, when you're writing real world apps, you want to configure a few things before your app renders. You might even have some third-party libraries
34:41
that need configuration, validation, maybe web services that you need to set a base URL on, and just set some things up before that first screen renders. And so to do that, all you have to do is specify a module name in here. And that will become your configuration module. And I'll just show you this one.
35:00
It's really, really simple. So for custom bootstrapping or custom startup, all you need to do is write a module that exports a single function called configure. And then we'll pass you the Irelia object instance. And you can now configure the framework or configure your own code to do whatever you want to do before it actually displays the app.
35:21
So in this case, I'm using a standard configuration. We try and make it real simple and easy to use the defaults. So I'm telling you, I really use the standard configuration. And I'm in development right now, so I want development logging. So it'll log to the console, everything that's going on. And it's saying, all right, start up the framework. And then, once it's finished starting up, set that root component.
35:41
And I'm giving it a module path to a specific component. OK? So that's all it does. And you can do anything in here you want. You can install plugins. You can configure things. You can even dynamically, based off of data, determine what component to render as your root component.
36:01
It's all asynchronous. This configure method can even return a promise. You can go back to the server, ask the server some stuff, configure some stuff based off of data, even determine what component or what entire app to render based off of data, and then start the framework up that way. So very, very powerful, but very simple configuration. So I want to show you another demo of Irelia that's
36:23
about simplicity and power. And it has to do with how you can write components without writing JavaScript. Well, it's only writing HTML. So this is our HTML components demo. And the code for that looks very similar to what I just
36:41
showed you. Again, for our root component, our app component, we just have a simple class with a couple of properties, a name and a color. In our view, you'll see a few interesting things. First, let's skip down to line four. You see I've got a form. I just put a little bootstrap in here just to demonstrate that CSS frameworks work great
37:02
with Irelia. You can use whatever CSS framework you want. So I'm just putting a little bootstrap in here. You can see I'm doing that same input binding to first name and now to color. And then I've got a custom tag down there called name tag. And to use that name tag or to use custom elements in views,
37:23
you import them or you require them into your view. All views are encapsulated, so components don't step on top of one another. If you're using third party libraries or if you've got a large team or multiple teams, you don't want them to class with one another. So every view is encapsulated.
37:42
So you import the same way in C Sharp, for example, or Java or Ruby, you're importing libraries into a code file. You're using statements and all these require statements and import statements. Same thing we actually borrowed for our views.
38:00
So views are encapsulated, so you bring in the functionality into a view that you want. So here, I'm actually bringing in on line two, I'm requiring from this name tag HTML file. And that's where this name tag element at the bottom here comes from. I've written a component, but I've written it entirely
38:20
in HTML because this component is real simple, actually. Let me show it to you. All it is is a little name tag sticker, when you go to some events. And it renders out this visualization and I can put stuff in here and change properties
38:41
and so on and so forth. But this component, it doesn't really have any behavior. The name tag, all it is is HTML and styles, and it's a little templated so that it displays the name in the right place and it can update the color. But there's no real rich behavior involved here. So what we've done with it really is say, hey,
39:01
this is actually quite common to have these little miniature pieces of views that are just templated out a little bit but don't have any behavior themselves. So let's just make it really easy to build those. You just write HTML. You don't even have to get into JavaScript to write these. And so that is right here, our name tag HTML.
39:23
And you can see it's just some HTML. We've got this content element that defines where the content that's placed inside of the name tag should be rendered. We'll go back over here. You can see that it's this content right here. Where should that be rendered in our name tags view?
39:41
Should be rendered right here. And then there's the body. And then you can also see other things that can be done with views, such as requiring CSS. So that ensures that the CSS for this component is loaded before the component is rendered. So your components can be fully encapsulated. You can have a CSS file for each of your components
40:00
that has just the CSS for that component. You can require it in, and then you know you're guaranteed that the CSS will be loaded and ready before anything renders. And that's it. But look at the top. We've actually defined some properties real quickly. On the template element itself, we have a special attribute called bindable.
40:20
And we can put a comma separated list of property names in there that are then bindable on the element. And so that's where this color attribute comes from. So that services the custom attributes on the custom element. And now we can bind to them. So we can see when we bind to this color, it's updating that. And then we're changing the background color right here.
40:43
So we're doing a little CSS style binding dynamically coming from that property. So this is a component written entirely in HTML, no JavaScript involved whatsoever. Really, really common scenario. We try and make it real simple for you.
41:00
HTML binding expressions, and if you need properties, you declare them as bindable. And then you simply import it and use it, like any other custom tag. So let's move on because I want to show you HTML components we provide out of the box. But the system for enabling HTML components in Irelia
41:21
is actually completely extensible. It's called our view pipeline. And you can teach Irelia how to interpret different resources or different file types and how those should affect the view when they're required in. And so effectively, with Irelia, it's pretty much the only framework that you can actually do metaprogramming of components.
41:43
So I'm going to show you component metaprogramming today based on Markdown. So I'm going to show you how you can extend Irelia to let you write components using Markdown instead of JavaScript and HTML. So let me go ahead and open up our index HTML.
42:01
And I'm just going to switch the app that we're going to load to this app called metaprogramming components. And I'll show it to you real quick. Wrong browser.
42:22
If I refresh, it's a super simple app. Again, it's got those two text boxes. And it's got some HTML that's being rendered down here. Let's look at how this is built. If I take you over to metaprogramming component, again, it's that same app.js file for the root component.
42:41
Simple, pure, nothing special there. Then in HTML, I've got that form. But look, I'm now requiring a Markdown file, hello.md. And now I've got a hello custom element down here that comes from that. So Irelia doesn't know anything about Markdown.
43:01
But what I've done for this demo is I plugged into Irelia's U-Pipeline and taught it how to generate components on the fly based off of Markdown. So you can see here's my Markdown file, hello.md. It's just a bit of simple Markdown. I'm even able to use that content tag in it so that we can data bind the content,
43:22
flow that content from that hello tag into the middle of the Markdown file. And as you see in the browser, it just works. Bit of a code on that. I don't want to go too deep. But basically, Irelia has a view engine.
43:43
And you can add resource plugins. So you can say, look, whenever you see things imported or required into a view that are .markdown, I want you to do something special. I want you to go out and load that resource as text,
44:01
interpret it as text. I want you to kind of derive dynamically the name of the custom element based off of the file name, basically. And then down here, it's generating a module on the fly that contains this Markdown element that it's created. And how does it create that Markdown element? Well, again, this is metaprogramming here.
44:22
So inside of this function, I've actually got a class. So every time that function get called, it generates a new class on the fly because classes in JavaScript can actually be scoped to functions. So calling this function creates new classes. And I've added some metadata that's really specific to tell it, hey, this is a custom element.
44:41
Here's the name for it. And I'm providing a view inline, which I have gotten by simply translating the Markdown file into HTML and turning it into a string that's a template and then passing it right along to our inline view.
45:01
And that's it. So I know this is fairly technical. I don't want to go too much farther. But look, there's only 37 lines of JavaScript code here that's framework specific. And once that's done, you can now write custom elements with Markdown. So this is an example of the power and extensibility of Irelia because our HTML components are actually
45:21
implemented in the same way. In fact, our CSS loading for components is implemented in the same way because this view resource pipeline lets you tie into views in a whole bunch of different ways. You can generate components. It's not a one-to-one relationship, too. I could generate five different components from one resource or one. I can hook into the view pipeline to load things.
45:41
And it all happens in a very compositional way so that loading happens before anything renders all the time. I can plug into the compilation process and say, hey, after that template has been compiled, I want to go mess with it. I want to change it. So you can have things that you require into views that
46:02
change how compilation happens, that change how the output, the final view works, that change what's loaded, that generate components on the fly. Tons and tons of things. Basically, just about anything you can imagine, you can do by plugging into this pipeline. So this is a fairly technical, kind
46:20
of intermediate to advanced thing you can do with Irelia. But even then, it's not a lot of code to implement this kind of thing. And it's an amazing extensibility point. And I don't think you're going to see anything like this anywhere else. So really cool. You can just think of all the kinds of neat things you could do with this, even creating custom DSLs. You could be letting your designers or business experts
46:43
work in a custom DSL, for example, that then your developers could then require in and use as custom components that were written by non-developers to build applications out of these kind of things. You could do all kinds of really interesting things with those kind of hooks. I want to show you one final demo called binding
47:01
syntax, just to show you once again the power of Irelia and its extensibility and its ability to kind of play with others. The binding syntax demo looks a lot like what you've already seen, again.
47:20
It's just got this hello name tag thing in a text box and binding. So you can probably see how this is going to go. If I open this up in the binding syntax, app.js, again, very simple. But now take a look at this.
47:42
The power of our resource pipeline is that I can actually change the entire data binding syntax in this framework. So I've actually written a plug-in called angular syntax. I've required it in right here. And what this plug-in does to the view is it actually changes the entire data binding syntax for the framework, but only inside of this view.
48:03
So here I've got my ng-model. And I got my double curlies. Now, what's interesting about this is this is actually still Irelia. So this is not using Angular. It just looks like it. In fact, it's at least twice as fast as Angular. Because it's using our data binding system, not theirs.
48:21
We're just giving you their syntax. But that's kind of the power of this extensibility point. But it gets even better than that, because look at that name tag component. Inside of the name tag component, I thought, well, I might as well take it a little bit farther. So inside of the name tag component, I have the knockout binding syntax. And you can see the data-bind here, right here.
48:45
And again, this is not using knockout, but it looks like it. And of course, you can see all the data binding is working fine across the components. So we have one component that internally is using Angular syntax. We have another component that's internally using knockout syntax.
49:00
And it's completely isolated. And of course, they work together just fine. Because under the covers of all that, it's all Irelia across the board, making those things happen. So that's the kind of power and flexibility that Irelia gives you. Those are not things that are built in. That's something I came in as external, so to speak, and plugged into the framework and taught it new tricks.
49:22
And that's a really important thing about a framework, is that the framework itself, not only does it need to be out of your way, but it needs to be teachable, so that you can make it do more work for you, so that you can then write the bulk of all your code in plain JavaScript and very simple HTML templating. So this is a few different demos,
49:41
which I call awesome things that really you can do that are just anything else out there doesn't even have that as part of their design as something they can do. And this comes from, really, the fact that we've worked really hard to modularize the framework, as I mentioned. It needs to be extensible.
50:01
It needs to be plugable, because all of you are building apps, and none of your apps are the same. If they were the same, there would be a product you'd just buy it off the shelf, instead of building it yourself, and save yourself a lot of time and money. But every app is a little bit different. It has a little bit different requirements. And usually, there's something weird about every app. I've been consulting in the front end exclusively,
50:21
almost, for 10, 11 years. And every time I go into a company, about 80% of the app is pretty standard, but there's that other 20% of the way they're doing things, and they're just doing something really bizarre. But they have a good reason to do it, usually. But if you're building on a platform or a framework, it has to let you do those things that you need to do to build your app.
50:40
And so you can see, from some of these demos even, that our core design mindset and the way that we've built this whole thing is extensible in ways that you probably wouldn't even have thought. The templating engine is decoupled from the binding language. Who would have thought of that? I guess we did. So let me talk about comparing this with other technology.
51:03
First, I want to talk about size of the framework. Really, it fits in the size range, right about roughly in the middle. At the small end of the size spectrum for, these are all minified file sizes. We've got React plus Redux. The size on the left is kind of the smallest size
51:21
that you would usually use. The size on the right is what is more typical by people that actually use these frameworks. I put a bunch of question marks there, because React isn't really a framework. It's a library. So usually, when people use React, they bring together a bunch of other libraries to form their custom framework. So that could be quite large, or it could be pretty close to 139k.
51:41
I don't really know. As you move up the scale to Angular, you get, again, something that's relatively small. But 235 is the common use. It's that 235 number that includes things like the router, their router, and their animation system, and their HTTP. The number 152 doesn't include any of that.
52:01
So usually, nobody uses the 152 version. They use the version that's closer to 235. Polymer, again, has two configurations. It's kind of lightweight configuration, or the larger configuration that's more spec compliant with web components. Neither of those numbers includes a router,
52:20
includes HTTP request capabilities, or includes animation. When we get to Irelia, that 287 is our minimum. The 352 is what is more standard. That does include a router, animation, and a fetch specification-based HTTP client.
52:42
Incidentally, about 94k of that is a polyfill called CoreJS, which polyfills all the ES6 library capabilities. So if you didn't actually need all those, you could strip that out and replace it with just the minimum set of polyfills, and you could bring that size down quite a bit.
53:03
Ember, getting up into the larger range here, is 435k. They've actually brought their size down quite a bit. And on the upper end is Angular 2. It's just off in left field somewhere, really nowhere near anyone else, with 566k being their minimum, 766k being the version that includes
53:22
RxJS, which is pretty much the typical. Neither of those numbers includes a router, HTTP, or animation. So when you get to Angular 2 side of things, you're actually talking about something that is, in my opinion, prohibitively large for a framework that doesn't even include basic capabilities in some ways.
53:43
To put it in perspective, our docs for Irelia are actually in Irelia app. And our docs app contains all of Irelia. It contains that 352 with the HTTP router animation. It also includes Moment, and it includes numeral libraries,
54:01
and includes a full markdown parser, and it includes a part of our Irelia interface component library. It also includes Hammer for touch animations. Taking all that, plus all the app code, all the app, JS, all the HTML, and all the CSS, all of that is still less than the Angular 2's 766k. So that's a real problem, I think.
54:21
Ember has been criticized in the past for being too large, and Angular 2 is taking it really to another level there. So watch your size. It's an important consideration with frameworks, because you still have to get your app code in there. So I think React really wins on this, and Angular 1 is very good. Polymer and Irelia in the middle, so it's a good middle place.
54:41
Ember is getting up on the large, and Angular is way off somewhere else. What about performance? Well, there's lots of different ways to measure performance. One of them that's really popular is repaint performance. How fast can the framework repaint the screen if it's changing data as rapidly as possible? There's an independent benchmark called DB monster
55:01
that was actually designed by some React users that they kind of used to shame the Angular 1 team. Unfortunately, they didn't actually know Angular very well, so it was an accurate comparison, because people that actually knew how to use Angular 1 to write the same demo ended up getting better repaint.
55:21
These numbers will vary quite a bit based off of browser and your computer. So these numbers were taken by myself on this laptop using Chrome. So you'll see a lot of variation there. But usually the lineup comes out the same, roughly. So Ember, I put question marks, because they actually were really, really slow, but they just
55:40
had a big rewrite of their rendering engine that's supposed to be closer to React and performance. But the demo was not out there showing the new rendering engine, so I just put question marks. But just know it's probably pretty close to React, maybe a little bit better. So you have kind of Angular, React, Ember down there. React is the one that goes about beating its chest as being
56:03
the fastest. As it turns out, the more modern frameworks, more recently, are actually quite a bit faster. So on the top end, you have both Aurelia and Angular 2. Aurelia beats Angular 2 by just a little bit, but they're roughly about the same performance in terms of repaint. That second set of numbers for Aurelia
56:21
is something actually Martin's been working on, which is a plug-in to Aurelia called our Virtual Repeater. Our Virtual Repeater only renders what's visible on the screen. So instead of saying repeat.for person of persons, you would say virtual dash repeat.for person of persons. It works entirely the same as any other repeater. It's just smart about how it's rendering.
56:41
And if you drop that in here, you actually get 172 to 186 paints per second on this benchmark, which makes it roughly about twice as fast as the next fastest thing. Yeah? Why would you not do that? You would do that most of the time on anything that's kind of a longish list.
57:00
But if you're repeating over something, say like you're generating a navigation bar at the top where it's just links, you wouldn't do that because it's just five or six or seven or whatever things. And with the virtual repeat, it has a scroll bar that comes in. So it gives you, so there may be 1,000, or we've actually tested this with up to a million items, which is really cool, impressive work Martin's done.
57:22
We had an array of a million data items and a scroll bar and had 60 frame per second scrolling over that one million items. But the thing is that scroll bar is there, and it virtually scrolls the list so that it's only rendering what's visible. So if there's no scroll bar involved kind of in your UX,
57:40
then you wouldn't want to use the virtual repeat. And that's an in-development plug-in, so it's not quite ready yet. But you can check it out if you want. It's our UI virtualization library. But that'll be coming out in the near future, and it's really cool, really exciting stuff.
58:01
How about standards compliance? This is a really, really important thing for Irelia. Are we using modern JavaScript standards compliance? Are we using standard compliant HTML? Are we interoperating with web components and leveraging those specs as much as possible? At the top of this list is basically us and Martin.
58:22
And Polymer, all leveraging modern JavaScript, standards based HTML, and web components in some way. Ember is very close under that. They are not really leveraging web components yet, but they're working on it. So I anticipate that you'll see that from them very soon. As you get down the list, you get more problematic.
58:41
Angular 2, what we could say they're using ES 2016 is actually TypeScript. So in my opinion, that's close enough, really. But they have some really weird things going on. Their markup language is no longer standards compliant HTML. So I don't know what they call it or if they've even given it a name. I think it may be kind of sliding under the radar,
59:02
but I call it ng2 markup. It looks a bit like HTML, but it's actually a custom SGML variant that cannot be accurately parsed by a browser. So they have their own HTML-like parser going on behind the scenes now to actually parse their markup. So be careful of that, because yeah.
59:22
And then they also have Dart involved, because the primary use case for Angular 2 actually is a large internal Dart application. So they had to support Dart. So there are parts of Angular 2 that are written in Dart, and that's a little bit weird too. As you go down the line, Angular 1 is actually better in some ways,
59:40
because it does use spec compliant HTML and JavaScript. But they have some weird compliance issues with the way that they handled modules and dependency injection that made it hard to interoperate with other things, because they didn't use an AMD or CommonJS module system. They kind of built their own thing. In some ways, it's better than Angular 2.
01:00:00
from standards compliance. In some ways, it's not. So they kind of got better in one way and got worse in the other, as far as that goes. And then React, great on ES2015. My criticism of them from a compliance standpoint is that they use JSX, which is really, if you think of it as a view language, it's not HTML.
01:00:21
So they use a custom markup, basically. That's a combination of JavaScript and a not quite HTML variant, kind of like ng2 uses a not quite HTML variant. I don't know if this is important to you or not. You can decide. It's important to us. So we work really hard on standards compliance, and that's kind of how a bunch of libraries fall.
01:00:42
What I call separated presentation is really important. This is things like MVC, MVVM, MVP, these patterns. Does the framework actually support a separated presentation pattern well? Because that makes a big difference for how you build your app, how you maintain it, and all these sorts of things. It actually makes a big difference for how a team works
01:01:01
well together. Because if you've got a designer and a developer, that separated presentation pattern is actually designed to help design a developer collaboration. If there's no separated presentation, they can't work in parallel on the same component. So Irelia and Ember do a really, really good job of this. Angular does a pretty good job of this.
01:01:22
You start to get down to the poor category with Polymer, which basically slaps everything in one file, your CSS, your HTML, and your JavaScript. And then you also get Angular 2, which is doing some very odd things now. Actually, if you see all their demos, they have everything in a file too. Your CSS is in line as a string. Your HTML is in line as a string. And I believe you can pull those out into separate files.
01:01:42
But there's another problem there where the details of the view actually leak in to their JavaScript. Because any time you use a custom element or attribute or anything in Angular, you have to declare it on JavaScript, not in HTML. So there's a coupling, a very explicit coupling,
01:02:01
between the JavaScript there and the view, which means that it's very hard for people to work on those in parallel and to get the benefits of separated presentation. And React, I say, is not applicable because React is really a view rendering language. So it doesn't apply because it only cares about the view.
01:02:21
That's its job. But that's how it falls out that way. Obtrusiveness, I'm going to speed it up. We're almost out of time. But my main point here is Irelia works really hard on this. Every component we wrote, you saw it was just plain JavaScript. So this is really, how much does the framework
01:02:40
intrude into your code? So the framework itself is very unobtrusive in Irelia. In Polymer and Ember, it's actually pretty good as well. This has a lot to do with the standards compliance aspect of thing and how close are they staying to actual HTML and to JavaScript. When you get into things like React, it's extremely obtrusive
01:03:02
because React is everywhere in a React component. There's no way to not have that. So that's kind of the extreme. Angular 1, if you've ever looked at Angular 1 code, you see a lot of Angular API calls, define a module, define a controller, define this, a lot of Angular 1 code in your code.
01:03:20
And Angular 2 has that same problem. They just do it more declaratively rather than imperatively. But you can't write an Angular component without Angular code in it. So this is a spectrum of obtrusiveness. Interoperability relates to that obtrusiveness and to the issue of how close to the specs
01:03:41
are things staying. The more spec compliant they are, and if you remember, really, Ember and Polymer were at the top of that list, then they are going to interoperate better with other libraries. Angular 2's average, it's much better than Angular 1. Angular 1 had a lot of problems because of Digest, which is why you see there's a million Angular 1 plugins out there.
01:04:00
Half of them are all wrapping other libraries to get them to work with Angular 1. That's the definition of something that is high friction for interoperability. And React, usually, when we build a React app, you just have to, you can't, I mean, I'm not going to say you can't use third party libraries, but it's very, very difficult. Usually, most of the React developers I've talked to say,
01:04:21
well, we just got to rewrite it. We had to write our own. So high friction for interoperability. So again, I don't know if you care about all these factors, but I think they're quite interesting. They're things that we care a lot about. That's all been technical. Very quickly, on the business side, you need to realize something important. Just because there's a gigantic company's logo on it,
01:04:42
that doesn't actually mean what you may think it means. If you talk to a React developer, you ask them point blank, is Facebook committed to React? They will tell you no. They're committed to the idea of reactive programming, but they're not committed to that library at all. All right? If you ask the Polymer developer,
01:05:00
and Polymer is made by Google, is Polymer a Google product? They'll tell you no. Am I a customer? I mean, do I have a customer relationship with you when I use Polymer? They'll tell you no. We don't think of it like that. The same goes with Angular. And in fact, Google has six different front end frameworks.
01:05:23
Angular 1, Angular 2, Angular Dart, Foam, GWT, and Polymer. And there's no corporate commitment from any of them. They're all just created by independent groups because basically, they want to. So just be careful about that because that has implications for how they approach when they're
01:05:43
going to do changes and why and what their motivations are and how they relate to you. Aurelia and Ember are the only two mainstream frameworks where there is actual business model commitment to the platform. And that flows into things like commercial support.
01:06:01
As I mentioned earlier, there's no way you can even pay. If you're a big company and you're building on one of Google's products and you have a bug, you can't even buy enterprise support to try and fast track the fix of that issue for your company. That's just not part of the realm of possibilities
01:06:22
because that's not how they're dealing with it. So again, because of that corporate commitment and the involvement there, you have basically two options if you care about this kind of thing. I know not everyone cares about this, but I'm pointing out because it's very important for a lot of people.
01:06:41
So wrapping up, I think Aurelia does quite well across the spectrum. Clearly I'm biased. Clearly I'm biased. And lots of other things hopefully you saw in the demos. Where are we? We're in beta 1, which means we've got a stable API. It's very fully featured. Hopefully you saw it can do quite a lot.
01:07:02
We've got full API on our docs, and we've got a bunch of articles that are based on profiles, whether you're a new developer or experienced web developer or a manager, CTO type. We've got kind of different docs to kind of give you the information you might be interested in. There are real apps in development and production today. As I mentioned, a rapid and large active community.
01:07:22
There's training, consulting, and business and enterprise support available today if you need any of that. We also have a global training and consulting partner network. So we've actually got someone in London, by the way, too. So if you need those kind of things or are interested in those kind of things, we can help you get connected.
01:07:40
And we've also got commercial components in development too. I'm not going to dig deeply into this, but we've got a hybrid mobile app component library that we're working on called Aurelia interface, which is really, really cool, built natively as Aurelia components and also exportable as standards-based web components. So that's an optional commercial add-on to our open source
01:08:00
if you should desire that kind of a thing. Right now we're doing a lot of performance work, bug fixes. These are things that are always ongoing anyways. Hopefully you've seen performances doing quite well. We're always writing more documentation. We're looking for new ways to help you get up and running. So we're soon going to have a kind of a new project
01:08:21
wizard where you can go to the website and say, I want to start a project, and I want to use TypeScript, and I want to use Visual Studio, and I want SaaS, and I want this. And when you're done, it just gives you a zip file and you start writing code. So we're working on that just to try and make it really easy and to support a bunch of platforms really easily. And we're all moving towards our beta 2.
01:08:40
And beta 2 that we're working on is really about syncing with standards. There's been some changes in web components, some changes in the decorator spec. If you don't know what that is, don't worry. Some changes in the standard loader API. And so we're looking for beta 2 to synchronize with the standards that have changed a little bit. And we're also looking to leverage some new package
01:09:01
manager features. So that's kind of our goals for beta 2. And we've done a lot of work to kind of shield you developers from those changes as much as possible. And we blog a lot. Usually every one to two weeks, we have a public blog that updates on status or what you should be planning. And so information about how to plan for beta 2 also is in that blog.
01:09:22
All right. Well, that's Irelia. And I really thank you for being here today. Hopefully, you saw some things that were compelling. Hopefully, you'll go out there and build some apps. And I would love to see you in our Gitter channel. I'd love to see you on GitHub and just hear from you about what you're building. And I hope you guys have a great rest of the conference.
01:09:43
And if you have questions, we can just talk afterwards. So thank you.
Recommendations
Series of 133 media
Series of 96 media
Series of 6 media