Introduction to the Phoenix Crash Course
Hello everyone and welcome to the Phoenix crash course. Today I am extremely happy. I just finished recording the entire Elixir crash course and then I got a bunch of comments saying okay nice but Phoenix crash course when? Well, right now. So I am extremely happy. I am going to do another crash course series but now on Phoenix and why am I calling this a crash course and not a course for example? Well I'm going to follow the same philosophy that I followed on my free elixir crash course which is I am going to focus on the fundamentals.
I have plans for in the future uh to build a more complex and a huge app and show you guys how to do it like create a job board, a Twitter clone, an e-commerce. I want to do this in the future, but right now I want to focus on the fundamentals. So for example, what is a plug? How do I do routing on Fenix? What is a controller? What is a hick on Phoenix? How do I create reusable components with it? How to do authentication? How to test? What are contexts? And I want to focus on the fundamentals because I don't see a lot of people talking about them. Now sure we have the documentation and this crash course will be pretty much the video format of this documentation. I'm going to try to follow the structure of the official documentation as much as possible.
But there are a lot of people that don't like the documentation. they prefer video format and when I'm recording a video I can also bring examples of real applications that I built instead of just showing you the theory. So yeah, that's what I'm going to do. I'm going to focus on fundamentals. I'm going to try to build an example like very simple e-commerce app but it I'm not going to build it like complete completely. I'm just going to do the bare minimum to get it working and to illustrate the concepts from the documentation. Okay. All right.
So, on this video, my plan is to show you why I think you should learn Fenix and we're going to install it and run it. So, first of all, you can see here on the homepage the following text, peace of mind from prototype to production. Okay, what does this mean exactly? Well, as a programmer, we all know that there is no free lunch. Usually, you need to choose between developer productivity and performance. So, for example, if you go full performance mode, you can use Rust, Golang, C, C++, but your developer productivity is going to suffer. And you can go the other way around. You can use Rubon Rails, Python, Django, but the performance is not ideal. And then here comes Phoenix. And it says on the homepage that you can have both. Just read the text here. Build rich interactive web applications quickly with less code and fewer moving parts. And that was one of the reasons why I chose Fenix and Elixir as an alternative to the crazy JavaScript ecosystem and not like Rails or Django. I specifically chose Fenix. And to be 100% honest here, uh the reason is that you can easily vertically scale on Fenix because under the hood it's using Erlang and on every single request that you receive on Fenix that is going to run on a separate and isolated process and it uses functional programming to avoid mutability. So this way instead of having to horizontally scale like in a NodeJS app, you can just get a bigger server and I am primarily a front-end developer. I'm slowly becoming full stack and I didn't want to have a hard time playing around with infrastructure. So then I saw this on the homepage. I I sent a bunch of messages on Twitter asking people about this and they said, "Yeah, if thank god you have a performance issue of getting too many users, I hope I have this problem. This is a good problem." Then instead of doing a crazy Kubernetes configuration or I don't know uh using engine X to spawn more uh server instances, you can just get a bigger server. And if you have like a server with 10 cores, Fenix is going to use all 10 cores. And this doesn't require any work on your end. This is the default behavior from Phoenix, which is great. So for example, I have this project called Tech School. I'm using this machine from Fly. Uh I'm using a shared 2V CPU with 500 megabytes of memory. And by default, I am using both of those cores. Okay, I'm not leaving any one of them unused.
So on the infrastructure side, it's a lot easier and I wanted to have an easier time uh when scaling the server. All right, now let's check out another thing.
Batteries Included: Built-in Phoenix Features
What about uh what other reasons do I have to use Fenix and to learn Fenix? Here we have a very nice example of Chris McCord, the creator of Phoenix, building a real-time Twitter clone. This is a classic example. And in 15 minutes, he was able to do that. And check this out. It's real time. It's using PubSub under the hood. And you can see the end result here. And we'll click retweet. It works. Did you catch that? Let's try likes. There it goes. And this is just happening. No extra restful route, no routes to define, no controllers, no serializers. And the payload that we I mean how cool is that? And the best part is this is built in in Finenix. You don't have to install a package.
All of this that you can see here is builtin. You want real time with pubsub and channels builtin. You want authentication, that's builtin. You want a JSON API that's builtin. You want to deploy your server and generate a Docker file that's builtin. You don't even need to know Docker if you want to use Fenix because it's going to generate the Docker file for you. We have even a live dashboard so you can see metrics of your server. It is highly scalable. We have presence and we also have a built-in ORM. I'm using quotes here because it's not we Phoenix is not uh object-oriented so I can't say that this is an OM but it's the wrapper for your database. It's called Ecto. It's fantastic. We're going to have a dedicated video just about ecto and it's builtin. No work on your end. The only exception to this rule is if you want to build a GraphQL API, then you're going to install another package called Absync. But that's it. That's the only time that you're going to have to install a package on GraphQL. Everything else here is builtin.
And one thing that I wanted to mention is I said that Fenix is highly scalable. But do I have any example to show? Like just saying that it's performant is not very useful. Do I have an example? Yes, I do. If you open up the blog uh tab from the official Fenix website, you're going to find this article. It was publish published in 2015. All right. 9 years ago. Charisma cord on one machine. One. All right. This is not 10 node uh Node.js nodes. Nope. This is one elixir Phoenix server running. He managed to create 2 million websocket connections.
And down here you can see the tweet that he made about this. Sure, it's a beefy server, but it's one server, right? This is what I mentioned about being able to vertically scale to infinity. Like if if you don't want to waste any time on infrastructure, just get a bigger server and problem solved. 2 million websocket connections. Okay. And I'm going to even use my website as an example. Let me go back to Tech School. As you can see on the homepage, I have open analytics. You can check it out for yourself. So if I open up the analytics, I'm using plausible which funny enough is also using elixir as the back end. So if I filter for last 12 months, you can see here that on this day actually here let me click on this day I got 7.8k 8k unique visitors and I had around 300 to 500 uh people using the website at the same time. Now I'm using live view on tech school on every single page meaning that I have one websocket connection open to each user which means that on this day I had around 500 open websocket connections on tech school right and you know what I did with this server absolutely nothing we have even fly.io here saying, "Hey, you better uh scale the number of servers that you have because I don't know, maybe one goes down. Uh you might need a second one." And I'm like, "Nah, I'm good. I'm using Elixir. All good on my end." So on this day, I like typically when I have around zero users, like three online users, four, the memory usage is around 200 megabytes. And then on this day where I had around 400 open websocket connections throughout the entire day, my memory went up to slightly under 300 megabytes of memory. I was using 300 megabytes of memory to have 530 open websocket connections.
The Frontend Experience: LiveView and HEEx
Now, I mean, I'm primarily a front-end developer, but this looks good to me. I didn't even touch my server. Actually, my server didn't even sweat. Okay, I didn't get even close to the 500 megabytes. I was around uh under 300 megabytes.
All right, now this is all about the back end. How about the front end? Now, if you are a React fanboy, you can of course build uh using Finex just a JSON API or GraphQL. It's not mandatory to go full stack with Phoenix, but but not only we have live view to emulate the behavior of a single page app. Writing front end code on Fenix feels extremely good. You can see on this GIF right here a couple of things. We have uh similarly to to the syntax from React, we have heaks for the front end syntax on Fenix. And with HEK, I'm going to have a dedicated video about this, but you can easily create reusable components. Not only that, but we have a built-in formatter. So every time you hit command S, you are going to format the front- end code. And we have compiler checks. Just check this GIF right here. You can see that we have apparently a table component. It's a custom component. And the user here is trying to add a new prop to the table called a style. But this prop doesn't exist. So it throws a warning here saying, hey, the the style equal basic prop that you're trying to pass to table doesn't exist. Okay. So yeah, those are the reasons why I love Fenix so much.
Installation and New Project Generation
And now on the next videos, I'm going to show you instead of telling you, right, so to end this video, let's open up the official guides. We're going to install the necessary packages and we're going to start a new application. Sounds good, right? So we are going to come up to Phoenix/over.html. Let me zoom in a little bit. This is just the overview of what's uh inside the Fenix, but what I want is installation. We're going to go here. Of course, you need Elixir installed. If you don't know how to do that, you can watch my free Elixir crash course. Now, the first thing that you need to do is install HEK. I'm just going to copy this. Open up my terminal. Paste. I have it installed. Yes.
Now I need to install the generator from Fenix, which is this one. I'm going to copy. Paste that. That was pretty easy. Now let's go to the final step. And where is it? Okay, up and running. Here you can use the following command mix phx new and the name of your application. And we're probably going to have a dedicated video just about these generators, but you can customize this generator. So, for example, if you don't need a database, maybe you're just building, I don't know, a live view front end, you can pass the flag dash no ecto to remove ecto. If you're building just a JSON API, you can remove everything related to assets, HTML, and live view by using no HTML, no assets, no live. But what I'm going to do is I'm just going to type mix phx new and I'm going to call this application shop. Okay, so shop and then I need a different database. For simplicity purposes, I am not going to use Postgress. I'm going to use SQLite 3, which is amazing. I don't need Docker or anything. Just runs. So, I'm just going to say D- database SQLite 3. And there's a chance that this command is going to run uh very slow to install the dependencies for the first time.
Okay, installed the dependencies. Now it's setting up the assets and now compiling the dependencies. This is the slow part.
All right. Once you have the dependencies installed, you can cd into the folder that you created. You can create the database which is mix ecto.create.
Final Steps and Editor Setup
All right. And then to start the server, you can run this command. Or if you want to have an ex session running alongside the server, you can use this command. But we're not going to do this on this video. I'm just going to open up this on oops code dot because we are already on the folder. And I have a light theme. I'm so sorry. Nope. arc. This is my theme, by the way. A bunch of people ask, it's bearded theme arc. I'm going to zoom up. And one final recommendation that I have is in order for you to have a very nice VS Code experience, I highly recommend you to install the extension Elixir LS. I have it installed already. It's this one. It's from the Elixir LS team. Yeah, it's the language language server, debugger, autocomplete, intellisense. Everything is on this package. And that's pretty much it. I hope you enjoyed the video and see
