TodoMVC Implementation with CFWheels and HTMX

<!-- wp:paragraph --> <p>Recently I've been playing around with HTMX and really starting to love it. So what is HTMX? From their <a href="https://htmx.org">website</a>:</p> <!-- /wp:paragraph --> <!-- wp:quote --> <blockquote class="wp-block-quote"><p>htmx gives you access to&nbsp;&nbsp;<a href="https://htmx.org/docs#ajax">AJAX</a>,&nbsp;<a href="https://htmx.org/docs#css_transitions">CSS Transitions</a>,&nbsp;&nbsp;<a href="https://htmx.org/docs#websockets">WebSockets</a>&nbsp;and&nbsp;<a href="https://htmx.org/docs#sse">Server Sent Events</a>&nbsp;directly in HTML, using&nbsp;<a href="https://htmx.org/reference#attributes">attributes</a>, so you can build&nbsp;<a href="https://htmx.org/examples">modern user interfaces</a>&nbsp;with the&nbsp;<a href="https://en.wikipedia.org/wiki/HATEOAS">simplicity</a>&nbsp;and&nbsp;<a href="https://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm">power</a>&nbsp;of hypertext</p><cite>Introduction to htmx</cite></blockquote> <!-- /wp:quote --> <!-- wp:paragraph --> <p>And also:</p> <!-- /wp:paragraph --> <!-- wp:quote --> <blockquote class="wp-block-quote"><p>Why should only&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>&nbsp;and&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form"><code>&lt;form&gt;</code></a>&nbsp;be able to make HTTP requests?<br>Why should only&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event"><code>click</code></a>&nbsp;&amp;&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event"><code>submit</code></a>&nbsp;events trigger them?<br>Why should only&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET"><code>GET</code></a>&nbsp;&amp;&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST"><code>POST</code></a>&nbsp;methods be&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">available</a>?<br>Why should you only be able to replace the&nbsp;<strong>entire</strong>&nbsp;screen?<br></p><p>By removing these arbitrary constraints, htmx completes HTML as a&nbsp;<a href="https://en.wikipedia.org/wiki/Hypertext">hypertext</a></p><cite>Motivation behind htmx</cite></blockquote> <!-- /wp:quote --> <!-- wp:paragraph --> <p>So what does this all mean? Well, in its simplest form, it means being able to build modern web applications with the UX that users have come to expect, with the HTML, CSS, and the backend technology of your choice which in our case is CFML and CFWheels. </p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>So I decide to see if I could build the <a href="https://todomvc.com">TodoMVC</a> project using no hand written JavaScript and only relying on HTML, CSS, and CFWheels. I downloaded the template project and took a look at the application specs to get an idea of what to implement. </p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Here is the video of the running app:</p> <!-- /wp:paragraph --> <!-- wp:image {"id":872,"sizeSlug":"full","linkDestination":"media"} --> <figure class="wp-block-image size-full"><a href="https://cfwheels.org/blog/wp-content/uploads/2022/03/cfwheels-todomvc-htmx.gif"><img src="https://cfwheels.org/blog/wp-content/uploads/2022/03/cfwheels-todomvc-htmx.gif" alt="" class="wp-image-872"/></a></figure> <!-- /wp:image --> <!-- wp:paragraph --> <p>So if you want to run the app locally, you'll need to have Commandbox installed and the CFWHeels CLI commands for CommandBox installed as well. With those two items taken care of, launch a CommandBox and issue the following commands.</p> <!-- /wp:paragraph --> <!-- wp:code --> <pre class="wp-block-code"><code>wheels g app name=todo datasourceName=todo template=cfwheels-todomvc-htmx --setupH2 package install server start</code></pre> <!-- /wp:code --> <!-- wp:paragraph --> <p>Let's look at those lines and talk about what they do. The first line <code>wheels g app</code> will download the template app from Forgbox.io and create a CFWheels application and name it <code>todo</code>. It also create a H2 database and configures the datasource for you. The next line will <code>install</code> all the dependencies of our app. These include, a few CommandBox modules to make development easier, the CFWheels core framework directory and place it into the <code>wheels</code> folder, and install the H2 drivers into our Lucee server for out application. The last line will <code>start</code> our Lucee server. I've also added a setting to automatically run the Database migrations on application startup so the database schema is created.</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>You can checkout the code on <a href="https://github.com/bpamiri/cfwheels-todomvc-htmx">GitHub</a>. Let me know what you think. </p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>EDIT: The Lucee server that starts up will have <code>cfwheels</code> set as its admin password.</p> <!-- /wp:paragraph -->