How jQuery -> Alpine reduced lines of code by 82%

For anyone still not sold on Alpine? How about no context switching and no waiting for rebuilds?

First time using @Alpine_JS in a real-world context. I can’t overstate the joy of not switching context and not waiting for any compilation to complete.

— Daniel Wentsch 🇪🇺 (@klickreflex) July 16, 2020

jQuery -> Alpine.js = 82% reduction in code

I’ve just reduced a jQuery script that was 1009 lines, to 179 using @alpinejs and ES6.

Not to mention the initial bulk of loading jQuery compared to a move lean AlpineJS.

*party* 🥳

— Jason Mayo 🍩 (@MadeByMayo) July 16, 2020

This email is supported by Codecourse. Practical screencasts for developers (including Alpine.js!).

It really seems like Alpine.js is a great way to migrate off of jQuery.

I had been dreading some updates on a legacy jQuery / Bootstrap project recently. Instead of trying to sort through the using the old libraries or risk breaking everything by updating, I just slapped @Alpine_JS in there and got shit done. What a great tool. 🙌

— Jordan Hoff (@jordanthoff) July 14, 2020

TALLStack is still going strong, the Laravel - Alpine - Livewire crew is strong.

#TALL is my best combination@tailwindcss + @Alpine_JS + @laravelphp + @LaravelLivewire = 🔥🔥🔥

— Mohamed Sabil (@MohamedSabil83) July 13, 2020

Static site generator + Alpine 👍

This client project in @statamic has a 🍔 menu, the only place where I need JavaScript… Guess its finally time to reach for @Alpine_JS

— 𝙳𝚊𝚟𝚒𝚍 𝙰. 𝙻𝚒𝚗𝚍𝚊𝚑𝚕 (@austriker27) July 16, 2020

Tips

You can test Alpine.js components using JSDOM, I’ve put together alpine-test-utils to make that easier, here’s a “hello world” with AVA:

#100DaysOfCode Day 42 - Setting up testing on #alpinejs app with ava & alpine-test-utils pic.twitter.com/tylYoBVrx0

— mns (@narze) July 16, 2020

WordPress + Alpine to create custom themes is a thing with jackpine.

Putting finishing touches tonight on a theme framework I hope will be useful to all of you out there who build custom WordPress sites for your clients.

Uses a stack I’ve found extremely useful: Timber, Tailwind CSS, Alpine.js, https://t.co/zwQxXZaUv2.https://t.co/aUyuOru1B6

— Dylan Layne Tanner (@DylanLTanner) July 12, 2020

Made with Alpine.js

• dissent.fit by @tannerbryant is Statamic, Alpine & Tailwind.
• pimdeed.vercel.app by @narze is built with Alpine.js, Tailwind and Eleventy
• primo.af is Tailwind + Alpine, spotted by by @clemblanco
• floodtheinbox.netlify.app (see the source at github.com/dfosco/floodtheinbox by @dfosco is built with Alpine.js and Tailwind

Demos:

• Focus styles only if user tabs by @kevinbatdorf
• the “meatball nav” on the Laravel Shift dashboard is Alpine + Tailwind, by @laravelshift
• data-driven drag&drop listbox that is WCAG friendly by @kevinbatdorf is Tailwind + Alpine
• custom reaction emoticons list by @hocvt is Alpine.js and Tailwind.

Articles & Tutorials

Introducing Alpine.js: A Minimal JavaScript Framework by @Fonseka_AU

For more posts like these, you can join the Alpine.js Development Subscription, it’s a great way to support the newsletter and get early access to Alpine.js content.

Code & Tools

Drupal + Alpine Single File Components https://git.drupalcode.org/project/sfc/-/tree/8.x-1.x/modules/sfc_example/components/alpine by @mortensonsam

Here are all my @Alpine_JS examples for Drupal Single File Components https://t.co/TpeoZV3Cls

— Sam Mortenson (@mortensonsam) July 13, 2020

jackpine by @DylanLTanner is a theme framework for custom WordPress sites with Timber, TailwindCSS, Alpine.js & wpack.io.

Coming soon - Joomla Admin with Tailwind and Alpine?

WIP… Joomla Administrator using TailwindCSS/AlpineJS. No Bootstrap but works with Bootstrap classnames so few template overrides & its backwards compatible. #joomla #tailwindcss pic.twitter.com/zkveoOVefC

— Shayne Bartlett (@joombaya) July 12, 2020