Jamaica make on them real time feedback into the behavior of your distributed systems and observing changes exceptions errors in real time allows you to not only experiment with confidence but respond instantly to get things working again. Close helps everyone and welcome. Thanks for joining me. Today I will be talking about MeteorJs as a framework for hyper prompt development. I'll share my experience, a little story, my journey and then I will show the demo where we will build a simple to do app. But first let me introduce myself. My name is Armand, I live and work in Netherlands. I'm based here. I have over 15 years of diverse experience. I started with Pascal, CC, post plus Java to modern Javascript and typescript frameworks. Last five years I'm focused on fintech. I'm helping banks and financial organizations with automation. And at some point in past I was a co founder and a CTO of a successful software as a service company where we were using meteorjs as our main stack, main framework. But let me tell you how it still started. So our startup journey started at a hackathon called Startup weekend. We build a simple prototype. We were building mvp, showing it in conferences, pitching it, getting into incubator where built more or less a product and finding market fit. Then we got investment, got into very nice startup bootcamp accelerator, second biggest accelerator at that time in Europe, iterating over, finding market fit, finding investors, finally pitching in demo days. And all that journey was in like four or five months. Imagine how dynamic it was. And for supporting such a quick, dynamic environment, we needed very good tech stack. What were our requirements? Because in a startup, basically you don't have a luxury to hire dedicated developers. So you have students, interns, some freelancers in helping. So we needed preferably the entire stack in one programming languages. And that at some points that one person can handle everything. We needed a quick learning curve so that we can onboard quickly some maybe students sometimes, or some fresh graduates. And business wise we need a tool where we can quickly prototype. Because sometimes you had a call from a client, needed something, then you would need to show working prototype by Monday morning. And then over the weekend you needed to build some prototype that works and of course possibility of future development. I would say, for instance, it's not just prototype that you trash away. So you need to kind of develop it. And once the market niche is needed, so there should be a possibility to build a nice good product on top of it. So that's where MeteorJs came in. That's the full stack JS framework that fulfilled all our needs. So basically also our startup was in personality assessment platform where we were recording personal data. So it was considered data of mental health kind of, and we couldn't host it somewhere in the cloud, so we had to have full control of the data. So MeteorJs allowed us and also it was a little bit more cost effective, it had steep learning curve. So basically just in one week it's possible to learn entire VTR js and start building. And in one week you can learn basically it from zero to 90%. Then mainly it allowed us to do a quick prototyping. And for future development it supported react view Svelta, its own blaze UI library. Also it was built on top of MongoDB. It's a very popular NoSQL database that is open source. And for the backend it used node JS. So for now it was a monolith full stack framework. And then it is possible to decompose it and then develop in future. To demonstrate how quickly it is possible to develop meteorjs, I prepared a little demo. I pre recorded this demo and we will build a simple app and it's a tutorial from official MeteorJs website. So you can go to Meteorjs, then you can find a tutorial we will use react was our UI library, but you can use anything and then you can go through the steps and basically in your own pace later. And once you complete that tutorial and you read a little bit documentation, you're able to basically start building with it. Let's jump into demo to set up MeteorJs project. We just run a command called MeteorJs create and the name of the app. For example we can call it rapid to do app. That's it. This command will generate and by default it would use react for the templating our app is generated and we can open it in vs code. It would have the following structure. So this is client, I would go through the main. So basically here in the service folder we'll have server site code. So basically our backend here in UI, we'll have our react application APIs and so on. We'll get back to that later. So let's run our application. We run meteorjs run this command would start the meteorjs application and would run it in localhost 3000. So let's wait for it a bit. Now that our application is running, we can go to localhost 3000 and render our application. So here it is. So I'll zoom it in or disable this. So yeah, we can see that we have click me and it's working and yeah, let's proceed. Now we can see that we have app component welcome to meteorjs hello and info. Hello is showing the increment button and the label and info some links. You don't need to understand the full project structure. For now what we need to pay attention is client folder is our root for our front end for web. So we have main HTML, main CSS and main js. This is like the root for our component that renders the app js. Here in the imports UI we have our react component as I mentioned earlier, and server side. Here we have a node JS code that connects to MongodB. Now we are more or less familiar with the structure. Now we can start building our to do app. First let's create a task component, create new file task js let's import react we create component. So basically we have a task component that receives task and then prints a text. Let's save it as we are not connected to the server yet to our database yet. So let's define the sample data which will be used shortly to render list of tasks. It will be an array and let's go with tasks. So we'll have first task, then we copy paste and let's choose. We have first task, second task and third task let's save now let's render this list of tasks. Using normal react syntaxes we can remove those components. Let's import our task component. Yes nowaday list it it so we map for each task we would have per task component. We should not forget the key. That's vital as you probably know. So we put task and the id of it. Then actual task would be go to the task itself. By the way, let me make a font bigger. Yeah, I hope you can see it better. Maybe so let's save it. Now we can see all our tasks. Task one stacks 1st, second and third task. If we switch to mobile view now we can see that it's not that pretty. What we can do is we can add some meta tags so we add it to main HTML. So let's save it now it looks better. MeteorJs by default when using react is already adding a package called hot module replacement. That package updates the Javascript modules in running app that were modified during rebuild. So this reduces the feedback cycle while developing so you can view the test changes quicker. It even updates the app before the build has finished and it keeps the state. Let's do a little cleanup and remove those unused components. Hello and info delete those. Yes, Meteor has already set up MongoDB for us and in order to use that database. We need to create a collection which is where we will store our documents. And in our case the documents would be stacks. And we can create a new collection to store our tasks by creating a new file at API imports API folder. So let's create one and we call it stacks collection collection JS so we import mongo first, then export. We can call tasks collection which is mongo collection and we call it tasks. Did you notice that we used import API folder? That is all code relates to publications, meteorjs and in general API. That's just convenience and choice. We don't have to follow the structure. For the structure that I'm using, we can use different ones and we can do cleanup here as well. We can remove this links collection that was automatically generated. Okay great. Now we can see some errors in the console log. It's because there is also some unused code in the server side. So we can see that link collection was used. So we can remove this generator tech code. Sorry. As well so can completely this is major startup hook is run when major app starts. So can remove this one as well and we can remove this import. Now our app works and we don't have errors since our collection is going to be empty in the beginning, let's populate it with the first values. So we import task collection. Then meteor startup is the hook run as I mentioned when the application starts for the first time. So for example if the task collection, so we query through all the elements and then we count. And if it consists of zero clients then we can populate it with some mock. So for example we have per second and the third and the fourth task. Then we iterate. Actually let's create an arrow function. Here we go, insert task. Then for each task text we insert it in a way that this is function. So we insert into the collection. And now for each of those labels we insert into our database and let's save it. Now comes the fun part. We will render the tasks using react function component and the hook called use tracker. And that hook is from the package called react meteorjs data. This package has already been included in react skeleton when we initially generated the project. Let's start by importing the use tracker. Use tracker is a react hook that allows us to have reactivity in our react components. Every time the data changes through the reactivity, our component will rerender cool right? So we will also import the task collection, the connection to our database. So we'll refactor our component a little bit. So we would put the tasks inside and we will now replace the mock data with use tracker. So we would need to find in a query. So we query. Then we are fetching it. That's it. Let's save. Now you can see that we have four tasks that we previously added to the database. So basically now we are looking at the screen and we are getting the data directly from MongoDB. Now let's check our MongoDb. We can interact basically with Mongo using command line if we run meteorjs mongo command or we can also use UI tool called no scale booster for Mongo Mongodb so we connect. We use localhost and 3001 so we connect. Now we can see meteorjs so we can see links and tasks. So basically tasks is the collection with four documents. So we can observe here. So those are the documents that we just created. By the way, I will leave a link to this tutorial so you can later do the same thing on your own step by step. So basically now we are seeing the tasks directly from server to client. So we're going to explore later the publications and subscriptions. So basically it's not using to be connected directly as it is now. Now we can perform a read operation from database. Now let's create a record operation. So basically adding that new task to add new task, let's create a simple form. I'll create a new react component here. We'll name it task format. First we need to create a simple form component to encapsulate our logic. As you can see we use state react hook. So let's create a task form and we use text and use state react hook with initial value of empty string. Then we create our form. Let's give it some class name. Then we have the input field. Let's put some placeholder type to add new task. Then we add the submit button, we can name it, give it a label task and let's save it. Let's give it a little more space. Make this one a bit smaller. Now let's add this form to our app component. So right after the title we could say task form. Of course we need to import it. No, let's save and we can see our task form. Let's first go to task form. Let's connect the input with the text state. So we add some more here. So our value would be so would be a text and a change event would be linked to set textbook it, setter target value and that's it. And yeah, let's put everything into curly braces. Let's hit save. Now let's add on submit handler submit. We can call it handle submit and that's the function that we need to declare here. So we can let's handle submit. We receive branches first of all it prevent fault first. So what we need to do, of course if there is no text we don't need to save it. So if there is no text then we'll just return. Otherwise we can insert it directly to our database. So we use task collection insert here we pass an object, we declare the text is our text. So trim it and let's add also created ad so we know when it's created. Later we will use this field for arranging. So we know the order when each task is so and we also need to reset the state save it. Now we can refresh our browser and let's try to add a task. So task, task five, let's press add. So yeah, we can see that fifth task has been added. It's here. Let's check the database. Yes, we have our fifth task, task five with created edge. Now let's utilize that created add field. And of course when we add a task we want it to be added not in the bottom but in the top. To do that we need to go to our app component and here first object is the search query, the second is sorting. So we can add one more. By the way, this is the standard MongoDB syntaxes. You can read more about it in documentation. So I'll just quickly add sort and created ads and then minus one which means descending order and we can save it. Yeah, now we can see the task five is here. Let's add to another one. Six yes it has been added. Now we can successfully read from our collection and insert documents. Let's take a look on how we can update and remove them by interacting by the UI. Since we are building a to do list, we need our checkbox to check the tasks that we have done that are completed. So let's implement that. We can open our task by doing that. By the way, we'll implement the update operation. So let's add the checkbox. Checked. Let's code is checked. New attribute of a task. So initially they're all be unchecked. And when we click by the way, let's pass on checkbox, click that would be event handler pass from outside. So we add that we pass the task, put it read only. Let's make it a little bit more readable and we close the tag and also let's wrap text around span. Let's hit save. Now we can see checkboxes to implement the toggle itself we go back to upcomponent. We create a toggle checked. This is handler function. Let's pass it to the task component. On checkbox, click go to toggle checked. That's it. So we pass the task. So we retrieve the id and is checked from the task. Then here we start updating the actual record in the database. To do that we use our collection update. Then first we pass the id of a record. Then put set field is checked would be equal to the opposite of the current value. And that's it. Let's save it and let's try here. So let's check six. Five. Let's refresh our browser. Now we can see that we refresh our browser but values are still there. So let's uncheck so we have task six and first task checked. Let's check the database itself. If we check the database we can see six is checked and first task is checked. Let's uncheck the first task. We go back to database. First task is checked false. So now we are updating our recording database. Now let's implement the remove operator, the last one. So we needed to be able to remove. To do that. Let's go to task component. We'll add a little cross button. We'll pass it some handler later so we can use times. Let's see if it works. Yes. Then we need to have a handler click it. So by the way, by the way here we add on delete, click that we pass from the app component and we add on delete. Click and we pass the task. Now let's jump into app component. We need to add that function. So we have toggle checked. Now let's add delete, click or delete task. Delete task. That would be a function that gets task and from the task we extract its id. And then here we actually perform the delete operator. So we do that by calling task collection remove and we pass the id. That's our function for removing and now we need to add it. Here let's make this a little bit more readable. Let's key task and here we add on delete. Click go to delete task. Let's save it. Now let's try to remove first task. And we can see that instead of removing it's actually toggling. So let's see what's the problem. Let's check the task component and yeah, I accidentally put on checkbox. Click. So basically it's delete. Click let's save and let's try. Now we remove the first task. Yes it's removed. Second task removed as well. Let's remove the third task and let's check back the database and we can see we have three elements. Six, fourth and task five. It doesn't look that nice for now. So let's fix the styling. So I have prepared some Css so I'll just quickly paste it to save us some time. And now we needed to add some more tags to our HTML. Let's do that. So we open our app. So I'll also for the sake of time just copy paste the HTML tag. I'll save it. So yeah, now it looks nice. Let's check if it still works. Six. Then we put seven. Yes it works. Then we can remove this seven and let's rename it from welcome to MeteorJs to do list. And also let's put this later emoji. Let's also quickly implement our hide completed button that would hide completed task and show. So basically it's kind of another toggle. So let's define the state so we can call it height completed. So we use state initial value of false. So in the beginning it's not hidden. Then let's add the toggle button. Put some class name and button on click. That would set the state to the opposite value. And the label of the button would be either show all or height completed. And also let's import use state from react. That's it. Let's save it. Now we have a button. I would copy another styles and I would just add it here somewhere. I believe just in the bottom. So there are some styles for filter class. Let's save it. Now it's in the middle. Yes. Now we can see that state is toggling. Let's make this button work. Let's open app js. First of all let's create a filter. This would be extra logic for the filtering height height completed filter an object so is checked. This is a special symbol of not equal, not equal to true. And then we would use it here. So basically if let's put it down here so it's a little bit more readable. So will if height complete completed then we would show the logic. Otherwise it's empty. Then we can put sort down here. That's it. Let's save it. And we have a little error in the console because we have used a variable before it was declared. So let's replace and save again. Now let's refresh the browser. Let's hide. Now it works. That's it for the demo for the sake of time. I'll stop here, but you can proceed on your own. So it is possible to basically meet your has user accounts and authentication where you can use email and password or any other methods like GitHub login or Facebook login and so on. Also, I skipped the methods and publications you can read on the tutorial or in the documentation. So basically methods and publications are the security for the back end. And thanks for joining today.