 We'll just do a quick start check. So how many of you guys are aware of famous? Have you guys worked in famous, or have you been following famous over the past few months or so? How many of you guys have seen the periodic table demo of famous, right? Isn't it awesome? So for the benefit of those who have not seen, probably you can see it. But thank you very much for joining in today. So those of you who have seen the famous periodic table demo, you would obviously know what it is capable of, and those of you who have not seen it, all you can check it out. So I mean, my intention for today's talk is not to really show you those awesome animations, that anyway the famous guys are doing it. But we are going to be looking at some of the applications which we can build using famous. Specifically for the future, I mean when I say for the future, what I mean is we are going to be looking at some of the use cases, possible application areas and trends where famous can really help us. And I should say famous along with the web. So as we all know, web is pretty much prevalent in our lives, like 15, 20 years back. We only had desktop browsers. And then we have, now we have these mobile browsers. And we also have these embedded devices, which I mean, of course, earlier these embedded devices used to run some miniature OSs. But now they also run full-fledged OS, Ubuntu, or some versions of Linux. And these OS also supports some version of Chromium or Firefox. So we can actually have applications of web-enabled devices running UIs. So that's going to be the focus of my talk. I've got some demos to show you. But I'll not be showing you any code during this talk, because I'm very, very scared of showing my code in public. I'll give you my GitHub link. You guys can go and check it out. Find any bugs. Please don't ask me. But if you fix any bugs, please let me know. So my name is Shyam. I am a technology consultant. I work on a few of the emerging areas. And that includes web. And my involvement in Famous has been, for the past six months or so, so I run a meetup called Bangalore JavaScript UI Hackers Group. And as part of that, I've got the liberty to kind of fiddle around and dabble with many of the UI frameworks. So Famous is one of them. And so let's get started, guys. So first of all, we'll have a look at what Famous is, and what are the capabilities of Famous. And then we will look into those future application areas and trends and the use cases where Famous can really help us. So Famous is a user interface library. It is also an animation library. It is also a WebGL rendering library. And it is also a physics engine. It has an inbuilt physics engine. Now you would say that there are so many user interface libraries already available. You already have so many animation libraries. jQuery itself has an animation library. You also have WebGL, 3JS. Anybody has worked in 3JS? And then you obviously have physics engines being implemented in some other libraries as well. So what is the thing that Famous does which others can't do? And how does Famous really differentiate itself? So when it comes to user interfaces, Famous has something called as an imperative development approach, which is completely different from what you have in declarative syntax of HTML and CSS. So all the coding, all the widgets, the panels, whatever you build as part of your UI applications, will be directly built using the JavaScript programming language using the API, which Famous provides. You typically do not write any HTML code as most of the developers are using. Famous supports animations. And Famous claims, in fact, they vociferously claim that they can do 60 frames per second, which nobody else can do. And I guess they have done some benchmarking also. And they have got some pretty good claims about this. So they claim that they are the only library, only animation library for the web, which can do 60 frames per second. How they achieve that, we will have a look at it. I will give you a bit of an overview about that. Famous supports something called as a mixed mode. How many of you are aware of mixed mode? So mixed mode basically means that you can render DOM and WebGL in the same coordinate space, which is otherwise not possible. So you would be using, let's say, 3JS for rendering your WebGL. You could be using some other library, jQuery, UI, or something like that for your DOM. And then you will have to manipulate them separately. And you cannot even sync them together. And this is what Famous really achieved, that using Famous, you can render these two things together within the same coordinate space. I'll show you a demo, and then that will give you a better idea about this. 3D visual effects. So the physics engine, which the Famous supports, is something which is in 3D. So you have your x-axis, y-axis, and you also have your z-axis. So you can have physics engine operating in the z-axis also, so that you can see the near-par objects and things like that. And you can have physics-based animations using that. So this is how Famous differentiates itself. Before we get into the features of Famous and before we get into the demos of Famous, I just want to give you a small prologue of how exactly the genesis of Famous happened. And I'll just take a few minutes to basically get you on track on that, and then we will basically have a look at all the demos. So this is a statement which all of us are familiar with. Do not reinvent the wheel, especially when we start a new project, our project managers, our peers, our colleagues always tell us that do not reinvent the wheel. You have got existing libraries, existing modules, existing code, just use it. And that makes sense. It always makes sense to use your existing code rather than rewriting the code and then fixing the bugs and getting into all the complexities, which is really, really good. But what happens is, I mean, for everything, there's a downside, right? So the downside is that whenever you're faced with a new challenge, you always try to avoid reinventing the wheel. So you always try to find, you always try to solve a challenge using existing solutions rather than figuring out a new solution. And this is something to do with our human psychology as well, because we all want to be in our comfort zone, right? So whenever we are faced with a new challenge, rather than getting out of our comfort zones and finding the solution to the challenge, we always try to force an association between that new challenge and some existing challenge, which we have already fixed. And then we try to fix it. The best example of this is this. This was the early days of man-powered flight when the challenge was to fly. Obviously, we couldn't fly. But we knew that the birds can fly, because they have wings. They can just flap the wings and they can just fly. So the early experiments on man-powered flight were something like these. So if you see some of the vintage videos of man- powered flight early attempts in YouTube, you can see some hilarious videos of people trying to build these machines, which will just flap their wings and they would still not fly. And there have been occasions where people have kind of wore these machines on the backpack, and they have kind of jumped from the roof top of the building. God bless them. I don't know what happened to them. There are two definite possibilities. Either they would have been grounded for life, or they would have flown straight up. This is another problem which we always face as developers and programmers, software design patterns. All of us, I'm sure, have a liking for a certain design pattern. I mean, I had a fetish for observer design pattern once upon a time, so much so that I wanted to write all my code using the observer pattern. So I wrote one junk piece of software, which was nothing but a bunch of observers observing for events in a system. And eventually, it became so complex that the observers started observing each other. So it becomes an observatory mess. Until one day, somebody told me that you need to basically separate out the observers using a mediator. And that's when I realized that observer pattern is not the penalty for all the problems in the world. You need to kind of do a mix and match. So this is something which always happens with us. Whenever faced with a new challenge, we always try to solve it with existing solutions. At least it happens with me. I'm not sure how many of you guys would claim to do that. But then it does happen. And something like this is also happening today in the web world. I mean, I would say the web development world. So this is nothing but a small timeline diagram of how the HTML and the CSS standards have evolved from the way back in 1995 to all the way till today. It is HTML5. And as you guys would know, most of you would know that HTML was originally not intended for the kind of applications which we are building these days. HTML was originally a standard only for representing documents which could be shared across the web. We never had Ajax in those days. We never had user interactions, except for that clicking the hypertext so that it goes to the next HTML document. So a lot of things have changed over the last 20 years. And yet, we continue to use HTML because it just serves our purpose. And it does a good job. So this is what I call as an absolute versus a relative problem. I'll just come back to that in a little while. So 20 years back when HTML was initially conceived, the HTML documents used to be like this, where you had individual document sections. So you have section one, then section two. Section two is position relative to section one, and so on and so forth. But the way we build our apps nowadays is like this, a stereotypical web application, which has a header and a footer, sidebar, navbar, whatever you call it. Bootstrap does that, semantic UI does that. I'm sure all of you guys are aware of that. So what's the basic difference between the earlier one and this one? There's a linear flow, which is basically things stacked against each other one after the other, in case of a document structuring. Whereas in case of a web app, what you have is something which is nowhere aligned in one linear pattern. It's basically its own positioning. Every UI element has its own positioning. Now, this is not something which HTML was designed for, but yet we have evolved the standards, especially the CSS standards, to basically take care of all this positioning. So earlier, we had the normal flow of HTML, then we introduced positioning elements, we introduced relative positioning, and then we have also introduced absolute positioning, so that you can actually make the DOM elements appear with respect to the top, left, right, and the bottom of its parent container, non-absolute container. I'm sure all of you guys are aware of that. And further, the standards were again enhanced in CSS2, I think, to include translation, rotation, scaling, skewing. So you can move the things around. You can rotate them in different axes. Even in the Z axis, you can scale them, you can skew them, and all these things. So to build these kind of web applications, the CSS standard has been enhanced over the years, so that you could actually do absolute positioning, and you could do all sorts of transformations and transformations. And pretty much the web browsers have kept pace. They've done a good job. But then there is some problem when it comes to building animations and 3D effects. So as you guys would know, Flash was the de facto market leader in web-based animation until that day in 2010 when Steve Jobs basically gave them a blow. And obviously now Flash is going through the downside. But if you want to try all these things in pure HTML, then your browser goes for a toss. Because your browser is not able to handle the animations and the silky smooth effects the way it works in Flash or the way it works in native apps. It just doesn't do that. So you can build your web apps. And I'm sure there are so many web apps which are there in the market in the app store and in the companies which are releasing it. But then they are just apps. They're not really the apps which can do gaming and which can do those dynamic UI kind of behavior or animations. Because if you try to do that using HTML, then what happens is every time you change the layout or the dimensions or the positioning of your DOMs, your browser has to do something as reflow as this image portrays. So anybody uses Chrome browser and is aware of the Chrome debugger, then you would know what it basically means. It basically means that every time you have an Ajax call and your DOM is getting updated, every time you do a click and your DOM is moving around, your browser has to do some reflow calculation and re-layout the entire DOM, which basically screws up the entire performance of browser. And you have to do reflow, you have to do paint. I mean, there's a whole sequence of rendering which has to happen in the browser. And if you are using relative positioning in your apps, then it's even much more worse. Because if you have a second DOM element which is related to the first DOM element, if the first DOM element is moving, the second one also has to move. The third one also has to move. The fourth one also has to move, so on and so forth. So it has got a spiraling effect. So basically, in such cases, you would see this layout taking more and more time. That's where the web-based applications, especially for building animations and 3D effects, they really, really suck, compared to native apps, compared to Flash. And this is where Famous comes into picture. So the founders of Famous, the guys who created the library, they realized it. They also realized one more thing that web app is eventually going to be the future. Because obviously, it makes more logical sense to build the app once, rather than building an iOS version, and then the Android version, and then the web version. And so many companies have already chucked their HTML5 apps. Like, Facebook is already having a separate team for iOS, separate team for Android, and I don't think they have any HTML5-based app. Because the HTML5 apps are really, really lousy. When it comes to animations and 3D effects, and all these silky smooth animation effects. There's one more problem with the current trend in web application development, which is around declarative approach to coding. Now, why is it bad? I mean, this is my own viewpoints, so I might be wrong. And I guess some of you guys might disagree with me. See, the whole point is, when you want to build animations and when you want to build UI interfaces, which are like fluid and which are supporting 3D, then you cannot rely really on HTML and CSS as a whole. Because HTML and CSS only allows you to declare the structure, and then the browser has to figure out how it has to be done. Whereas, if you follow an imperative model, then you exactly tell the machine how to do something. So how to lay out the elements, how to animate them, how to translate them, how to rotate them. And then you exactly tell the browser how it is to be done, rather than just defining the structure in HTML and then letting the browser figure out how to do it. So just to give you a small example, if you say background color is equal to blue, that blue could mean different shades of blue in different browsers, different machines. Whereas, if you specify the exact hex code of the blue or that color, then the browser will exactly know which shade to render. But then there are so many shades which are possible. There are millions of color shades. You cannot declare names for all those shades. You can only have red, blue, green, and few of the shades. So this is a declarative way of coding. Whereas, if you can specify the exact shade using the code, then that is the imperative way of coding. For me, declarative coding is not really intuitive because of one small reason. I remember 15 years back when I was learning Visual C++, Visual Basic, and Java, Swing, and AWT applications. These were desktop-based GUI applications. We never used HTML over there. We never used CSS. But we still did a good job. How did we do it? Because in those GUI libraries, there was something called the layout manager. If anybody is programmed in Java, then you would know. So what does a layout manager do? Layout manager is nothing but a class. So basically, you have several kinds of layout managers. And layout manager, it keeps a track of the viewport. It keeps a track of the height and the width of the screen. And it also has a default pattern as to whether it has to be head or footer layout, or a grid layout, or a columnar layout, or a row-based layout. And based on these inputs, the layout manager would run its own internal algorithm to place the elements in the screen. You never needed HTML and CSS for that. And to be able to place those elements in the screen, you need to run that algorithm. And the algorithm needs to run in the code. HTML cannot run your algorithms. HTML can only declare your structure. So is CSS. So if you really want to build those super silky smooth animations, 3D effects, then you cannot really rely on HTML. You have to use an imperative technique, which is, in case of web, it is obviously the JavaScript. And that's where the famous guys, they really realize that they need an abstraction between the developer and the browser so that they can define an API which can handle all this for the app, for the developer, without letting them recklessly play around with the DOM or screwing up the reflowers and all these things. So what famous offers you is a JavaScript-based UI library, which offers you an abstraction to create the UIs. So when I say creating the UI, it includes everything. Creating the UIs, transforming the UIs, either you do a translation, you do a rotation, you do a resizing, you do a scaling, and you do any kind of style changes. But then for style changes, it really relies on CSS. But in terms of any layout change, it does it on its own. And for doing that, famous relies on the matrix 3D parameter of CSS. Now this is something which is GPU accelerated. So you get that speed and that performance which you typically come to expect from an animation. And it also uses RAF, Request Animation Frame. Request Animation Frame is a low-level browser API which allows you to have a fine-grained control over the frame by frame animation. So all these interfaces are directly available to the developer, but then developer can screw it up because you can use relative positioning to screw up the layout and things like that. Famous basically abstracts away all these things for the developer. And to get around that problem of expensive reflows and sluggish animations, Famous has a strategy that it will use a flat DOM structure. So if you're building an app using Famous, you cannot write your own HTML. Famous will handle it for you. And Famous will ensure that it has a flat DOM structure so that whenever you're moving things around, there is no relative dependency between the other DOM so that the browser has to do subsequent reflows and recalculations, which will eventually slow down the animation performance. And that's exactly why they claim that they can achieve 60 frames per second using this approach. Finally, Famous also adopts something called the scene graph design pattern. Any one of you is a game programmer. You would know that. You have a scene graph which represents the entire application and then the scene graph is consisting of various nodes. So there is a top-level root node which basically encompasses the entire application. And then based on your layout, let's say in this case, you have a header and a footer and some content. So these can be represented as the child node of the actual app node. And the individual items in the content can be represented as the children of the content node. This is how you build your entire scene graph and then you can manipulate each node either directly or you can manipulate a group of nodes using their data. And each of these nodes, you can say these are basically DOMs. You can then style them. You can add content. You can add text, image, whatever you want. You can add WebGL also. And all this is done programmatically using the API. You never write HTML code if you're building an app using Famous. So if you're building an app using Famous, your HTML is limited to only you just have the body tag and you just add the customary JS files. And that's it. You should not touch beyond this. So how does Famous do that? Let me show you one small demo, which I call it as a Famous Magic Cube. And this will give you some idea as to what exactly. Let me first make it full screen. Usually, I am always under the influence of Murphy's law. It never works for me. So what you see is a, actually it's a cube. So when I start rotating it, you'll actually get to see it. Not sure about the rendering in the projector. You can see some much edges. But I hope you get the idea. So this is basically a cube, which is built using Famous. Now, a cube has six sides, and all these six sides are nothing but individual DOM elements. The DOMs have been arranged in such a way using the rotation and the positioning parameters so that they represent each side of a cube. And since it's a DOM, you can actually add anything in the DOM. So I can, let's say, add a text and an image. So it'll just stay there. It'll also animate along with everything else. Since it's a DOM again, and since we are in HTML5, we can also embed multimedia, right? We can embed video and media tags. So we can actually embed video, and it just works. I can also add some SVG, because SVG is also a DOM. Let me add some SVG. What you see is a SVG-animated origami bird. Now, all these are DOM, so you can actually add any kind of content, which you typically add in any HTML page. So you can also add your widgets and your grid structures, which you typically use in a bootstrap or a semantic UI. So I can also add some grid and widgets over there so that it also gets positioned in that side of the square, and you can actually animate that. So I've already covered four sides. I'm left with how many sides? Two sides. So the back side of this cube is not really visible, because the way I'm kind of rotating it, it's not really visible. But I have this bottom red side, which is still empty. Let me see what we have over here. This is WebGL. So this is called as mixed mode of famous, where within the same coordinate space, you're defining DOM, and you're also defining WebGL elements. So I have got these two WebGL. This is a 3D circle, and this prism kind of a thing, which is called as ISO software on something like that. I'm not very sure about that. So it's stuck inside this cube. And as I'm rotating the cube, the WebGL elements are also getting rotated. So what I essentially have is a top level node in the scene graph, which has got six sides representing the six faces of the cube. And it also has two additional nodes representing these two WebGL elements, and they are positioned in such a way that they are inside the cube. And then I'm applying a rotation x and the y level y coordinate rotation to the top level node so that all the child nodes, which includes the six sides of the cube, and the two WebGL nodes, they are getting rotated along with the parent node. Kind of looks a bit awful to keep the box open, so I'll just close it. So this is what famous achieves for us. And all this is done using pure HTML5. There's no flash, no third party plugins, no other kind of libraries. It's only purely HTML5 and JavaScript using the famous framework, famous platform, I should say. So now, what can we do with it? That has been the question which has been kind of hovering in my mind for the past few months. So we know we can build web applications, people have been building animations, people have been building ads, people have been building some infographics as well. But I mean, most of these applications have been built just to showcase the functionality of famous. But what can we do using famous in terms of building some practical applications for the web and for the future? So that is something which has been kind of, kind of, I've been on an exploratory path on that. And as a result, there are a couple of applications which I believe could be of relevance, just because famous allows us to build these kind of UIs. And also because the web is going to get increasingly relevant in our lives in the near future and in the years to come. So I'm going to give you a demo of some three applications. One is a fluid UI for web applications. And this is something which is a trend which is catching up these days. So on one hand, you have got a plethora of applications which are built using the standard, the stereotypical web app model, which is like the header and the footer and the nav bar and the side bar and all these kind of contents. But there has been a trend recently towards building fluid UI. So fluid UI is basically something like, it's absolutely fluid. All the contents, all the widgets and the panels are at the disposal of the user. User can decide how to kind of stack them around. It's something like your desktop Windows desktop or your Mac desktop, the way you can drag and drop the icons around. And then I'm going to show you some other demos also and we'll come back to that in a little while. First have a look at the fluid UI application, which is something very similar to the way a desktop UI works. So it basically doesn't follow any order. There's no order like headers and the footers and the bars. It's like it has its own order which can be kind of changed by the user based on his own preferences. You can just drag and drop things around. And for building such applications, famous is really, really cool because you obviously cannot build them using HTML and CSS. You can style them, you can add the internal content of those UI using HTML and CSS, but you just can't build them alone in HTML and CSS. So what we have is a famous post-it app. All of you have used post-its, right? Those yellow kind of scribbling post-it, write something and you just stick it around. And you keep sticking to many of them, and it becomes a bit kind of messy or whatever, basically sticks on the surface. So why not build a digital post-it app, you know, which you can have it on your, maybe on your desktop or on your mobile or even on a big screen. And you can write your own post-its or you can have it as a team collaboration app, which people can use in your company. And then you can collaborate together. So this is like a basic post-it app and you can add your post-its. It will rearrange itself. You can let me add a few things. I can actually drag them around and reposition them as per the way I want. I can probably, again, reset them and I can even delete them. And I can probably keep adding more of them. Now, this is kind of a fluid UI application which we are getting into. You could actually extend this to build sharing applications for sharing photos and media. You can have a scribbling and things like that. Now, this is entirely built using Famous. Now, what you see over here, I will give you the code so you can have a look at the code. Those of you who are kind of edging to kind of see the code. What we have built over here is the entire framework is nothing but a set of a few prefabs, like the way you have prefabricated units when you're constructing a building. So each of the top panel and this base panel and all these individual post-it panels are nothing but a set of prefabs, including the menu. And these prefabs are represented by the famous UI library. That's how you create it. And then you can add your translations. You can do rotations. You can actually do resizing. And you can do all that stuff. And you can drag and drop and you can do all that stuff. So except, so only the HTML and the CSS part which we have in this application is for styling these post-it elements. So the background color, these box shadows, these are typical CSS styling elements. Except for that, the entire prefabs of the entire application is built using Famous, using JavaScript. So you write that bare bones HTML. You create a scene graph out of the body element of Famous and then you call the APIs to create all the prefabricated UI elements and you just place them around. You just lay them around. So this is the trend which we are getting used to increasingly because more and more people are looking at building such kind of user interfaces which are fluid in nature. You don't really have a static kind of a layout anymore. And once you're done with all of that, you can probably just close the application. Now this is one thing which Famous is really, really good at. Building fluid UI interfaces. Now there are a couple of other things which we can do using Famous and that's going to be the next demo for me. Which is, I call it as a system visualization. I'm not really sure whether I should call it a system but we will probably have a look. Probably I can get some feedback from you guys as well. All of us are aware of visualizations. Data visualization, D3JS, so many libraries are there and the world is going paranoid about data because we have big data and so much of data to kind of fathom and analyze and do modeling and stuff. But I want to look at visualization with a different perspective. And the basis of my perspective is this. So this is, I don't know whether it's going or air bus but this is some aircraft manufacturing facility. And assuming you are the plant manager or the supervisor who's supervising this entire assembly of this aircraft then you could be probably standing at the deck or some balcony at the upper deck of the plant and you can get a bird's eye view of the entire assembly being done and you can actually see it. Obviously it's a very, very complex process. So a bird's eye view will only give you the macro picture but as you know, an aircraft is a pretty complex system which is consisting of so many sub-assemblies and sub-modules and things like that. So if you really want to go and check out the individual assemblies and how they are doing then you would probably go to the shop floor. So basically you could get a bird's eye view or you could get a detailed drill down view if you go down to the actual assembly line and have a look at it. Now this is for the plant manager or the supervisor who's supervising this manufacturing plant and who's supervising the construction of this aircraft assembly line. What about the project manager in a software company who is supervising software construction or software development? How does it do that? How many of you are project managers over here? So I have been a project manager when I ask my guys, is it done? They will say yes. They might say no as well but then I have no way to know whether they are done or not. That's why we have these test-driven development and agile-based processes which have been incorporated so that we can quickly get the drop out and then we can actually see whether it's really working and whether it's working as per the use case or as per the requirements. So when it comes to software or when it comes to process visualization, only God knows. So typically what we do as project managers, we only capture the data. So we typically have a block diagram. So this is a typical waterfall model of software development. I'm sure all of you guys are aware. Requirement capture, design, coding, testing, release. And at every phase you have got some metrics. How many requirements are there? How many design documents have been approved or not? How many bugs are there? Whether it's unit tested or not? Whether it is integration tested or not? Whether it's released or not? How many bugs post release and all that stuff? So typically we never get an overall picture of the entire system or the entire process. We only capture the data at each point of the system and then we basically make reports and then we gather or we derive information out of it. And this typically happens for any kind of organizational workflow. What I am giving you the example is only a software development process because I'm sure all of you guys are aware of it. But every organization has workflows, internal workflows or even external workflows for acquiring customers, sales workflow, customer support and so on and so forth. And you have internal processes which you would want to track and every process can be represented in a block diagram, something like this. This is the block diagram of a e-commerce website for the checkout process of the customer. All of you would have made purchases on Flipkart or any other website. So once you are done with your browsing, once you've added a few stuff in your cart, you check out, which takes you to a checkout screen. Basically it takes you to a review screen where you review your items. Then you go to the next screen which is the shipping where you choose your shipping options. Then you go to the payment, you pay the money. And finally, I mean the completion, basically it's not a step but it's just a customary state to mark the completion of the order. So this is like a flow which a typical e-commerce website would follow. Obviously you don't have that luxury of the plant manager of that aircraft assembly line. You would still have this block diagram but then you would gather the data individually at each step and you would try to infer from it whether your site is working fine or not, whether your revenues are coming or not. You would never get a complete picture. So that's where I call it as a system visualization rather than looking merely at the data point at each step of your system, you basically get a bird's eye view of the entire system. And you can actually do it by spicing up the block diagram. We all of us know the block diagrams, all of us draw them, all of us kind of discuss it in team meetings but then we can actually do something more with that. And we can do that using famous. So let me show you a very, very crude. I hope the colors are good enough to be visible backside. You guys are able to see that. So this is the same workflow process of the e-commerce website which I just showed you. Check out, review, shipping, payment and this other guy is actually gone. Probably that's because of the layout. It's not really so responsive, so you can actually see that over here. It's actually in the 3D, so you can see that. So what do we have is a 3D reincarnation of the entire workflow diagram done using famous and individual steps are represented by individual blocks and I can actually move them around using 3D. So now what can we do with it? First of all, obviously we have data points at every stage of a workflow. So let me add some data. I'm ignoring the complete process for now because it's not visible, you just ignore it. It's kind of a pseudo real-time data. You can see the map updating. It kind of gives you a feel that it's getting updated in real-time but it's all simulated. So what you get is a real-time update or so-called real-time update of the main essential parameter at each point of your, at each stage of your workflow. So you can see how many checkouts are happening per hour which will give you a clear indication of how many people are buying stuff from your website. You can get a status of how many reviews are happening, how many people are doing the shipping request and this is the most important how much money you're getting. That is the most important metric for you. You would also probably get an update on how many people are kind of entering into the checkout process. So basically you can segment your data in such a way that you can get a data segmentation of the different kinds of parameters which you'd want to track in a checkout process. For example, different geographical locations from which geographies people are checking out more or which product categories people are checking out more. It's a typical data segmentation problem. You could also get some key statistics of the data which will show you how many people are passing through the checkout process, how many people are stopping over there and how many times you are having a failure which could mean a system failure or the portal failure. So you could have a key stat parameter being tracked for each and every stage of your process. Further, you could also display some alternate flows because what happens is in all our work flows, all our organization work flows, you always have alternate flows. For example, let's say I want to ship but I want to pay when I receive my items. It's something like cash on delivery. So rather than going from shipping to the payment part, you would go to the, you'll go and alternate flow which is basically the offline payment board and then you go to the completion part. You could have your own alternate flows defined. And further, you could just like the way the plan manager in that manufacturing plan could drill down to the exact assembly of the aircraft, you could probably do the same kind of drill down over here by going inside a workflow and checking out what's exactly happening. So in this case, you have the payment workflow being tracked, the payment stage of the workflow being tracked, but then payment can be constituted of multiple sub-work flows. So in this case, it could be how many people are paying for the credit cards, how many people are paying through cash, and you can actually display that matrix over here. This is what I call as system visualization. And this is something which you can do using famous pretty easily if you know the API obviously. And I believe famous is an ideal application for this kind of applications. You can't build it with HTML, you can't build it with CSS. You can't get this perspective with HTML and CSS alone. Now, this is also a kind of a fluid UI. I mean, you can actually build it in such a way that you can do drag and drop and a lot of things like that. I don't have, it's a very crude visualization which happened. But it is also another example of fluid UI as I showed you earlier, the posted app. The third and the last demo which I'm gonna show you today is, and this is something which is really, really exciting for me. So there's a story behind this. So what happened is a few months back, I got a customer who asked me to build a data dashboard on the web. And I said, what kind of data do you want to portray? Is it like a data visualization? He said, no, no, no, no, no. It's something like the data dashboard which you see in the airports. I mean, there I will time the departure time. It's a typical information display in the airports. He wanted to do it for some of his customers. And I said, this is not a data dashboard. It's basically information dashboard. It's something like a digital signage. And then I realized that you have these digital signages which are traditionally built using different technologies. And there is an increasing shift of building these kind of applications using the web. So you have digital signage. You have internet-enabled kiosks. You go to a movie theater or your ticket collection kiosk. ATM machines, right? And you have billboards, information display boards like in the case of airports and train stations. Now, traditionally they have been built using analog technologies and whatever the technologies be it. But nowadays there has been a shift that these devices are increasingly being driven by embedded devices which have full-fledged OS like Ubuntu or some version of Linux, some flavor of Linux. And then on top of that you have a web browser and these devices are anyway connected on the net, on the internet. So what you get is an IoT device through which you can stream data, you can control the devices, you can show the data. So it looks like this customer of mine he wanted a digital signage to be built using the web browser. And I told him famous is the best solution for this. He didn't give me the work but then I decided to build it myself. So I have got a hypothetical company for this application which is called as Job River. So let's say I'm the CEO of Job River and I run a recruitment consulting firm where a lot of people come to my office every day seeking jobs. So rather than these people coming into my reception area and crowding and asking for information inquiry, I can put up a digital signage outside my office and I can display all the current jobs and the openings in my company so that people can just have a look at that. So if you want to build something like that, you would build something like this. Again, this is like a fluid UI. All the prefabs are done using famous. The slow, the slow scrolling which you are seeing that's also done using famous. And this is running in full screen mode. So if you put it in a digital signage installation, you wouldn't even know that it's running. And then you can obviously make it interactive. I mean, it could be only an information display panel or it could be an interactive panel also. So you could have an HID device and you could have a category selection. I can go to the manufacturing category. I can see what all the jobs are available in the manufacturing category. I can actually go to the actual job and see the details and I can come back to the main screen which is the main scrolling screen. So this is where I believe famous is really going to excel because these are typically the traditional media applications which have a UI, which have interactions and which are typically built using non-web tools. But since web is going to be more and more prevalent in all lives, in all the applications that we do, and then coupled with such awesome libraries like famous which we have, we can build these UIs which could chart our way for the future of the web. And it's the same thing. All the prefabs for this UI are built using famous except for the styling and this shadow effects and the colors and the gradients. These things are done using CSS individually for the elements. But all the elements, they're positioning, they're sizing, their transitions are done using the famous APIs. But this is what I really believe in this code by Allen K. Best way to create the future is to invent it and that's what I kind of try to do. And so my hope is that famous will eventually come to the fore. Famous is also part of the JQuery Foundation for your information if those of you who do not know. So my hope is that famous will eventually come to the fore and we will be having these kind of new use cases and web applications built using famous. And I also hope that I can elicit some interest in a few of you guys so that you can probably go ahead and build some applications around famous. Whatever I've showed you is just the tip of the iceberg. I've not shown you a physics engine. I've not shown you several cool things which famous can do. The reason for that is they have recently released their mixed mode library around two months back and they're still going through a lot of churn. And they are currently, I think, in version six or version seven. So it will take them another few months to reach to version one when they will become stable. And then I'm also expecting some documentation updates so that we can start building apps using that. And if any one of you is paranoid about UI, you can start exploring famous and you will obviously know what it can do and how it is different and how it is better than the other UI libraries out there. Especially when it comes to animations and 3D effects. So that's it guys. Thank you very much. I hope you had an informative session. And I wish you all the best and I wish you a good time in the rest of the conference. If you have any questions, we can ask me. Yup, please. Exactly. That is more of an integration issue. You would have to create some kind of data collection applications which can interface with your enterprise specific those workflows, collect the data either in real time or with some lag and then you can visualize it. That's really a back end problem to solve. But that can be solved as long as the enterprise is willing to, I mean, if it's an open standard, you can do that. If it's a closed standard, then you need to work with those guys. Usually you always have, so nowadays everybody exposes the rest API. So you can just get the rest API, you can get the data, you can store it in your own data store or you can directly display it. Typically that's the way it is done. Otherwise you have to create your own data collection agents and you have to convince your customers to deploy those agents. So that is actually a bit problematic because customers don't really allow that. So if they allow a rest API access, secured access, then it is good. Otherwise you'll have to kind of rebuild your way out and convince them. But it can be done. What is it? Can you just say it again? Mule soft. Is it an open standard? So as I said, it's an imperative approach. So you only define the layouts. So you only figure out how to calculate based on the screen width, how to display the stuff. So yes, you will have to test it because you have to write the code. And so native applications have different native APIs, right? You have iOS and you have Android has different APIs. Over here, you're only using JavaScript. If you're building a web app and you test it on, let's say, a certain screen size, then it'll work everywhere as long as the browser support is unified. And it supports this rendering, PD rendering. But if you're comparing web app and native app, then that comparison is not really, I'm right. Right, right. Correct, correct. So as a developer, you will have to obviously, you will have to obviously code it in such a way that you can have a max and a min limit of the screen sizes. And you'll have to test it out. And as long as you have the same browser and the same rendering, it should work. It will work. Yeah, the Post-it app which I showed, right? Yeah, so the signboard is actually, it is fixed. But in a Post-it app, what you can do is if I, let's say, reduce the screen size, something like this. And if I do the Post-it app again, then it will show you only like this. Because earlier it was showing the third column, right? So this layout calculation is something which you as a programmer have to do in famous. It's not like your CSS media queries where you just mention max width and the min device width and it does it. Because CSS always does it based on its own calculation of the layout. Whereas famous is allowing you to do your own calculation. So you have to handle it on your own. So it's, there's nothing declarative about it. Which might seem to be a bit of a cumbersome thing for many of the web developers. But that's exactly the point. If you're building such high-fidelity UI applications where you want a pixel-level control of your UI elements, you have to take things in your control. You cannot leave it to the HTML and CSS. That's the whole point. Yeah, please. Right, right, right. Actually, if I were a famous platform engineer, I would have actually given you an absolutely clear response. But I'm more of a user of famous, so I'm not a developer. So what I understand is that famous has a renderable, something called as renderables, which they also kind of optimize based on the browser support for web workers, right? So that takes care of your parallelism. So you have a renderable for the WebGL and a renderable for the DOM working in tandem in parallel so that when the entire thing is rotated, both are getting rotated together. And obviously, in case of a single-threaded environment, if your browser does not support web workers, then you have to pay the penalty for the performance. As far as GPU acceleration is concerned, so all these CSS 3D transforms, especially the matrix 3D, is by default GPU acceleration. So they have just taken that into account and they are using that. It is not backward compatible. It is not backward compatible. It will not work. Don't ask me how to make it work in IE6 or stuff like that. It is not. In fact, I haven't even tested it in IE. I'm scared to do that. I'm testing only on Chrome. Yeah, easy. It can be used for? Yeah, signage. OK, yeah. Yes, yes, it does that. It does that. What I showed you is only with clicks. It can do it. So it has a gesture handler, famous as an eventing system, which also has a gesture handler, which you can listen to your swipes and taps and you can do that, apart from your clicks and scroll and the mouse. It's not backward compatible. The learning curve is a little bit tedious, because as I said, most web developers are used to writing HTML, right? When you start building a web app, you start writing your HTML. And especially if you're using, let's say, Angular, then you'll start creating your templates. But over here, you don't use any of that. In fact, you don't use MVC in famous. They have actually released a new framework, which they call it as best, DEST, behavior, event, state, and free. So it is a framework which is comparable with MVC. And if you write your code using the best pattern, along with the platform, you can build the same kind of complex app which you can build using Angular, but with additional 3D and animation performance. So yeah, I mean, primarily, two things I can tell you. It is not backward compatible, and the learning curve is slightly steeper, especially for a web developer who only does coding in HTML, which is not a programming line. No, but their tool chain uses Node.js to go to the website and go to the starting famous thing. It recommends Node.js, but actually you can use it for development testing. They usually use it. Yes, right, right, right. So obviously, I mean, if you are trying to apply a rotation, then how much angle of the rotation has to be that has to be calculated by the developer. You're stopping the rotation, again, moving it, resuming it. Those things, you have to calculate it. And famous internally uses RAF, request animation frame. And request animation frame, those of you who have programmed using this request animation frame would know that it is a frame by frame it progresses. So famous internally fire set tick, which goes and booms the request animation frame. So in certain applications where you need a continuous rotation, like the magic cube, you would need those kind of calculations. But otherwise, for these kind of applications, you just need a layout calculation and the main thing to do. So it depends on the complexity. But then the API is pretty easy. It is a bit bad, difficult to grasp initially. But then in my experience, once you spend some time, you can actually work with it. I mean, it's pretty logical and pretty simple. Any other questions? Right, did you see that? OK, I'll show you. Yeah, that's a good thing, actually. Let me connect. What is the password? jq. It's only 15 or 2015. So this was one of the initial demos which the famous guys had created. And this is how they got some money and they got some funding to develop this frame further. Now this is not using the famous library which is available today. And this is not even using mixed mode. This was something which they had created two years back just to showcase what we could do with native HTML file without using Flash or third party plugins and tools. So if you see over here, each of these elements are doms. Let me just select one of the doms. Yeah, you can see this. So all these animations are hard coded. This is not even using physics engine because this is an old famous application which was built around two years back. And if you can see in this case, they are actually manipulating Matrix 3D. So I mean, they have got some pretty smart mathematicians in their team. So that's how they are able to do all the calculations for transformations, rotations, queues, and scaling in the Matrix 3D matrix itself. And this Matrix 3D is web standard. It's not controlled by any. It's not a proprietary thing. All browsers support that. If you go by that, then it should work in all the browsers which support 3D. So this was one of the original demos which they had shown. And based on that, I think they got some 20 million funding they got. And based on that, they have actually developed this to the current state. And it is entirely MIT licensed. It's free. You can go to github.com slash famous slash engine. Or you can go to famous.org. And you can actually get a feel of it. This is a basic animation of the famous logo. And to give you an example of, so this is like a 3D based animation, which is happening in all the 3X, Y, and the Z direction. And all the nodes are being rotated together, just like the way I showed you the cube. And this one is an example of physics engine. So wherever I move my mouse, it creates that gravitational repulsion. And because of the gravitational repulsion, all the nodes basically move. So this is something which is really, really awesome. Because you can give those real life feel to your animations if you can use the 3D physics engine. It's something like you have a big ball and a smaller ball. The smaller ball comes and hits the big ball. It doesn't move because it has got more weight and more inertia. Whereas whether the big ball comes and hits the smaller ball, it basically moves away. So you can create those kind of effects using famous. You can define mass, velocity, momentum, inertia to all the dorm elements. And then based on the physical laws of physics, they will just move and they will just behave exactly the same way. Any other questions? OK, we are way beyond the stipulated time. So thank you very much, guys, for joining in. And all the best.