How to get started with Phoenix LiveView 1.7?

I have been trying to learn Phoenix LiveView for a couple of months now. The best learning resource I’ve found so far is the video course from “The Pragmatic Studio”. Unfortunately, this course is fairly out-of-date, especially now that Phoenix 1.7 and LiveView 0.18 are out (“almost” in the case of Phoenix 1.7). The authors, Mike and Nicole, are busy creating an up-to-date refresh, but it might be some time (I’m afraid) before the update is available.

So, this leaves folks with only the latest official Phoenix and LiveView documentation. Maybe I just haven’t figured out the organization of this documentation yet, but so far it seems to me that it isn’t very useful for people just getting started with Phoenix LiveView.

IMHO the official documentation really needs and deserves a much more extensive “getting started” user guide, especially for LiveView. For me at least, it seems that LiveView is now an integral and essential component of Phoenix. Hence, why not include the basics of LiveView in a comprehensive Phoenix+LiveView “getting started” guide?

I apologize that this post is a little negative. I am very enthusiastic regarding Elixir+Phoenix+LiveView and intend to use these great tools to rewrite my existing commercial web application, which is currently written with Elixir+Angular.

9 Likes

Amzing job, really, but I’d like to second this.

Would love to be able to unlock the magic released in Phoenix 1.7 :sparkles:

Kind regards,
Enthusiast

1 Like

Elixircasts has a few videos, namely Upgrading to Phoenix 1.7 - ElixirCasts but that targets upgrading.

The 1.7 rc 0 docs are at Overview — Phoenix v1.7.0-rc.0 but it’s hard to see what all has changed, if much at all. diff.hex.pm lets you diff each package but I’d personally kill for a docsdiff that shows the changes in documentation. This may exist already but my Google-fu isn’t finding it. One could possibly generate PDFs and use diff utilities for those to find the changes but that seems like a lot more work.

Lastly, the DockYard Academy beta curriculum has a guide for 1.7 in Livebook at beta_curriculum/phoenix_1.7.livemd at main · DockYard-Academy/beta_curriculum · GitHub that I haven’t worked through just yet. It’s a good walkthrough for creating a simple counter web app.

3 Likes

Yeah, it’s a weird combination of lots of information being available but it all feeling pretty useless when you are new. People often just link the Hexdocs as if people hadn’t already found them and the Hexdocs only ever feel useful when you already know what the process you’re trying to is and just need a refresher. For first time learning they are pretty confusing as they don’t even tell you which location the code snippets should be in or what other locations need to be modified.

I started learning a few months ago and basically learnt everything from reverse engineering either the mix.phx.gen options, or from the few github projects I could find…and by literally typing random things in until something works. I firmly believe the monkey’s and typewriters saying is true based on the number of times I’ve managed to just luckily guess how things work in Phoenix because I couldn’t find the information.

On the plus side I only started learning Live a couple of days ago and managed to do the same things it took me a month to do using Controllers because I have a much better understanding of how everything connects together now.

9 Likes

I agree with Gumi. It took me ~6 months to be remotely confident in Phoenix & Liveview, and I have 3 years of dev experience. (YMMV of course) I think this would scare newbies away because it takes a lot of time to get to that point of confidence, which will push them to a more tutorial-thriving ecosystem that doesn’t cost money to access high-quality learning materials. Rather there are so many tutorials by Academind and TraversyMedia, for JS. Anyways…

I am super interested in making a stronger getting started guide but I don’t have 100% confidence in both mapping out the structure of the documentation. I know there are 4 paths we can go down, and I think the ‘tutorials’ and ‘how-to guides’ with best practice are the biggest things.

If we were to build this out, how best should we structure it? I like the rails guide, but I see a lot of similarities with what the hexdocs provides. But still, there are some things lacking (granted, I can’t put my finger on what).

I think maybe the hexdocs provide the ‘explanation’ and ‘reference’, but a strong ‘how to guides’ and ‘tutorials’ list will help provide the general overview a bit better.

Additionally, I found it hard to understand Ecto and how casting/putting changesets work. Along with how it plays with LiveView from a broader view w/ forms. Despite reading the docs multiple times, it didn’t click with me. (Still hasn’t, frankly)

I think if we can have this stronger overview where we as a community can keep these tutorials and how-to guides up to date I think this can significantly increase adoption. The ‘explanation’ and ‘reference’ is so good in the elixir ecosystem, but I think the original grasping through ‘tutorials’ is a major roadblock.

I’m open to pitching in; I just don’t know how. I think having a group effort where we have pros working together with content makers will help people feel even more confident grasping Phoenix, Elixir, etc.

But this is my 2 cents

Thoughts?

6 Likes

I’m in the same boat.

I am just delaying relearning the LiveView part, in the hopes that the documentation receives full update because I’m tired of going over the documentation again and again. My mind map of the whole thing keeps getting messed up.

I like the new changes coming in, so I am waiting before creating anything new, because I just want to write once and forget about it, don’t want to migrate a newly created project.

Currently filling my time by learning the basics. i.e. Elixir, Functional Programming, Ecto, OTP, and anything else I can find.

I jumped directly to LiveView, without knowing the basics. :sweat_smile:

3 Likes

This is imo the biggest hurdle for any educational material. LV has been a moving target for quite a while and I’m not sure if it’s yet at a point of slowing down. Sure it would be nice to have all the educational material available, but these things take time and effort – even the existing pieces do/did. It be great if someone stepped up to take this to the in depth level, but those efforts are hard to justify if things might be out of date in 6-8 month. In the best case it’s just stale content in the worst it’s actively confusing people, because different sources talk about different things.

6 Likes

Adding to my original post a bit, I am very satisfied with the official Elixir documentation. I also think that the non-LiveView documentation for Phoenix is satisfactory - if one isn’t interested in LiveView!

Much of what is documented there is the pre LiveView way of doing things, mainly controllers, views and templates. I realize that these things are still very much part of Phoenix, but now there is an unstated alternative - LiveView. As far as I can see, there isn’t a single mention of LiveView in all of that documentation. For LiveView, you have to know that documentation is at Installation — Phoenix LiveView v0.18.3. Admittedly, that isn’t a big deal.

The problem, though, is that lots folks are going to be coming to Phoenix with the intent of utilizing LiveView, and, at the moment, there is no getting starting documentation for these folks.

4 Likes

One of the good news with Phoenix v1.7 is that HEEx and function components are the building block for everything HTML related in Phoenix, with or without LiveView, and the guides have been updated to teach them. So while we don’t talk about LiveView (yet), function components get good coverage and that will already take you half way into learning how LiveView works!

19 Likes

I think this is a good idea. I’ve seen and experienced that people urge others to get into Live View ASAP. However, learning the basics of what you listed and mixing it with some js where needed would be my suggested approach until you get a foothold in the foundations.

4 Likes

Same thing here.

I love Elixir, but the concepts are hard to grasp, and the only way I’ve found is to buy a book, read it through, then go to the documentation to see the changes from the version that is documented in the book.

Unfortunately, when there is a major version change, the book is no longer useful, there are too many differences and you get lost in the details.

I was talking to a colleague (startup founder) than abandoned Elixir after a couple of weeks testing because they couldn’t be productive with it.

4 Likes

As someone who has struggled a bit with outdated information, I have to respect the 0.x versioning scheme. When you use software clearly designated unstable (even if you can build amazing things with it) you have to consider the amount of work that would go into continuously updating the documentation, it’s time traditionally better spent on maturing the software. LiveView is a moving target, as already mentioned, and until it’s said to be otherwise (1.0?) you will have to live in this world with quickly outdated information, it’s one of the downsides of being an early adopter.

5 Likes

Is this the updated guides you’re referring to? I’m trying to follow this guide and It doesn’t work. I’d like to know how function components work but can’t seem to find any reliable info on them.

1 Like

You might find this helpful: Phoenix.Component — Phoenix LiveView v0.18.3

4 Likes

I am working on a new application that is not being used yet. When I saw the changes in Phoenix 1.7 and LiveView changes I decided to do the upgrade with the RC. I have to rewrite a lot but it’s totally worth it.

I was already using Tailwind, which is now integrated - cool. The common components are just beautiful and easy to adjust / extend for my own needs.
The aligned approach for components makes sense and avoids duplication / clutter when mixing classic controllers and live views.

A few years ago I was working with a small team on a Phoenix application which used Elm for the front-end part. Elm is cool but the learning curve is steep. It was definitely worth using Elm at the time but for a lot of SPAs the LV architecture gets you very far.

Now being the only developer on my side hustle I am so happy what Phoenix has to offer. While productivity might be initially impacted by learning the new syntax and paradigms, I am sure I will benefit long term by controlling the minimal stack of my application.

Thanks @chrismccord and the Phoenix team for all the great stuff.

5 Likes

I’ve found this book has really complimented my learning of LiveView. It does cover LiveView in later topics, which I’ve not gotten to as yet - and given the published date is going to be out of sync with the current version - but the content on Sockets and Channels is really usefull.

2 Likes

Wow, this isn’t very encouraging.

Honestly, I feel the same.

Coming from Laravel, Phoenix doesn’t seem to be targeting newcomers to Elixir at all.

The Docs are written assuming you know what a backend module is (I still don’t) and using other jargon.

I am sure that the authors of Phoenix are geniuses when it comes to programming and Elixir… but most of the people aren’t.

I really don’t think you could be able to write real life app just by following the Phoenix docs. By following the Laravel docs you can do anything. There isn’t a thing that isn’t there and explained even for absolute beginners.

One very weird thing is that there isn’t any start-to-finish app tutorial for Phoenix 1.6 or Phoenix 1.7 on YouTube or even a paid platform.

Even the Pragmatic Studio course is not an app from start to finish but like 8 miniapps which explain how to do sorting and stuff and logging but in an incoherent way - also they jump a lot and I dislike their style to be honest.

3 Likes

With Phoenix, all modules run on the back end. The front end is basically what LiveView adds to the equation.

Perhaps you have already, but if not, I would suggest spending a little time learning Elixir using the Elixir Guides, especially sections 1 through 19. This is great documentation for learning Elixir.

I think that this is undoubtably true with regard to writing a LiveView application. The Phoenix Guides are pretty good for learning Phoenix without LiveView. Start with the Overview section, and work your way down.

But for learning LiveView, which is why I came to Phoenix, the situation isn’t very good. First you need to read the Phoenix Guides and then try to work your way through the Phoenix LiveView guides.

It would be great if there was Phoenix LiveView getting started documentation that didn’t assume any prior Phoenix knowledge. One possibility would be to rework the Phoenix Guides and change the focus from vanilla Phoenix to Phoenix LiveView. To me this makes the most sense. Somewhere I read that even Chris McCord thinks that the default for writing Phoenix front end code should be LiveView.

Personally, I like the Pragmatic Studio approach. However, you may prefer the approach taken in the book Programming Phoenix LiveView.

Both of these resources are currently out of date, but are in the process of being updated.

2 Likes

Dave’s course is really a great one, thought not updated for Phoenix 1.7 of course. It takes you on a tour by a great teacher involving both Elixir and Phoenix.

4 Likes

The phoenix team seem to be so excited and busy adding features here and there and deprecating things so quickly… so they fly at a speed where they left all the potential community behind :sweat_smile: and that’s why is called a “niche” framework, not what most would like to hear but true.

1 Like