 Every single has geek talk of mine has had technical difficulties. This is no difference. I've vaguely prepared for it So fml the name of the talk all that's well and good, but this is actually going to go a little more deeper So I'll tell you over the past few months I've been thinking about content management systems, which is to say I had to log into Drupal once and decided I don't ever want to do that and Here's the problem with content management systems, okay in a company where you're doing content management magazine, whatever there are too many types of content For example in Mintra, there's like banners and layouts and stuff for the devices There's little style tips that show up when you search for something. I don't know if that's still live There might be some configuration of we are opening up our new premium brand shop So we have to save like layouts for the thing again So we need many different types of things and if you try to build them in one CMS Nothing yet. Oh It's still starting up. Okay. I need to talk to my boss Right so the problem then is because you have all of that and you try shoving it into the same CMS the next Project that comes and says oh by the way, it needs to be a little different Your screwed like you have to actually like you spend your lifetime building the CMS instead what like it's a different angle I'm trying to take is I'm trying to build libraries and helpers for content management systems Like okay fine You have a new project and you need a data store you need to store something you need an API to it And you need a way to quickly render it so vague philosophy behind how it should be stored and how you should Output it out to people and all that just don't count this in my 15 minutes Ray are its Beach balling on the Apple screen. Okay, whatever. I'll just keep talking You guys are already paid, right? So Cheap jokes get the best laughs So anyway, so yeah, so these are libraries and helpers for content management systems So for example in my head I just want node module which helps me connect to a collection of data and get lists and query and offset size You guys have built like rest API, so I want that Automatically I want to be able to quickly generate like forms for people to edit stuff So this is where the human part comes in now if it was just machines to talk to each other I don't give a shit but like the actual format of the document itself now matters because the marketing guy is changing it at 3 in the morning, he can't call me up and say what the hell is it saying commas missing in Jason He can't edit Jason. We made him try but he can't Dude like it's refusing to start up with the thing connected. I'm just pulling this bit out for a second Let's do a hard restart hold on it's okay lunches in that great. I asked I'd say whatever I have to okay right now This is all blank air Yeah, dude trust my computer just Why does Apple do these things Apple is asking my phone whether it should trust its other brother computer that it's connected to What give it away the big cable connecting it? Okay, so I have slides though I Don't do this fancy JavaScript slides thing. I bought the laptop. I'll use Keynote that's the one dude. I'm just being honest you guys can laugh at it Figured I have to figure out a way for other people to buy me fancy computers if I don't learn JavaScript to do it Then I'll do it. Are you getting any video feed? What the hell dude? Is this the same one that I was using yesterday? Okay, you're getting video feed now. Okay now. How you tell me what I'm doing wrong I'm just standing up here. You have to tell me what I'm doing wrong at least You want me to just turn my laptop around to these guys? To get your complimentary binoculars in the inserts all of it you asked me to do a demo code thing So I have demo code Okay, no because it's telling me that it's found like it's on two displays So I don't know what I'm doing wrong. Are you sure you're checking the right channel? Yeah, this whatever this Apple Adapter thing is do you have another? Oh brilliant. Yeah, let's try that. Okay. Now. Does it show a video feed? Again Not sure how another adapter will help them scary I kind of buried the lead also by telling you guys the intro now. You're like, yeah, okay CMS is not interesting at all They're not Okay. All right Yeah, that should do Okay, and here you go. All right. Tell me you're getting something now man Hey You're gonna try this in the beginning instead of asking me to fix a tech problem. I'm no good at it. Okay something Surprising how long a while do you suppose? Oh My gosh Oh, and my time starts now. Okay, cool. So so as I was saying so FML is cool like as a data format as something we figured but it's stupidly easy like in one slide You'll know what it is and you'll say, okay, that's a good idea You will and then we'll move on. So basically content management systems for the 21st century What are the things that we need before we do that? Let's quickly talk about some buzzwords What content actually means so content is different from your any other row of data in your database By the very fact that a human is going to be interacting with it now There are layers of abstraction on it. So for example, MS word will give you a nice UI and generate the shitty XML syntax SVG is nice. They're again like little tags but Content in itself is like of 50 types. Okay, it might be in markdown. It might be in this it might be in that So first you have to think about like the first stage of content management is the creation part of it So every single thing I talk about I'm going to talk about in two terms One is like how humans interact with it and how computers interact with it And I want to solve both problems because that's frankly my day-to-day work and I need to figure that out So content is you can imagine like an a4 sheet of paper with stuff written on it This is my artwork like it's like beautifully aligned and all that so that's nice But specifically like I did it this way to show you that okay fine like a letter It might have some metadata attached to the data and this is not stored in another field Like if you start doing that No, you say you have a field which is data and then you store meta fields in other data and all Essentially, I think in a document you could consider that it's part of the same thing Okay, it's cool and they can be of a bunch of formats You could write in JSON or YAML or XML or markdown or plaintext or binary So like binary I've started so for me like an image is content But I don't really want to write it to my document format So instead I assume that it's like a URL and I assume yeah that URL is pointing to an image so We can traction but it works. Okay, like I can just store data as URLs. Anyway, my URLs are coming from CDN I know they're not changing So the problem with this is no like if you're building a content management system Then like you have to at least with like some of these types You have to write the format in the thing and like I said metadata isn't even in the document So first thing I propose and this is like it's not even like an original thing. It's this concept of front matter so if you guys have used like GitHub pages anyone here use GitHub pages. Yeah, right? They have a little language where in between these three dashes you can pass in data in YAML format YAML is easy. It looks like this I'll show you an example in a second and you type in some other key value pairs and then you type in the body of your document so as an example, I'll say format markdown author Sunil Pai and I am editing this human interface. There's no Jason or anything. I like markdown syntax So I did this so that actually said four chance first, but I realized I had to put it out there So anyway, so anyway, so you could say that this is a document. This is the entire thing So to a human, this is how it looks and if you pass it through a compiler Which you could do in like a little while right now it'll end up becoming Jason So this is good like for my machine to talk to so I'll store it in that fml format I haven't thought of a full form for fml yet. So if you guys have any ideas, write it down So it just says fml. So as a computer, like when I'm talking to the database, I'm not really talking to the raw form I make it pass through a function which converts it into this Jason and now that I have a format thing I can live like figure out which compiler to use. So if I'd use like format Jason, then it would have picked up one Jason parser and made one Jason object markdown is fine. I'll leave it as text and so on. Okay, so Excellent. So now you ask yourself as a computer, first question, how do I talk to these things? I think like a very simple API looks something like this. There'll be a collection You'll say dot set my first blog post some document string which you'll get from an input form At any point of time you want to get a particular key. Assume all of these take callbacks I just got tired of writing callback the whole time. Anybody I will like get For a given key what the document stored at it is and query it based on something like find all blog posts that reference the word guitars So yeah, this is the API like for content as like collections will go like a little more complicated but in a sense you say that this is the API. So now once you have a simple API around this content, you can start building stuff on top of it. Okay, that being said, this is where it starts getting interesting. Okay, so like layouts are a special kind of document and this happens of course at Mitra like these guys want to change the layout of the home page, add stuff, remove stuff. It has to flow a particular way. There's a Carousel with three images and all that jazz. So one thing that it has that it's not that's not common with like all types of data is it's fairly tree oriented. You can express HTML as a tree and you can think like HTML is a tree and that's a good way for us to understand what these guys are thinking about when they're making their layouts. They're like they want one big block container and they have like a little bit of they have a Carousel with like three images and they think of it as a tree like those are the pieces. Sometimes communication happens like across these components but that's not the important bit now like solved problem anyway. But the idea is that okay fine there are like three style layouts. So it turns out that Jason is really sucky for storing three-type structure because a like if you're a human who's editing it either like you have to come up with like your own custom key name. So for example, no not this one, hold on we'll get to that. So this is our first cut at a Jason that we used for our Android layouts okay. Like we had page and it gets a title and there's tab name, sections and there's a banner thing which takes image URL which is different from some other image and so on. So like this is fairly it's a good first attempt but it doesn't like really represent the tree nature of the thing. So what we actually want is a data format at least like for a computer to talk to that looks like this. So what it's actually doing is you can imagine this as XML being converted into Jason okay. They'll have a each node will have a type so that's your tag name, some props which are like attributes and children nodes that you pass to it. So you do this consistently you see like all the keys are essentially the same specific components get like props but again I can't expect the marketing guy to do this. So enter JSX. So I'm so sorry becoming like a React fanboy and all but I'm like stealing ideas from them for some specific things. React wanted to do components with their M well not MEC framework whatever that view framework and they looked at a bunch of things and APIs and all then they said no like we want to be able to write something that looks like a component structure like HTML and make it break down to like JavaScript. So I'll show you a quick like demo of what it looks like. Okay how this JSX converts to JavaScript. Okay demo gods. Oh yes my tabs are closed. Okay hold on. I'm pretty sure I have a screenshot somewhere. Two, hold on. Live editing sorry. Didn't plan on it at all. So this is what I this is how I want those guys to be able to lay out the page. I have a sample of of course why am I doing this to myself. Come on open up. Oh it's opening there is it? Hold on. So project's name is mix tape and let me just sneak it away from you for a quick second. Yeah yeah yeah hold on don't worry. Oh sweet okay so I have the actual one set I planned on showing you. So this is how I want them to be able to write the code. It looks like HTML but like custom tags like layout and tabs. Those obviously don't exist and then I want to convert that to JSON. So I picked JSX because what it does is oh brilliant now my connection is because I had to disconnect at that time. Come to 10 guys let's just go back to that sample. Okay so I want to take this but further I want like a little more flexibility which is to say I want to be able to pull off stunts like this as well. So do you see like what's the difference here? Like I'm actually embedding JavaScript into the thing which is slightly weird. You've seen this in like templating languages but what I'm actually doing is like returning real components. There's no string manipulation that you get from somewhere else or no two string implementation. No I can actually write code like this and JSX like just lets me do that. Oh look this thing actually opened. I want to show you like what the compiled JavaScript looks like when you actually yeah. I pissed off the demo gods as a child I think like so I don't have a way to make up for it right. So if you type it in like this it gets converted into JavaScript like this very regular JavaScript. The tag names become function names and the props become like little hashes and all the children that you pass to it go down as further arguments to your function. Simplest abstraction that works. Cool so whatever. Let's just go back to my slides. And so that's the idea okay so like JSX you can use it to describe tree structures in JavaScript and we abuse that to be able to like write JSON to us. These guys are thinking I'm going to use this to generate the react components but my first concern is like actually building an API around it. So like I said we wanted to be able like this was our first cut okay this was the first cut of the JSON. We wanted them to be we wanted JSON like this and we ended up to being able to write JSX like this. For a marketing guy who knows like a smart smattering of HTML this is the easiest thing in the world. Fair like you see it and it like it reads out as it's supposed to be. If you open up your Android Mintra app right now free you'll see how this basically corresponds to actual components on the thing. Now there's no JSX running on the Android app. He's just listening to the JSON which looks like this and he carries on. It makes it interesting because like it starts influencing the architecture of the components that they're actually talking to like your JSON matches very closely to UI components and that's all I'll say about that okay so so far so good JSX I can use for doing layouts I can pull off a stunts with it. Then we talk about like collections of data. This is very simple like I'll run through this very quickly. It's a solid database problem. You have a collection of documents you need to be able to store it and query it and so on. Feel free to use the thing of your choice MySQL whatever so this library lets you like plug in whatever as long as you write a little adapter for that get set query abstraction okay so you could use SQL or parse.com you could read from the file system directly so for example if you want to make a website and store a bunch of markdown files and just spit it out maybe have a cache totally works so the ones that only work right now are like SQL and parse.com but they're fairly easy to implement so like left it as homework to the readers more important than the actual storage at this point is the delivery of the thing call these documents you have to be able to scale across like a big organization or small organization whatever people are going to be wanting to make product requests of your database so to an engineer right these are three different projects this I assumed are like queries from Zomato because I'm tired of talking about Minthra but I'm assuming that the product managers ask them these three features we want to be able to show popular restaurants in Bangalore we want to be able to show recently opened restaurants in Bangalore and then things that I the user who opened up the app might like to eat today so the second one is obviously newest and added to database that's simplest to solve popular restaurants means now it becomes a big data one you have to like do queries and check ratings and all that things I might like to eat today is a real time problem see what his what his tastes are and like then find restaurants that match that and but your product guy this is like just one these are one type of request I have three tabs I want to show these three things what's the big deal why does it have to be different features so that's interesting and I wanted to talk about it in a little more depth but frankly I'm just going to point you to elastic search elastic search is cool for setting up search on your website so it does like some things out of the box really well like full text search you can do stuff like synonym matching and so for example I want to be able to show sports related style tips if you search for the word Nike even though the tips themselves might not search Nike and all that so I'm really not going to go into any detail about this feel free to go to an elastic search search con do the tutorials you basically plug it on any data store and gives you a searchable database to it what interests me more however about these documents now is about the way that they talk to each other or at least reference each other the references themselves are like of a couple of types and I'll tell you about that but I was looking in terms of like data how databases to it versus how the internet does it the internet uses hrefs like anchor tags and it doesn't even know if the resource exists at the at that point at the end point in fact sometimes it points to like dynamic URLs so there's one type of reference where I know like an ID that I have to talk to you like go to one inbox ID do a get request on it and get it and then there's like dynamic like find me like you should be able to hook into any service find me shoes that do a I'll just get to what I mean okay I want this to be true okay I want to be able to say block I want to say carousel dump a bunch of product IDs and perhaps have a search block as well two problems with this first thing that thing that jsx actually doesn't contain any more data it has to talk to a service and get it in whatever format second one this thing does like it's slightly harder like assume that there's a search team and all but again you have a service that gives you like search results to it but you're like not really clear about it you don't know what type of components will come back and stuff so throw this jsx drama at it and be able to run asynchronous transforms on what the json comes back so what I mean and I'll demonstrate this to you you take whatever that jsx you wrote this jsx right convert it down to first phase json like just parse it and then run like transforms where you walk down the tree that's generated and like product ID I have a little product service that I talked to pulling whatever props are there from that and come and shove the data back in quickly do a demo of that this doesn't work no that's why make dev start up my server so I'm going to so before I get to that I actually want to show you some code like what it takes to get here so this is your first look at like how it happens okay did it make that big that's useless so I made a little jsx project in this little layouts thing that I'm doing first thing I do is I set up a little configuration you guys are having a look at my parse id and key that's great whatever that's not even important so I set up like what the collection I'm talking to is which view I want to use and that's just because like it's a little app that I built around this how I'm going to compile this so I have a bunch of components and I'll show you the components right now I have a session config again feel free to hack into my laptop guys and I can set up like an admin panel for it immediately where some guy can jump in and edit stuff further let's have a look at like what that actual transform is because that's an interesting thing to us it's about this much code I have a little endpoint where I can get details for products and details for the from the search service I just pass it to it take that call back and add it back to the node that's generated so what oh is there a password though no not really so what that does is it takes that little bit of jsx that you just saw and magically just converts it into a big ass asynchronous function service call see like the product thing has been filled in so like if I just this up for a second so I had three products there with these IDs here it's just pulled it up and I have a search data so like a whole bunch of search products and filters and whatever the hell I want it does that with that one line mind you I haven't like fair enough like I've made it such that these components are available to these marketing guys but now I have an EPI around it let's solve the let's solve the UI problem also I use react it works well with the style of Jason I don't want any arguments about frameworks and all I'm sorry it just works this is how much work I have to do okay this is my entire block component this is my carousel thing into which I dump children given a product like I'm able to like render a little ah ref and an image on it and I have a little search component there's nothing else there's no DOM loading and all that so what I get for that effort is this UI like it's rendered those three products and a whole bunch of search products cool thing about this though and assuming my net connection works now is the admin interface that you get is like a live editing thing so for example you can take this and move it down moves the products around let's say I want to search stuff before this it just works so that's kind of nice like now I have a way like I have a way of like making layouts and arbitrary connections and doing this so I do this and I save it I will save button over here and it should work saving come on saving save please oh okay saved and then I go to the Jason that's generated for it and boom so search thing is now up on top and I haven't had to like stitch any apis together not making any god level apis and that's cool so I can do generic stuff so just quickly back to this okay awesome so now that's where content has reached like I should be able to save dynamic stuff into the document and not resolve it like until it's asked for and I should be able to have a way so eventually I guess those will be replaced by like drag and drop you guys but for now like it gets a real thing like salt and it's the final piece of the puzzle then is like consumption okay consumption is fair enough like you have a bunch of clients your websites your iOS apps your android apps so I want apis available to this but you sync with that team and say I build it in this component way so all you have to do then is like walk this tree of Jason they'll tell you what components are where stitch those together and you have an android app so android app right now totally working on that fairly scalable so a couple of demos as to what is live right now how much more time do I have it's come on dude like wasn't my fault yeah exactly so it's 120 30 minutes right you guys said I have a half hour talk I didn't lay out let's look at what we actually do for the android app or the password work okay so whoever was shattering through the network looking for basic auth passwords can bring down mintra right now so this is what we actually do at mintra right now we have a whole language very simple about seven or eight components let's just zoom into it like zoom so yeah like they're able to like edit like layout and icons and stuff like that these guys this guy wakes up at 12 o'clock at night wakes up at 12 o'clock at night this is a fully functional version of the website right now so you can choose like a page and women for example what the women's page look like it's like come on render oh okay so it renders shows you three tabs fully working let's just go back to the men one just to show you that the thing is a live interface and so like the entire thing like vaguely works as it does on the site or the app or whatever and it's a good enough reference for these guys and what they'll do then is so what they can then do is oh no you know what for tomorrow we are going to be taking this banner off and maybe pushing it down here instead I sure would like the carousel of thing to come on top somewhere no no no but I have a ending tag so you can use both styles of tags that you don't need the slash carousel and you do this and you click save oh wait so let's like to solve some people at work let's say that clothing is it's just say 40 percent of our JS food volunteers with bald heads anyone who matches that can I just say save and see who gives me a phone call in the next five minutes what is showing up on the app wait fine I'm just going to close that sorry about that but the idea is that okay so I've done this much so far and I want to like open it up because frankly I don't know what I'm doing and so I'll be putting out putting it out on GitHub today on my report there's no like package publish and all but you're free to like do a require use these libraries and like start doing fancy shit with like layouts and all so it's a real real enough problem for us and it establishes a rhythm okay so remember like there's no such thing about a framework the react thing is completely optional but it establishes a framework for how we deal with content in our office or wherever else like I want to do something it's not a haphazard okay find data store and api and all that just but there's a story through the thing like make like conscious decisions about what your content is going to be like what it's going to talk to and you can add on extra stuff of course like just like simple service calls and components and it ends up working across platforms and the damn thing works on ie8 which is cool it's fairly secure you're never going to be able to post to that end point if you can like that's cool I guess you get 40% off and that's so that's what I'm like looking forward to now I've suddenly seemed to have like walked across this thing where where I can now solve a bunch of front-ender problems in my office like really quickly oh fine you have a bunch of data that you want to solve oh you're making premium shop layouts okay fine just store it this way here's your admin UI to it and here the api is for it in about half an hour the guy is actually building the app instead of waiting for a backend guy to give him database access and he can move to another database later that's also cool like you can do migrations and stuff like that but frankly it's just a dump you're using the database store as a dump the intelligence stuff is happening in real time with like elastic search and these transforms and stuff like that so yeah I'll be open sourcing it today and open sourcing middle I'm just pushing it to github yeah like now whatever like I think I have some swear words in that and my boss cares about things like that but anyway that's it and that was my demo oh I had that slide and I'm open to like questions about it what do you think does it work oh I don't know if that means yes or get off the stage oh yeah questions yeah sure so you have these you can shout haven't you had breakfast today hey so you have this server side you have these jsx which is also passed on the server side sure and then you generate your queries based on that your elastic search queries on that basis basically yeah so the elastic search will like parse the generated json not the jsx etc yeah of course yeah yeah so it gives me like chance to do a bunch of stuff this transform callback not just like generate json but for example I can run like term extraction on it and get a bunch of interesting terms like the sports tip thing like I'll say like I'll just add Nike looking through our brands which are Nike and that is what elastic search will think will actually talk to okay so then by the time like I'm in production no one's even talking to my database it's just elastic search and varnish or whatever okay so the stuff that you're going to open source it has this bit as well which bit I mean like the the query part yeah so like the elastic search thing I'm like I've never like really used it so I've been experimenting with it but in a sense like you know what to do like there's api endpoints which give you each key value you get all the list of the keys and you shove it into elastic search and magic you have search okay and you have these three product queries and then the search where do you bunch these queries up or like what does it do now I mean like you do like product search one product search two product search three oh no okay so for those three single ones so it does all of these asynchronously okay it sets up promises on all of that does the service calls once they get together split the JSON out so product is product service yeah it's asynchronous it's cool any more questions um so was uh far really good performance one of your aims in building this was performance yeah like you know CMS that's responsive and when I say responsive not in terms of media queries sure but that's just it like it boils down to what you want to do with your content do you want live queries then you'd be better be okay with like more service this thing or like you figure out a way to pre-generate it and put it into elastic search and all that performance is like that's just that's why I like have that as one section delivery is a whole other plan all together but right now am I able to create manipulate it manage it for non techies and actually like have a good API to read it that was my major concern because redis seems to be like the perfect backend for this you could use redis to make an adapter any more questions sorry yeah generate this jsx from this server side I mean you have this bunch of reactor and a component on the other thing so we're compiled so I store the jsx to database yes and like I'm running it on the server side in a VM okay and I'm using the program why why because I'm running JavaScript on the server that other people are typing I have to be secure about that okay okay okay any more questions anything Sunil yeah where do you hire marketing guys who can write jsx oh so this is the thing okay this is the thing seniority gives you in the company you don't have to ask anymore you say this is how it's happening so that's how I make it work they're like okay fine what is it this angle thing and all that and it's very simple like I don't care about them writing the JavaScript in it I just wanted like the html thing the JavaScript part is like total bonus for me to play with I did a couple of experiments where I was able to generate custom banners which said like welcome Sunil and all that but I figured that would piss people off if they like if I knew who's coming whatever any more questions I did that answer your question okay all right so sorry like it was totally rushed and I'm running out of time and tech so you can totally come up to me talk to me about it I'm going to be working on just this and figuring out where I can reach with it happy to talk to anyone who has any ideas about it thank you for your time enjoy lunch