 So my title is democratizing app creation, which is a kind of a big picture concern And I just want to start with the setting the stage with the big picture before I dive into more specific stuff about what I've been working on lately The the title is democratizing app creation because this is related to like what I think is the biggest problem We as technologists could be working on in the world right now, which is that software is It's eating the world right it's famously going into everything It's famously mediating all kinds of social relationships more and more stuff around software and If you're somebody who writes software you are this part of this Cast of magicians who have this power to affect the world now in a way you couldn't before right writing software Is very much like the archetype for magic You just know the right incantation and real things happen in the real world and the more every device has a processor And the more every Relationship is mediated through software the more our magic spreads and so it's a superpower But like any superpower There comes a point in the story where you ask are we going to use our superpowers for good or for evil and The way I approach that question is it kind of depends who's the we we're talking about who gets to write software Who gets to be creative with software and wield software to you know put their voice out in the world Support their point of view So democratizing the creation of software is an important question to me I think we don't really get to have a kind of free flat equal world if Software runs everything and only a tiny amount of people can make software so That's setting the stage for This talk now Drupal is a success story in this area right Drupal actually is very successful at democratizing the access to making websites People who could have not made a website without Drupal can make a website and that's an extremely powerful thing and there's a huge continuum there of You know Somebody who people being able to do things they couldn't do before because of better tooling and also people being able to learn Things they wouldn't have been able to learn before because they get to be part of a community That's open to developers and themers and site builders and everybody That's a really powerful pattern and that's why That's why I like being part of the Drupal community. That's why I like learning from all the experience here So at the same time the the web platform right Mostly driven by the kind of explosion in how good the JavaScript engines are and how good The browser API's are has really taken off as an application red time, right? So it's now possible to write the kind of things that you used to write as a desktop app Or maybe as a native mobile app, right all on the web and that's a huge the important development right if you're an advocate of openness of Free software of open source It's a very exciting thing. This was a dream for a long time to have a universal runtime for software that could actually That was not not controlled by any vendor Good run on basically every device there is right and yet be a full powerful Touring compete complete nice to work in application development environment Right. We have finally reached the point where JavaScript can do those things and that's very powerful So but of course there's a That's still hard to do. There's a lot of organizations who could use a Drupal today who would still struggle to To ship an app written in tiling JavaScript, right? It's still harder to do So I want to talk about the continuum between smaller simpler applications or libraries or frameworks and bigger more complicated ones that have more features Any practical application has to do a lot of things huge amount of things if you stop and think for a second about authentication and authorization and rendering and storing data and getting that data back and third-party integrations and Templating and schemas and it goes on and on and on validations constraints, right? these are all things that almost every practical application is going to need and It's a giant pile right so if you start on the left end of this curve Which is where most new technologies have to start because they're simple and it takes a long time to grow more features There's a big gap between a practical application and what you get out of the box, right? So we think about a couple projects I'm putting Drupal far on the right here because Drupal's actually Got a lot of features all those things I talked about are things you get with Drupal and Drupal's ecosystem and and I'm definitely talking here about Whole ecosystems not just like core projects, right? So if you've got Drupal Drupal is big and complicated and it has a huge amount of features and had and therefore It has a broad user base It does a lot out of the box and that's hugely powerful that gets us connects to our story about who gets to write software Who gets to contribute lots of people because it does so much right more features is generally better Like there's not really an argument more features is better It's just a question of how much they cost and they take time to make time to make well If we think about some of Drupal's kind of cousins in the open-source world a wordpress or a jumella They're basically out in that same kind of end of the curve the way I'm looking at it Same end of the continuum. Maybe they're a little bit less complex. Maybe they're a little bit less features But they're all kind of close together in the scheme. We're talking about here So then we look at JavaScript land, right? I've dropped in here react far on the left React it is very popular because it's easy to adopt because it's small and simple But if you think about the gap between what react does and what you need for your practical application It's a vast gap right and so the teams that are successfully shipping apps on react are investing massively in their software It's not an accident that react came out of Facebook, right? Not everybody can develop software the same way Facebook can If we move out and a lot and there's a huge huge ecosystem now of kind of react likes that are Basically the same scale and they kind of fight over who gets to be the furthest left because they all brag about how tiny they are And you know react is too big and bloated. You should be using pre-act or whatever There are kind of I'll fight over that left end of the continuum All right moving up to more features a little more come more features more complexity We get to something like angular it does a lot more out of the box than react It is a whole framework. It has opinions right moving a little further. We get to ember embers what I know best That's the community I come out of Among the JavaScript frameworks. We've long been the most opinionated with the most features and therefore the most complexity But there's still quite a gap between what an ember gives ember gives you out of the box And what say word press gives you out of the box, right? I mean one obvious thing is like there's no database There's no server. There's nothing standard like that You have a front-end framework and figuring out all the rest and how it relates to a server is all up to you That's a pretty big gap. And so that is a that's a problem because There's a reason people are using these JavaScript frameworks, right we Getting back to the story about the rich runtime that the web is to take full advantage of the modern real platform We do want to use these things. We do want sophisticated JavaScript applications so But if we're gonna allow a broad audience of people to write those kind of applications, we need to close that gap I'll also throw in a plug here for glimmer which is Extracted from ember. It's embers low-level templating library, which is now published and usable as a separate package It's basically at the same level as a react so you could get to start small and Adopt gradually all the pieces of ember so we have a pretty good story all the way up from the very small up to pretty ambitious applications at the end point But we don't up until now have a good story for going all the way from ember to say word press or Drupal So I want to talk about work. I'm doing now to try to get us there So today. I'm talking about the card stack application framework and you'll notice I've got a whole bunch of things in that box above card stack and I'll I'm gonna go into more detail about why that is But I left them there because the point is that card stack is opinionated about servers, but it is not It is not doesn't want to be your only server it's all about integrations and integrating with Drupal is an important one an important example So the goal is to have a smooth continuum process where if you start at the very small you could start with glimmer Which is a small fast focused UI kind of if you just want to make a job with widget It's a great choice for that you gradually add capabilities by installing more packages all the way up to full ember application And from there somebody who was already experienced with an application could install packages until they're up to the full card Stack experience which is much more of an out-of-the-box experience where we want to approach the kind of broad-based access that Drupal already has So the kind of driving principles behind what we're doing with card stack the first is that we embrace HTML and This is it's when you say it that way it sounds uncontroversial and everybody likes each and like HTML is obviously what makes the web go Around of course we need to embrace HTML But it's actually a fairly strong opinionated stance Especially when you look across the the universe of ways people write JavaScript apps I Think it's actually really critical that the way you interact with Components in ember or glimmer or card stack is in a language that is at very consciously Very conscious designed to be HTML plus a little bit Which is very different from saying it's just JavaScript because JavaScript is a massive universe of semantics and so if you look at if you contrast that with Writing everything is pure JavaScript writing it as or running or writing it as JSX and transform that into JavaScript Right, you actually you suck a huge amount of semantics in that way Which means you don't get as much static analysis and you can't and most critically you can't help users as much And I can give some examples of that as we go further into the talk But basically this is example of the principle of least power Right all of JavaScript as a templating language is actually more power than you need and that's actually bad because it means you can't Statically optimize them. You can't teach people to write them as well. They're harder to debug all those things The second second principle is that card stack taps into the deep ember add-on ecosystem That's why it's built on ember And it's because in that earlier slide you saw ember was kind of the furthest to write to the right among the JavaScript frameworks the furthest toward the more standardization more features set You it turns out you need that right? I think anybody who's worked with Drupal understands the importance of Drupal modules and understands the importance of API boundaries Plugability standardization You can't build something like Drupal without that and you can't build something like card stack without that So we needed a framework in a community that actually buys into the idea of standards that's why it's all built on top of ember and Lastly the thing that's unique about the card stack architecture is that it coexist with the data sources you already have and Certainly for a Drupal audience one of the most relevant examples of that is that it coexist very nicely with Drupal, right so This is important for a whole number of reasons But most of mostly it's because every practical application that's going to deliver a lot of value to people almost always needs access to some data That's already out there right starting from a blank slate is a very rare thing and a lot of times even projects that do start from a blank slate They do it because it was too hard to start from the data they had so they kind of had to duplicate or throw away and You see this across especially across large organizations all the time There's I have an example. I should have got a speech out of it of a login screen for a major bank with like nine different login buttons Because they clearly acquired and built and accumulated many enterprise systems over the years and Integrating is hard. So It's especially hard if you do it after the fact So the goal here is to build an architecture that is all about integrating from the beginning So before I go into more detail on these points, I'm going to show a quick screencast video Demoing a little bit of the experience of what it feels like to edit using these tools in the card stack architecture I have some silly sample data here. I'm just moving through this. It's kind of simple site When you That one of the couple of the things you'll notice as we go through this the experience is really designed carefully around keeping people in Sight, I think I think we all get why that's desirable Wow, this resolution is not good, huh? Oh, well I have to show these videos in fuller as after after the It's also designed carefully around balancing structured content versus Kind of inline whizzy wig. This is not this is not a freeform whizzy wig experience. This is structured content Which is important. I think that's a core value to Drupal. It's a core value to card stack as well So what we're seeing it is Context with structured content editing and that's why we have these kind of toolbars that affect the experience So here we're we're making some new content. We're adding gonna add a picture of my son here with his crayons All right, we're gonna add some content now This is a this is a rich text field backed by mobile doc really great format and libraries You should check out it's cross framework JavaScript vanilla JavaScript supported We're gonna dive here quickly into The fact that content has many forms and so the tile form of content is actually really important This is the or rather card form right so We can preview the card form of the same piece of content. We can go in and customize it So here I am actually customizing the crop of our photos so that on the tile form. It's gonna look nice And we don't have to have just one kind of one tile form So here we're gonna customize how it looks at one by one We're gonna go in and say we actually want to also support a two by one form of this content and So you get one pretty good default result here. It seems good. We didn't need to customize that one too much Now let's say we're also gonna support a hero image form of this content And we're gonna customize a headline and some link text As I'm adding these formats to this piece of content I'm basically approving it for use in those places and so this talk I don't really have scope to go into depth on kind of layout and search and all those things I'll touch on them kind of briefly, but I think I'm at least illustrating the basic point that content has a lot of forms It's really nice to be able to edit and preview them all in context okay, and then Last thing I'm just gonna show here that we can go into our editorial controls Approve it for use on the home page Market published hit save and we'll find it back as our current Hero image on our home page Basically because like this homepage happens to be set up with the newest newest content wins So so that's that's to give you a taste of the kind of experiences that we're building with these tools So what is the experience like of actually building out one of these sites so I meant I mentioned that we're bullish on HTML and That's a deliberate and conscious decision And I think that HTML is a as long as it as long as something like a template language is designed carefully and has really great tools around it It's actually pretty broadly accessible and so in cardstack today the way you actually Discern me the field order for example is literally by going to a template like this one and Moving things around and so having good tooling support for that is the kind of thing we continue invest in You can look at this template without knowing a lot about templates and get a pretty good intuitive sense of what this means if you've had a little at least a little exposure to HTML and Teaching is actually one of the core values here as well. The better the tooling is around this stuff the better We can the more people we can we can reach and the more the more they can actually interact on a smooth continuum from somebody who's an experienced developer to somebody who is you know Just getting started as a developer to somebody who is just getting started with HTML and CSS to somebody who hasn't done any of this stuff the goal is to make an environment where all those people can find a home and be productive and But be constantly interacting with people that other points in the continuum that way that gives everybody a chance to level up and learn and the learning flows in both directions because Even the grizzled developer learns an awful lot about how to make this their contributions Work for broader audiences when they have that interaction Under the hood when we should see a template like this this kind of thing passes through the glimmer compiler which is actually gonna be able to Tell you statically if you're doing certain things that aren't gonna make sense It's gonna tell you statically if a tag's not closed It's gonna it actually is a completely spec compliant HTML parser So it'll even tell you that you really shouldn't put a div inside a span and things like that We know that we know that content is special Which is why all in that demo you were seeing the little blue boxes are drawn automatically around your content They're detected statically here in these templates. So all the author of that site needed to do is make something as simple as this Now one of the other nice things about HTML as a kind of lingua franca is There's really nice patterns for composing it and that's not an accident. That's how HTML is designed But I want to take one example, which it talks a little bit about Plugins and plugability and how that connects to theming and in a componentized world so I'm gonna take the example of let's install a plug-in to our to our system here. That is the Drupal author authorization plug-in and What it gives you is a is a component that you can drop into a template called Drupal login form And it gives you other things too. It actually installs server side pieces that actually know how to speak to Drupal and do token exchange and all those things But when you install the plug-in that the vision is you install the plug-in and what it shows you is actually this snippet It's and like sample. Here's what you paste into your site put this where you want the login box to be right now That composes very freely with a whole host of other things But of course like people care about being able to style their things They care about Customizing and reaching into something like a login form and making it look the way they want it to look and behave how they want it to Behave so a component like this one If you just invoked it like this you're gonna get the default thing it's gonna have some default Behavior it's gonna render a login form and it's gonna know how to actually speak directly to the backend and authorize authenticate you through Drupal But you can use it in a more expanded form and we would typically call this block form in ember world because You're passing a block of template into your component and in this case the component yields out usable things to you And in this case there are I think there's a Form is think of it as low as the local variables here, but it's got the username password and submit fields What's nice about this is now You get to put them where you want them if you want them in a different order you just reorder them here If you want to add Classes to them you do that if you want to add other content interleave with them you can do that too you just put it in here and more importantly if you're When you want to install a theme with a certain look and feel and layout behaviors that theme is also just giving you Components and they can compose as well So in this example if we wanted our submit to actually be using some fancy button that comes out of a theme package Right we can expand again and use our form our submit component can actually instead of rendering its own default layout Can be purely behavior it gives us an action and we could now render something like a button directly and Compose them right so these kind of composition patterns are extremely powerful and My contention is that with good tooling with good teaching and systems that are carefully designed this is a fairly accessible experience It that's not to underestimate the teaching involved to get to some of the point where they feel comfortable with this kind of Templating system, but it's a much broader set of people we can reach than if you say just like write an app in JavaScript Some of the nice things here are that all the data flow All the behavior can is basically fully statically and statically analyzable by the compiler So we get to give people a lot of feedback So I want to touch briefly on the little some of the time I have here on like what is this architecture I'm talking about how does this stuff work under the hood? So I want to touch on the kind of server side pieces you need to do this kind of experience So if we think about the continuum of complexity up from very simple JavaScript libraries to a framework like Ember Which is pretty comprehensive, but all in the browser and has no opinions about the server up to what we want to build here for card stack It's clear that you need server side pieces Something like that Drupal log-in form plug-in. I showed you earlier only really works if it also understands how to configure on the server side Like the enough crit the credentials that needs to speak to Drupal the ability to do token exchange that sort of thing So the way we do it is there is a server side piece we called the card stack hub The critical thing to know about the card stack hub is that it is not the canonical store for any data so all of your data whether that is Content that users are editing whether it's config Whether it's the set of users and grants and all that stuff schema definitions all of it lives somewhere else And that's somewhere else. It's actually fairly agnostic about so one of the back ends You've implemented is a git repo one and that's actually a really nice pattern especially on a brand new site that's getting going because Your code is already in in in source control and your config really should be and making that and pleasant experience is really important But in a fast evolving site, it's often a really painful experience if The folks working on content are in a completely different workflow So by keeping all that content and config All along with your code all in a git repo. That's a really powerful kind of back end. So when you use that back end People can basically Make changes on the site save their content and they are there behind the scenes making a trail of commits and git on the Branch that you want them to and we could even render the site under different branches Gives you really really powerful options for workflow An SQL back end right just would let you plug directly into whatever existing databases you've got a Super powerful way to access you kind of your arbitrary Enterprise custom stuff that you might need on a website A Drupal plug-in like which we which we have not fully open source yet in the repos I'm going to link you to but we have it working and we'll be open sourcing all of it This it's powered by the Jason API module shout-out to Mateo and and all the folks and women all the folks who've worked on that one that makes this kind of plug-in simple and nice to use and Lastly I like marked legacy business systems because that is that's working on a lot of advanced projects like that is partly why We came to this hub architecture in the first place It turns out organizations have a lot of a lot of data sitting in a lot of places They got data warehouses. They've got users in active directory They've got all kind they've got customers in CRM and it's too painful to Merge those things together right it becomes an expensive custom development process that puts it out of the reach of too many people and out Of the reach of too many organizations So it's very much in the theme of democratizing the creation of meaningful ambitious applications that these things are now Plugable right the goal is that somebody can install a plug-in that knows how to speak to Drupal Put in the address of their Drupal and the credentials to speak to Drupal and now they have in their in their news new app They're building using cardstack. They have full access to all that data It it's completely first-class. There's because there's no database of its own in the hub The data from Drupal or the data from git. They're all equal citizens among the data There's it's not like many of the integrations Where that you would do in a you know in a server that has its own database Where the stuff that's not in that database is not really first-class. We don't have that problem now the way we solve We've the way we pulled this off architecturally is that the hub is a fast Cache essentially of all this data It uses elastic search internally as its store which can scale out to very big data sets And it could do very sophisticated searching on it And what that means is that you can implement these plugins like the git plug-in or the Drupal plug-in and they don't have to be in the critical path so We can index things at near real-time or as fast as your indexer can go or as fast as your legacy data source Can go we index that all into the hub and then from from the hub forward to your applications We can serve it all out of fast cache And that also lets us standardize our query language because now apps can speak one standardized query language that knows how to query that Cache and so when you have a field full-text search or an interactive search plug-in widget that you're adding to your site And you add a new back-end All of that new content from that new back-end is natively searchable. They are all interleaved. They're all just there together so it's a powerful architecture and We've been using it successfully in client apps and have been progressively open sourcing it So this is the repo that held most of the stuff. I've been talking about card stack card stack It is This is so, you know, we're working in that open. This is a hundred percent open source. This is not a product for sale I believe strongly that we need this ecosystem to grow and it needs to be a legit community project We have I have a bunch of contributors helping out. We've been extracting it from projects that we've done and Kind of codifying best practices and standardizing API's as we go So where we are today is this is this is new software It is not a polished product that you can go read the docs try it out This is we're really excited to to hear from other folks who are doing this kind of work and want to join forces Shipping an ambitious community project like this takes everybody it takes a lot of a lot of hands and I you know Drupal itself is a testament to that whole process. This is not different So to achieve all the things I'm talking about We're on the hunt for more contributors and more folks who want to try it out Even though it's very new and need to dive in and help us with it And also just organizations who think they can use this if you've got a project that you can use this on Come talk to me and we can figure out ways to Figure out where the current gaps are and what you would need and what we've already got and how to close them together So so that's the pitch the pitch is let's Let's get a broader set of people empowered to actually ship really ambitious applications on the open web platform So that Everybody gets to build great software and that is all the time I have so I'm gonna stop there And I'm gonna let Taylor get set up. So instead of taking questions live Actually, maybe I can just come down while he gets all plugged in and and then when he starts we can go and Folks can get me after the afterwards and we can take questions offline. Thank you