Full-Stack React With Phoenix (Chapter 1 | Why Bother?)
Prerequisites
First off, understand the fundamentals of React, ES6, and the basic build of a React application (NPM, Webpack, Babel).
If you have not learned React yet, here is a book I wrote called React.js for the Visual Learner.
While not technically a mandatory prerequisite to go through this book, it is highly recommended to understand basic full-stack React development with Node.js and a database. I recommend checking out Chapter 7 from my book called Redux From Scratch if you need to get caught up to speed.
What to Expect
As the title implies, Phoenix is a web framework for writing backend (server-side) code that provides an alternative to Node.js backend frameworks. Phoenix is built upon a language called Elixir while Node.js is built upon JavaScript.
I’ll go into more detail about the differences in a just a moment, however, I want to make it clear from the start that this book will be written for people already familiar with full-stack JavaScript development to transition to developing with Elixir/Phoenix (and not vice versa).
Another important thing to note is that this book is being written as I learn Elixir/Phoenix with no prior experience. Therefore, this book will be super practical. Reason being, when I have those “a-ha” moments where something clicks, I can explain to you exactly what made it click for me. I will also be using stories, analogies, and visual-friendly examples to reiterate what I am learning.
Why Learn Phoenix?
It’s very likely that you may not have heard of Phoenix. Unlike React, Redux, Vue.js, and other topics that I have covered, Phoenix has a lot less “buzz” surrounding it.
As you search through Medium, check your Twitter, and attend JavaScript meetups, you are not likely to have come across someone encouraging you to switch from Node.js and learn Phoenix. So, why learn Phoenix?
I’ll answer that question in two ways. First, I’ll let you be a fly on the wall of my developer journey so you can see why I find it beneficial. Then, I’ll give a more nerdy explanation and go over all the technical benefits in comparison to Node.js.
Why I’m Leaning Phoenix
I can’t stand the “fake it until you make it” and “form a very sharp opinion about why x is great and y sucks or you’re not a developer” mindsets that float around in the web development space. So, let me be very transparent for a refreshing break from all of that.
I’m currently unemployed and have been looking to build up my skills. The best way to learn skills has been to create content teaching others what I’m learning. I’ve already written about React, React VR, Redux, MongoDB, Firebase, and Node.js so I have covered all the fundamentals for full-stack React development. I’m in the position where I can now write about something more supplemental to those fundamentals.
I spent a lot of time going back and worth about what supplemental skill to learn and write about next. Here were some ideas I contemplated:
- GraphQL
- React SVG animation
- React Native
- 3D Modeling
- Preact
- TypeScript
- Immutable.js
All of the options above are still things I’d like to eventually learn, however, I started to ask myself: “What skill would give me the best bang for my buck?”
On top of that, I also have been noticing that a lot of the companies hiring for a React developer did not have a Node.js backend. Additionally, a developer that I had lunch with suggested I learn a secondary language.
So, I remembered a conversation with a developer friend who told me how Phoenix is super awesome. Phoenix is built on Elixir (a functional programming language), works really well with PostgreSQL (a SQL database unlike MongoDB), and contains a built-in streaming technology called Channels.
Therefore, learning Phoenix definitely gave me the best bang for the buck and allows me to dive into more advanced topics of backend development.
Why Phoenix is Technically Legit
As previously mentioned, Phoenix is built off of Elixir and the Erlang VM. A couple things to note in regards to this.
- Elixir provides a stronger type system than JavaScript (Node.js) without needing preprocessing like with TypeScript.
- Elixir is a functional programming language at its core and not merely a language that gives you the option to do functional stuff like JavaScript. Functional programming will be unpacked more in the next chapter. However, just know that we can write less code and have a better understanding of what our code does since it is also declarative:
- Elixir has performed incredibly well in comparison to Express (Node.js framework) and frameworks for other languages:
- Erlang VM (BEAM) has been developed on for over 25 years and the result is better stability and concurrency.
Beyond that, I recommend checking out the official site and the sample chapter of Programming Phoenix.
Fun Fact: Discord has been using Elixir to scale their applications.
Whether the technical details mean anything to you or not, I’d still encourage you to learn how to build a Phoenix backend for React applications as you will learn a secondary programing language, functional programming skills, how to create a PostgreSQL database and API service, and other cool skills with backend development.
Table of Contents
- Why Bother?
- Learning the Basics of Elixir
- Introduction to Phoenix
- Implementing a React frontend
- Working With PostgreSQL
- Building an API service for PostgreSQL
- CRUD Operations
- User Authentication
- Channels
- Moving Forward
Chapter 2
Sign Up for Notifications
Cheers,
Mike Mangialardi
Founder of Coding Artist
