 Okay, so hi everyone, I'm Dilpreet and these are some details about me. So I was a GSOC student with PostAsia and I've also mentored for Codein and as I've already told you I'm working on a startup based around video analytics, yeah, so open event. So as you all know, open event is an open source event management solution, right? So it provides an easy solution and open source solution for you to create and share events and basically do everything that you can think of about an event. So before digging into the front end, let's take a look at how the project is structured. So we have multiple projects around the open event API server as you have already discussed about the decoupling. So we have Android generator which lets you generate Android application for your events. We have web app that you might have used the schedule app on the website. And the open event front end, that the front end of the new decoupled API server and the August organizer app which is an Android app which lets organizers to manage the events in real time. Okay, so what is the front end? So the front end project is written in amberjs and it uses the open event API server which was done by Shubham Pandya. Yeah, so amberjs, it's like another front end framework, right? Like these days we have multiple frameworks but there's a catch. Okay, this was supposed to be funny. Okay, so why we went for amber? So as you might have checked other frameworks like React and all, you need external extensions like Redux to manage the state and manage the storage. But in amber, you have something called amber data which works like magic basically. So the main reason to choose amber was it has great support for routes, controllers, models, components and of course amber data which lets us create great projects and persistence of storage at the front end frame. And of course it is very easy to learn so that is why we went for amber and Abhinav will share more on this in a stock. Okay, so how do we handle data in open event front end? And the answer is amber data, okay? So why amber data? So it lets us minimize the API calls. So as you might have used Ajax in your applications, for every network call in different components you need to write an Ajax call for it multiple times. So it leads to redundant code. Next, it provides easy caching. So when we fetch the data, amber data stores it locally, it has a store. So it provides persistent storage and it is very easy to manage states in our application. So let's see how network calls are made in open event front end. So this is an image taken from amber data docs. So how it works is we make the API call from a route or a controller. Then it goes to the store. The store is basically amber data and then an adapter is basically a configurable piece of modular code which lets us add support to other APIs like if we want to have JSON API, it supports a JSON API adapter. If you want to support the REST API, it has a REST API adapter. So it resolves it and sends the request to the cloud, which in this case is open event API. And it is all promise based. So it uses the latest and greatest of the JavaScript that it is to offer. So as soon as the response is returned from the server, the adapter, it again, it converts it to amber models. So amber has models which are basically the entities in your applications like for example you have user. So a user will have a name ID, let's say age, so it will be stored as a model in our application and then it will be stored inside the store and lastly it will be passed on to the route or the controller from where we actually made the request. So what happens when we already have the required data in a store? So it is a smart solution. So it checks if the data is already present. So it just simply serves the data from the store and basically helps us decrease the cost of one network call. So let's see how it works inside the application. So this is a model, so every route in amber has a model function where we basically are trying to query different types of models. So in this case we are querying event which is a model in our application and event will have name, date, description and speakers, subtopics, topics, it also lets us do filters on it, provide simple applications, simple utility functions like sort. So every route in the open event front end application will have a model and what this code means is we are asking the amber data to serve us events which includes the data of event topic and event subtopic, event type, speaker calls also we will apply a filter and we will have a utility function of sort. So this is how the model looks. So we will define everything that is defined in the back end. So the back end guys they create models for the database, so they have a table for events and it will have all these fields and in amber the front end will have something called like models for the same. So each field which is defined here will be defined in the back end also. So yeah and the fun part is it also lets us define relationships. So we have different kind of relationships like has many, one to one, one to many, many to many, everything that you can think of. So when we have the data in our router controller we pass it to the component. So here event card as you can see over here, event card is a component and we are passing the data. So we are looping through all the events and we are passing the data to the component. So component is the last part of this cycle. So everything is shown on the application by the components and we end up with this result. So we have a bunch of events listed that was saved in our API server and it returns and like we saw the flow it works like that. So one important thing in our application is data down and action up strategy. So what we do is we try to push the data from the upper level from routes and controller down to the components and all the actions are handled in controllers or the routes. So what do I mean with that is suppose for example we rendered the events. So the event data, every data about the event will be transferred to the component and component will be responsible to display that data. When we have actions like share, so we will just have a function for that in the controller or route and we will simply pass the action to the controller or route. So everything is done in controller level, the actions that are made on the component level are transferred to the controller level and handled there. So yeah if you are looking to contribute these are the channels that you should have a look at. So if you are interested please take a screenshot or something or maybe make note. So let's have a look at how the project is structured. So we have templates, templates are basically the UI components in our applications. For example we have event card so we will have a component for that and each component will have a template, each route will have a template, when we generate a route it will automatically generate a template for that and the same goes for the component. Models as we have already discussed it is an entity in our system for example a user or an event, it has properties and it is inside the system of open event API also. So controllers, controllers is basically the brains behind the routes so everything that is to be done inside the route it is handled inside the controller so the data is faced on the route and then the action is passed to the controller and then the controller takes care of everything. We have routes, multiple routes for example app slash homepage, app slash events, app slash event slash id we have different multiple routes for that and every route will be added to the router.js when we create a route. We have adapters, under adapters we have custom adapters. So what amber lets us do is create custom adapters if we have endpoints which are not in the specified notion for example if we have rest API and json API on the same server so it lets us create custom adapters so that we can make calls to those endpoints. So styles will have custom style sheets for the components and routes help us are basically functions which are used inside the components and components are model a piece of code which are binded with the UI and they are responsible for basically rendering the view of the application. This is the progress that we made during the program unfortunately the internet is not working on this device so I will share the slides with you you can have a look at it and thank you that will be all from my side. So if you have any questions you can please go ahead and ask. So we have a service for that we have created a custom service for that so what we do is we first go and check if the user has already logged in okay and so we store it no no no on the emery term yeah yeah yeah so any other questions? Okay thank you very much. Round of applause please.