Introduction

[00:00:00]
>> Maximiliano Firtman: So welcome to Vanilla JS and go building a Fullstack App. So my name is Maximiliano I can go by Max. I'm third on most social networks my website is firt.dev let me go really quickly about myself. So I'm from Argentina I live in Buenos Aires, and I'm a mobile web developer.

[00:00:19]
So I have been doing web development since 1996, so that's long time ago, almost 30 years doing web development. In that case, it was just Vanilla, Vanilla web, Vanilla JavaScript. We didn't use that term at the time. Then, of course, I started doing JavaScript. I've done more than 160 web apps that we're publishing along these 30 years, and I'm an author of many books and many courses on different technologies, mostly around web, mobile web and web performance.

[00:00:54]
So those are my usual topics when it comes to courses. Also, I work with Google in writing LearnPWA on Progressive Web App. It's a free course or free eBook activation. Kind of an interactive eBook on progressive web apps. And on Frontend Masters, I have several courses on frontend, mobile apps on native mobile apps.

[00:01:20]
And some back end courses, including PHP and Go. For this workshop, it's a good idea for you to first go and have some experience with go and Vanilla JavaScript. And I have two other courses on those topics. We have Vanilla JavaScript you might not need a framework, and basics of Go also, in case you don't have that experience, you can start with that before doing this course.

[00:01:48]
So what about the contents of this workshop? We are going to build a full stack application, mostly from scratch. Okay, so we will see all the stages, all the steps to actually get an up and running app at the end of the course. And we're going to start introducing the project, so what we're going to be building today.

[00:02:13]
We're going to set up, first, the basics of the backend with Go so we're going to set up the project. We're going to create a server to serve first the static files and also to serve an API that will be RESTful. Then we will create the database. So we will talk about the database schema, the data that we will be using, and we will be building a RESTful API.

[00:02:39]
So then a client can consume the data that's the idea. After that, we will start working with the frontend. And in the frontend, we're going to be using Vanilla JavaScript. So we are not going to use any library or any framework, just plain JavaScript with, of course, HTML, CSS, and all the rest of the web technologies.

[00:02:59]
And we will be using web components as a way to design our front end. So we will create a couple of web components, and some of those components will have dynamic rendering, so they will consume data from the API, and it will like populate the UI. After that, we will start working with search, filter and sort.

[00:03:27]
So we will see what's the best practice to actually make that work when we have a database. We're going to do client-side routing as well. So our app will have several pages, different pages or views or sections. So we will use just plain JavaScript to create the client side routing system so we can navigate between pages.

[00:03:50]
State Management, so we will see how to store data client side and keep that synced with the server and for that, we will focus on authentication. So we will have a way to register users, log in the users, and keep the session active using one of the latest technologies available in terms of design patterns that will let the user keep logged in.

[00:04:18]
And then we will add favorites and watch list, and this is what is that? Well, actually, we are going to be creating a movies application. So we will have a list of movies, actually a huge database of movies, and we will be able to keep our favorite movies and a watch list in this system in this web app, okay?

[00:04:40]
So that's kind of the idea. So prerequisites for this course, basic JavaScript, basic HTML and CSS. So the CSS part is the one that we won't be spending too much time with. It's actually maybe the only part that is already pre-written. So we can just focus on the development side and on the design side.

[00:05:04]
Have some familiarity with JavaScript and DOM API. So that's what we know as Vanilla JavaScript. So if you have ever played with Git Element by ID or query selector. Okay, you're good to go. Basic goal backend development, so just having a basic idea of go or go Lang and how to create the basic server, we're going to do it from scratch anyway, but it's important for you to have familiarity with the language and the syntax.

[00:05:33]
Some SQL and database concept, because we will be using a SQL based storage. Actually a Postgres database so if you have experience just with SQL queries, understanding primary keys, foreign keys, all those ideas, that will be good. And from a software perspective, the only thing that you need is actually go.

[00:05:53]
I'm going to be using 1.24, but if you have 1.20, or even if you have 1.10, it's probably going to work anyway, because we are not going to use the latest versions of the language of any of the new parts of the language. And of course, you need a code editor.

[00:06:12]
I'm going to use Visual Studio code, but you are free to use any code editor and just a browser, because this is a web app, that's all we don't need a web server because we are going to code the web server using Go. This is just one technique it's not the only technique.

[00:06:27]
Later we will discuss all the options that we have when we are building our full stack application, but in our case, we are just going to be writing everything with code. So there is a workshop site it's on GitHub, github.com, forward/Fernand that's my username and last name. Actually, /go-vanillajs, so there you will find just kind of a folder that will be used as a placeholder for our project.

[00:07:01]
You have a copy of the slides there also, there will be the final project will actually be there as well. And also we have the dataset because we are not going to be like typing movies from scratch. So I already have a set of movies that we will use to populate manipulate the database so you have all the installation scripts there that we will see later.

[00:07:24]
So you can clone that repository. You can get it, you can download it manually, however you wanna work with that. That will be good enough. Also, there is a readme file there in Markdown, the README has a instructions. So step-by-step instructions of everything that I will be doing, it's gonna be pretty much the same.

[00:07:46]
So I'm going to be live coding maybe 90% of the project. But you have here some snippets also to copy and paste, or in case you are lost at some points you have you all these steps by letter and number. I will be saying, okay, we are now doing A2, A3, A4, B1, B2, B3.

[00:08:07]
So this is the app that we will be building. This is the final version, at least for the first steps. So we have a list of movies we can get into a movie with details. We can see the details, we can see the cast. We can search for a movie, like Superman movies, okay, you can see everything is pretty fast.

[00:08:26]
That's because it's Go plus Vanilla JavaScript, okay? And we can create, we can log in, we can register, and that's kind of the app that we will be building during this course.