Getting started with PETAL
Lars wrote a Changelog Post introducing the PETAL stack last week. Now he’s back with something a little more actionable, for those intrigued by the proposition.
Lars wrote a Changelog Post introducing the PETAL stack last week. Now he’s back with something a little more actionable, for those intrigued by the proposition.
There’s a new stack in town. PETAL. It destructures to Phoenix, Elixir, Tailwind, Alpine and LiveView. So what is it? Well, it helps you build web applications. Let me tell you about it…
I thought it’d be cool to get mix test
and mix format
running on pushes to the changelog.com repo, so I gave GitHub Actions the old college try. After (not too much) futzing around on my own, I figured I’d have more success by getting an expert to help out. Good call be me! 😆
In this ~1 hour jam session, we go from zero to a successful Actions workflow. I learned a lot along the way, and you might too by joining us on the journey. Thanks, Jonathan!
Wondering why your Phoenix application is recompiling dozens or hundreds of files every time you make a small change? Cross-module compilation dependencies are often to blame.
Chris McCord:
Phoenix v1.5 has been released with LiveView integration. This release makes it easier than ever to build interactive, real-time applications. We put together a quick screencast to show just how much you can accomplish in 15 minutes with LiveView
After José’s announcement yesterday I just had to get my hands a little dirty and kick the tires.
José and the Phoenix team just announced this cool new dashboard for monitoring real-time performance of your production Phoenix systems. I’ll be setting this up and kicking the tires on changelog.com ASAP.
Jam session! I sat down (metaphorically) with Phoenix’s new LiveView feature to see if I can integrate it into our admin to provide a Google Docs-esque experience for podcast co-hosts.
This is my first long-form video where I work toward a goal with no clue how to actually get there. Please let me know if you dig this style in general and/or if you have any advice on the particulars.
José Valim, writing on the Dashbit blog:
I have thought about launching “Devise for Phoenix” probably hundreds of times. I had long conversations with Chris McCord (creator of Phoenix) and co-workers about this. Helping Phoenix users get past the burden of setting up authentication can be a great boost to adoption. At the same time, I never found a proper way to approach the problem.
You can probably guess what’s coming next…
About 2 months ago I decided to handwrite a simple and secure authentication solution on top of a Phoenix application.
Cool stuff. Click through to learn the details of what he came up with (and what’s happening next).
Jerod is joined by Chris and Desmond (co-hosts of the ElixirTalk podcast) to catch up on what’s moving and shaking in the Elixir and Phoenix communities. We discuss what’s attractive about Elixir, what it means to have the language finalized, why folks are so excited by Phoenix LiveView, the ambitious new Lumen project that’s bringing Elixir to WebAssembly, and more.
Jonathan Clem:
What I’m most excited for with Phoenix LiveView isn’t necessarily the cool technology that it really is, but more the freedom that it gives me to quickly implement nice-to-have features that would otherwise be too much work to bother with.
I’m having a lot of fun with Svelte right now, but it’s probably time for me to turn my attention to LiveView. Where there’s enough smoke, there’s usually 🔥…
Conventional template languages like EEx use a form of interpolation to embed a programming language into a markup language, which can result in some ugly code that can be difficult to write and debug.
Temple is written using pure elixir.
There are some good ideas here, for sure. (Click through for code samples.)
My concern with this (and with pretty much all non-HTML style template languages) is cognitive overhead for folks who’d rather be writing HTML. That being said, if I were creating a web app from scratch all by my lonesome, I’d 💯% give Temple a go.
Phoenix 1.3 introduced the idea of Contexts, which I’m generally very much in favor of. However, I wish there was a little bit more structure to the idea. It’s so open ended that I’ve found deciding where best to put a function kind of tricky, and then I frequently end up with duplicate behavior across contexts or have a hard time finding functions later on because the module they’re in made sense at the time, but it doesn’t make as much sense now.
So, I’m proposing the idea of a Primary Context and a Secondary Context.
I’ve also struggled to determine just how to use Contexts to my benefit. It seems that Devon is trying an add more structure approach whereas I have (so far) gone with a YAGNI approach.
Adam Wathan was gracious enough to invite me on Full Stack Radio to discuss why and how we built this very platform that I’m using to write and you’re using to read.
Most of the show focuses on Elixir itself, with topics ranging from pattern matching and immutability to the pipe operator and deployment. Adam also got me to confess a dirty little secret… I still don’t really know what GenServers are! 😱
Nick Janetakis joins Jerod backstage to talk shop. We discuss how Nick is using the Changelog.com source code as a guide to build his video course platform, coding practices we’ve developed over the years, how to balance between shipping features and creating content, newsletters as the new social network, how Nick makes his videos, and a whole lot more.
Chris McCord and team have (finally 😉) open sourced Phoenix’s much anticipated LiveView feature and Dennis Beatty has a great video/explainer on how to build a simple counter with it.
I’m watching this space very closely for future changelog.com features and can’t wait to give it a spin!
As a reminder, LiveView is an in-development feature of the Phoenix web framework that helps you create rich, interactive experiences while writing very little (ostensibly, zero) JavaScript. In Chris’ words:
Phoenix LiveView is an exciting new library which enables rich, real-time user experiences with server-rendered HTML. LiveView powered applications are stateful on the server with bidrectional communication via WebSockets, offering a vastly simplified programming model compared to JavaScript alternatives.
In the linked post, Chris shows a lot of examples of LiveView in action, demonstrating what it’s capable of.
Here’s a feature-complete snake game, in 330 LOC, which requires zero user-land JavaScript.
Impressive!
This release ships with exciting new features, most notably HTTP2 support, improved development experience with faster compile times, new error pages, and local SSL certificate generation.
I’m excited to upgrade us so we can get up and running on H2! 💪
Darin Wilson:
In his keynote at ElixirConf last week, Chris McCord announced a new feature for the Phoenix web framework that caused many jaws to hit the floor, and had the hall buzzing when the talk was over. The new feature, tentatively called “LiveView”, allows developers to add dynamic, client-side interactions to web pages, using code that runs in Elixir on the server.
What exactly is a LiveView, though? We don’t really know yet as this is an ongoing project and no code has been released yet.
But as near as I can tell, a LiveView is lot like a React component running in a GenServer – it even has a render function! And with the EEx sigil (which I didn’t know was a thing) the code feels a lot like JSX
I am unreasonably excited to see what becomes of this.
Yesterday, Griffin Byatt hit me up in Slack and let me know we had a few security holes. 😱
After a quick discussion about the magnitude of said holes, he informed me that he’d found them by running our code through his static analysis tool, Sobelow. Say what?
For security researchers, it is a useful tool for getting a quick view of points-of-interest. For project maintainers, it can be used to prevent the introduction of a number of common vulnerabilities.
I asked Griffin if he’d be kind enough to open a PR with the fixes so we can link it up and use it to show folks how handy this tool is. So that’s what he did and that’s what I’m doing! 💚
The W3C is standardizing the Server-Timing API, which means it’ll be getting easier and easier to push server-side metrics in to our dev tools.
Ole Michaelis takes us through plugging (pun intended) it all together with Phoenix. It’s almost too easy!
Zack Kayser built a Texas Hold ‘Em app with the EEP (?) stack and wrote up his findings. He calls Elm and Elixir “a match made in Functional Heaven”, but the endeavor wasn’t without its challenges:
I personally struggled with 1) how to organize my code, especially with larger modules, 2) figuring out how to make the UI more interactive, and 3) sharing code across modules.
There’s a lot to learn from Zack’s experience. Both the Elm front-end and Phoenix back-end are open source. ✊
Chris McCord with a great round-up of advancements to the popular Elixir web framework. Highlights include H2 support, faster dev compilation, and a harder/better/faster/stronger JSON encoding library.