Fastest way to get productive building web apps with Elixir and Phoenix

[north_celt]

I’m eager to start using Phoenix to build web apps. I’ve done functional programming (Haskell and Elm) before, and web development (Typescript/NodeJs and Postgres with Sequelize) before, but I am new to Elixir.

What’s the best way to learn to be productive building database-backed web apps with Phoenix? I’ve done some reading and it seems like learning LiveView, Phoenix, Ecto, and Elixir at the same time is a lot to learn at once, so I’m fine with just building server rendered pages for now.

[mindok]

Hi @north_celt, and welcome!

As usual, the answer is “it depends” - as much on your learning style as anything.

I’d probably start with the PragProg books - Programming Phoenix or Programming Phoenix LiveView. They are now both a bit behind state of the art - e.g. building components etc is a lot better than a year ago - but they will give you a good idea of the conceptual models. The first one covers more database stuff (i.e. Ecto), but, unlike the second one, it doesn’t cover LiveView and, IMO, LiveView is the way forward. LiveView is a much simpler programming model and sets you up for the some of the power of Erlang / Elixir / Phoenix - real-time interactive web apps.

The “generators” for Phoenix / LiveView will also allow you to see how to put things together. If you commit a skeleton Phoenix project to source control, run a generator and look at the diffs, you should start to see how things hang together. mix phx.gen.live — Phoenix v1.7.1 is probably the key one - it will generate UI, Ecto schemas, database migrations and tell you how to update the router.

Some Ecto recipes can be found in the Ecto Cookbook: The Little Ecto Cookbook - Dashbit ebooks. You have to cough up an email address for it, but it’s in safe hands - Dashbit is the consulting organisation founded by José Valim, the original creator of Elixir.

I didn’t come from the Ruby camp when I started out with Elixir, so getting my head around some of the DSLs brought in by the libraries took a bit of digging around. Examples include defining Ecto schema, router entries, plug pipelines. If you want to go deep on this, there’s a “Metaprogramming Elixir” book from pragprog that explains all! It was written by Chris McCord who originally wrote Phoenix.

Finally, for a general overview of the power of Erlang/Elixir, it is hard to go past Saša Jurić’s content - The Soul of Erlang and Elixir • Sasa Juric • GOTO 2019 - YouTube is probably the most information dense talk you will ever see on the power of Erlang & Elixir, and “Elixir in Action” from Manning Books is well worth a read when you want to go the next step in taking advantage of all that the platform has to offer.

[D4no0]

If you already have some knowledge on how elixir works, you can just straight dive in phoenix, I don’t think reading a book is necessary, just generate a new phoenix project with phx.new and use phoenix generators to generate some pages, at first use just phx.gen.json and phx.gen.html.

As for ecto, if you want to understand and be able to use it fast you will need to read a book, I would suggest finding a book that focuses only on ecto, as you don’t need to mix it together with phoenix at the start.

As for the last, you can use phx.gen.live. This is a totally different beast and basically allows you to make dynamic pages where the state is stored on the server, not by a frontend application, using it is easy, however understanding the limitations and the concepts of how it works takes a little bit of time.

[north_celt]

I did try to just jump in with generators, but it’s making files filled with so many macros and things that I don’t really understand. It really doesn’t feel like a feasible way to get started.

[cmo]

I found the LiveView course by pragmatic studio helpful when starting out with it.

[AstonJ]

I’d still recommend my post from 2019:

What is your recommended order of reading Elixir books in 2019?

Here’s my current recommendation based on what I have read myself so far… Programming Elixir (Pragprog) the first 50% Elixir In Action (Manning) in full Programming Elixir - the remainder Learn Functional Programming with Elixir (Pragprog) Programming Phoenix (Pragprog) up to just before you start the main project Programming Ecto (Pragprog) in full Programming Phoenix - the remainder Why? Programming Elixir and Elixir In Action are a fantastic combo because they cover much of the same grou…

Because by the time you’ve gone all the way through that books covering LiveView will have been updated

Also if your budget can stretch to it, check out some of the Courses (maybe start with PragDave’s course as it’s one of the most affordable: Elixir for Programmers, Second Edition (PragDave))

[wceolin]

I’m maybe going through a similar path as yours. I have some functional programming experience and I’ve done web development for 14 years. For the past few years, most of my experience was with TypeScript/Node/React, etc.

Initially, I found things a little bit hard but I feel like I’m starting to get productive now. Here’s what I did (and I’m doing):

• I started by following the Elixir Guides using a hands-on approach: Every could example I saw there, I’d run locally and make some small changes to see if I was understanding what I was reading. A few things like GenServer and Dynamic Supervisor were (are?) a little bit confusing to me. I’ve decided I’d skip them for a while trusting they would make more sense at some point.
• Then, I did the Elixir track on Exercism. I had lots of “aha” moments in there. I think it helped me a lot to have a better understanding of the language.
• My next step was to follow the Phoenix Guides. I did the same as the first step: I ran all the code from the guides locally, typing as much code as possible to ensure I was understanding what was going on there - and making some small changes like adding small features.
• In parallel to that, I also read the Ecto and LiveView guides.
• I used all Phoenix generators and looked at their code to see if I could understand it. Some of it was still a bit confusing, especially LiveView. I thought it was much harder than “dead views” until I created two projects and I kept them side by side: One using dead views and another using LiveView (using generators to create the functionality like auth and one additional context like the Catalog example we have in the docs). This helped me better visualize how they differ. Now, I’m finding LiveView even simpler in some cases.
• This may be controversial but I also installed linting and code analysis extensions such as Credo, Dialyzer, and Sobelow. I feel like they help me see what “good practices” are in a new programming language.

I’ve started learning Elixir a couple of months ago and I’m now feeling comfortable enough to start creating a new project using Phoenix. Because is kinda of a new framework, tools like ChatGPT and BingAI won’t be as helpful to figuring things out as in other more consolidated stacks like Rails or Django. But, so far, i haven’t had many issues to find answers here on the forum.

Either way, those things above helped me to feel productive enough to start building something, which I think it’s a good step. I still don’t feel as productive as my previous stack but I think it’s a matter of time and building something definitely is helping me in this process.

[wceolin]

I did struggle with this as well. I was often thinking: Where’s this function coming from? I was like: Is it a Phoenix things, is it coming from Elixir, from Ecto, from LiveView? It was indeed overwhelming.

I found that the ElixirLS VSCode extension helped me a lot because I can hover those functions and see the docs and understand where they’re coming from. Now things are starting to make sense to me.

As I said in my previous comment, start building something and playing around with it. As you go into solving problems, I think many things start clicking.

[mpope]

I think an alternative learning path is building up knowledge from the base up to really understand all the underlying parts. Knowing how each part works is not only useful but removes the overwhelming auto-generation of frameworks and allows you to be more powerful without the magic. I followed a similar path because I too found that Phoenix was a bit difficult to approach at first.

1. Build a simple plug_cowboy REST API that accesses sqlite directly, or even Mnesia. For example, a URL shortener.
2. Create a simple scheduled cron-like scheduled GenServer and add this to the supervision tree.
3. Have that GenServer some Tasks to maybe cleanup old URLs, etc.
4. Add a Cachex write-through cache, or write your own cache using ets.
5. Build a load test for this service using Chaperon, maybe iterate on the code if the performance isn’t as good as it should be.

After it works well enough, start over with Phoenix. Use Postgres + Ecto instead of sqlite, use a Controller over a pure router, add a simple front end, etc. I too had general experience and had trouble on ‘where to start’. The above helped me get better footing with Elixir itsself which then helped with the other parts!

[wktdev]

You can create a list of the activities that are applicable to any web app and then learn how to perform each one. Just check them off the list as you go.

How do I submit a form and get data to the database and back to the user?
How do I work with dynamic variables in the view?
How do I create a route and associate an html page with it?

I feel like most Elixir and Phoenix docs are loaded in complexity (The basic Elixir syntax isn’t that bad) and haven’t taken the time to parse really really basic things that we all use everyday, therefore making simple things embedded in mounds of complexity. I am building a wiki project called Elixirblocks.com to record the basic stuff and contextualize it in a way that I think is more fitting. The overload of complexity is a huge problem for “smart” tech people and most don’t seem too aware of it. Your comment about generators is completely true.