Question 1

How to build a todo app in Phoenix without JavaScript?

Accepted Answer

This tutorial provides a step-by-step guide using Phoenix's server-side rendering with HEEx templates and Ecto for database operations. It covers everything from setup to deployment, ensuring a functional app with zero client-side code by leveraging HTML links and CSS for interactions.

Question 2

Phoenix vs React for todo apps: which is better?

Accepted Answer

Phoenix with server-side rendering offers faster initial loads and simplicity by avoiding JavaScript, but React provides richer client-side interactions. This tutorial showcases Phoenix's approach, which is ideal for beginners or projects prioritizing server-side logic and accessibility over complex frontend state.

Question 3

How to handle inline editing in Phoenix without JavaScript?

Accepted Answer

The tutorial uses CSS tricks and server-side routes to simulate double-click editing, as explained in the 'Edit an Item' section. It involves creating routes for toggling and updating items via links instead of JavaScript events, relying on browser re-rendering for a seamless UX.

Question 4

Is this Phoenix todo app suitable for production?

Accepted Answer

While the tutorial builds a functional app, it's primarily for learning. For production, you'd need to add features like authentication, error handling, and security enhancements, but it provides a solid foundation with performance optimizations like sub-5ms responses.

Question 5

How to add filtering to a Phoenix todo list?

Accepted Answer

The tutorial implements filtering through route parameters and view functions that filter items based on status, as shown in the 'Footer Navigation' section. It uses the `filter/2` function in the view to display active, completed, or all items without JavaScript.

Question 6

What are the performance benefits of server-side rendering in Phoenix?

Accepted Answer

As demonstrated, server-rendered pages respond in under 5ms, and with modern browsers, partial re-rendering makes the UX fast. This reduces client-side processing, improves SEO, and can enhance performance on slower devices or with limited JavaScript support.

phoenix-todo-list-tutorial

What is phoenix-todo-list-tutorial?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions