{"id":18292,"date":"2022-07-14T09:30:00","date_gmt":"2022-07-14T07:30:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=18292"},"modified":"2022-07-14T10:14:26","modified_gmt":"2022-07-14T08:14:26","slug":"ten-reasons-why-i-think-alpine-js-can-do-magic","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/","title":{"rendered":"Ten Reasons Why I Think Alpine.js Can Do “Magic”"},"content":{"rendered":"\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tTable Of Contents\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
  1. 1 \u2013 It\u2019s an HTML enhancement – a sort of \u2018declarative jQuery\u2019<\/a>
  2. 2- Not for all kinds of projects<\/a>
  3. 3- Alpine.js makes use of Vue\u2019s reactivity system<\/a>
  4. 4- Alpine.js is built with the Proxy pattern<\/a>
  5. 5- Compared to front-end Vue, Alpine offers a fresher way to make things<\/a>
  6. 6 \u2013 Alpine.effect allows the creation of DOM reactivity via a jQuery-esque method<\/a>
  7. 7- Using Livewire, you get a full-stack reactive framework<\/a>
  8. 8- You can fetch and async easily with Alpine<\/a>
  9. 9 \u2013 x-if and x-show are different<\/a>
  10. 10- Alpine is extendible, in a cool way<\/a><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n

    When developing web applications<\/strong> I like to experiment with the capabilities of the tools the ecosystem has to offer, in order to find the most accurate solution for a particular project and to refine the coolest development stack possible<\/strong>. Every modern web development tool has specific potentials, limitations, and goals. The Alpine.js framework<\/strong> is one of the front-end tools that has most caught my interest; here are ten things I discovered while using this tool for web development.<\/p>\n\n\n\n

    1 \u2013 It\u2019s an HTML enhancement – a sort of \u2018declarative jQuery\u2019<\/h2>\n\n\n\n

    Alpine.js is a pretty powerful front-end library <\/strong>that allows users to write responsive interfaces in declarative mode. Typically, Alpine is used to make static HTML templates interactive by augmenting and enhancing the HTML syntax via new directives and Javascript injection. I like to describe Alpine as a kind of \u2018declarative jQuery\u2019<\/strong> (or a modern replacement for jQuery with a Vue template taste), because it allows users to manipulate the DOM in a Vue-like way, but without the need for bundling and installation.

    Of course you can install Alpine via NPM and import it into your bundle, making use of the full Alpine Javascript API<\/strong>, but for most projects, importing is made easy by injecting a simple, old-fashioned script derived from a CDN into your app.

    Putting Alpine’s script in your <head> gives you the ability to manipulate the DOM in a declarative mode in just a few steps, and with a much shallower learning curve than tools like Angular, React, or Vue demand.<\/p>\n\n\n\n

    2- Not for all kinds of projects<\/h2>\n\n\n\n

    Alpine is a kind of layer on top of static HTML which enables reactive interactivity to be easily added. Personally, I don’t see Alpine.js as a future competitor to the big three, but I don\u2019t think that\u2019s the authors’ intention; tools<\/a> like React, Svelte, or Vue are complete development stacks<\/strong> allowing users to manage the web application in its entirety, while Alpine, as previously stated, is a tool for creating interactive front-end interfaces<\/strong>.

    In my experience, not all projects need pachydermic, bulky tools like the big three listed, and it\u2019s precisely for the projects that don\u2019t need these tools that Alpine.js is most suitable.

    Adding reactivity to a template in a simple and very powerful way without the need for bundles and back-end extensions<\/strong> – that\u2019s the Alpine.js tool in a nutshell.<\/p>\n\n\n\n

    3- Alpine.js makes use of Vue\u2019s reactivity system<\/h2>\n\n\n\n

    Once you\u2019re accustomed to Alpine’s way of making interactive data, you may think it’s a bit magical.

    In reality, if you study the source code of any open-source tool<\/strong>, you\u2019ll find that the \u2018magic\u2019 is really very pragmatic. Reactivity in Alpine.js is caused by two main functions – Alpine.reactive () and Alpine.effect () – but if you take a look under the hood, these functions use VueJS’s reactivity engine<\/strong>. This engine is very powerful and can be used as a standalone, or with abstractions built on top of it.<\/p>\n\n\n\n

    4- Alpine.js is built with the Proxy pattern<\/h2>\n\n\n\n

    If you are interested in Design Pattern<\/a> architectures<\/strong>, you may find it entertaining that in order to make the magic happen, the Alpine.reactive function makes use of the Proxy pattern.
    A Proxy is basically a JavaScript object which allows you to wrap other objects, and to intercept and redefine operations on them. In a nutshell, Proxy objects make it possible to define objects that can be used in place of the original object, but which may redefine fundamental Object operations such as getting, setting, and defining properties, i.e.,  by using a little bit of Javascript in order to better understand that:<\/p>\n\n\n

    let<\/span> obj = { color<\/span>: \u2018blue\u2019 }\nlet<\/span> proxy = Alpine.reactive(obj)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here, the function Alpine.reactive receives a plain object and wraps it inside a Proxy object<\/strong>. The \u201cproxy\u201d variable is a wrapper around the \u201cobj\u201d variable, so any attempts to get or set a \u201cproxy\u201d property will behave exactly as if you had interacted with \u201cobj\u201d directly:<\/p>\n\n\n
    console<\/span>.log(obj.color) \/\/ blue<\/span>\nconsole<\/span>.log(proxy.color) \/\/ blue<\/span>\n\nproxy.color = \u2018green\u2019\n \nconsole<\/span>.log(obj.color) \/\/ green<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Now, any time you update or retrieve a value from the proxy object, Alpine is aware of this and can run any other logic<\/strong> that depends on this data.<\/p>\n\n\n\n
    5- Compared to front-end Vue, Alpine offers a fresher way to make things<\/h2>\n\n\n\n
    \"Infographic,
    Alpine feels fresh to work with.<\/figcaption><\/figure>\n\n\n\n
    There are many similarities between Alpine and (front-end) Vue, however, I personally find the Alpine approach a more comfortable option for developing interfaces<\/strong> –  and it\u2019s a bit cooler as a development experience.

    For example:
    1- in Alpine (in most cases) you do not need a <template> wrapper
    2- Alpine allows you to wrap component data directly in HTML, enhancing its functionalities (no need for separation of concerns):<\/p>\n\n\n
    div x-data = \"{isOpen: false}\"<\/span>>\n<button<\/span> x-on:click<\/span> =\"isOpen = !isOpen\"<\/span>><\/span>Toggle<\/button<\/span>><\/span><\/span>\n<h1<\/span> x-show<\/span> = \"isOpen\"<\/span>><\/span>Alpine.js HTML enhancement!<\/h1<\/span>><\/span><\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    3- if you\u2019re worried about separation of concerns and you want to reuse your component logic, this is possible without the need for export logic, a \u201cmethod\u201d object, or returning a data() wrapper:<\/p>\n\n\n
    function<\/span> component1Data<\/span>(<\/span>) <\/span>{\n  return<\/span> {\n    isOpen<\/span>: false<\/span>,\n    toggleOpen() { this<\/span>.isOpen = !this<\/span>.isOpen }\n  }\n}\n<div x-data = \"component1Data()\"<\/span>>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    6 \u2013 Alpine.effect allows the creation of DOM reactivity via a jQuery-esque method<\/h2>\n\n\n\n
    You can make powerful use of the second reactivity-maker function of Alpine – Alpine.reactive – which makes any data reactive. This works in combination with the previous reactivity maker:<\/p>\n\n\n
    let<\/span> obj = { color<\/span>: \u2018blue\u2019 }\nlet<\/span> proxy = Alpine.reactive(obj)\n \nAlpine.effect(()<\/span> =><\/span> {\n    console<\/span>.log(proxy.color)\n})\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    With this approach, the callback will be executed once, and whenever you interact with the reactive \u201ccolor\u201d property of the proxy object you will console.log its value.
    This means you can skip the Alpine-HTML template completely<\/strong> and rely on vanilla Javascript DOM manipulations and the two Alpine reactivity-maker functions:<\/p>\n\n\n
    let<\/span> button = document<\/span>.querySelector('button'<\/span>)\nlet<\/span> span = document<\/span>.querySelector('span'<\/span>)\n \nlet<\/span> proxy = Alpine.reactive({ color<\/span>: \u2018blue\u2019 })\n \nAlpine.effect(()<\/span> =><\/span> {\n    span.textContent = proxy.color\n})\n \nbutton.addEventListener('click'<\/span>, () => {\n    proxy.color = (proxy.color == \u2018blue\u2019) ? \u2018green\u2019 : \u2018blue\u2019\n}) \n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    This feels to me like a fresh, yet powerful combination of imperative-declarative paradigm<\/strong> and a jQuery-Vue approach to doing things.
    <\/p>\n\n\n\n
    7- Using Livewire, you get a full-stack reactive framework<\/h2>\n\n\n\n
    It\u2019s no secret that I love Laravel, and I like Livewire too. Alpine.js seems to me to be a perfect companion for Livewire, producing results that resemble the full-stack React\/Vue experience of making web applications using a PHP environment<\/strong>. You can do many pretty amazing things with these two pieces of code straight out of the box – the most basic option is the interaction between a server-state and a front-end template:<\/p>\n\n\n
    class<\/span> Obj1<\/span> extends<\/span> Component<\/span>\n<\/span>{\n    public<\/span> $color = \u2018blue\u2019;\n \n    public<\/span> function<\/span> toggle<\/span>()<\/span>\n    <\/span>{\n        $this<\/span>->color = ( $this<\/span>->color == \u2018blue\u2019 ) ? \u2018green\u2019 : \u2018blue\u2019;\n    }\n}\n<div>\n    \n    <div x-data>\n        <h1 x-text=\"$wire.color\"<\/span>><\/h1>\n \n        <button x-on:click=\"$wire.toggle()\"<\/span>>Toggle color<\/button>\n    <\/div>\n<\/div>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    Because the $wire variable also uses a JavaScript Proxy under the hood, users can access properties and call methods on it, with those operations forwarded to Livewire.<\/p>\n\n\n\n
    8- You can fetch and async easily with Alpine<\/h2>\n\n\n\n
    Although Alpine is not designed as a native full-stack interaction tool, asynchronous operations that involve fetching data from a server are very common, and also very important from a templating perspective.  You can fetch data very easily directly in the Alpine template<\/strong> – either by explicitly marking a function handler as async, or the opposite. In the latter case, Alpine will do the work for you:<\/p>\n\n\n
    async function<\/span> getItems<\/span>()<\/span> <\/span>{\n    let response = await fetch('\/api\/items\/all'<\/span>)\n    let json = await response.json()\n    return<\/span> json\n}\n\n<div x-text=\"JSON.stringify(getItems())\"<\/span>><\/div>\n\nor<\/span> alternatively:\n<div\n    x-data=\"{\n        items: {},\n\n        async getItems() {\n            this.items = await (await fetch('\/api\/items\/all')).json();\n        }\n    }\"<\/span>\n    x-init=\"getItems\"<\/span>>\n<\/div>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    9 \u2013 x-if and x-show are different<\/h2>\n\n\n\n
    This is quite a simple, but key concept: Alpine.js shines when it comes to toggle elements, a very common operation in making every frontend template.  Here you have two ways of doing this: the x-show and x-if directives. They may look similar, but they are actually very different.
    <\/strong>First of all, the x-show directive \u2018hides\u2019 or \u2018shows\u2019 a DOM element, i.e.,  when you don\u2019t see the element, it\u2019s because its CSS display property is set to \u2018none\u2019, while x-if completely removes the element from DOM.

    Secondly, because of this behaviour, the element (or a series of elements nested in the root element) you have to inject the x-if directly into a <template> wrapper rather than into the direct DOM element you want to toggle.

    Finally, x-show supports transition toggling, meaning you can combine its functionalities with the x-transition directive, which you can\u2019t do with x-if. Here you have two distinct, powerful mechanisms which allow you to toggle template parts with full control over the operation.<\/p>\n\n\n\n
    10- Alpine is extendible, in a cool way<\/h2>\n\n\n\n
    You are not bound to the directives and functionalities you\u2019ll find in the Alpine core engine. Instead, users can extend that mechanism by using the Alpine.directive and Alpine.magic functions. The first of these allows you to make custom directives that can then be injected into the HTML template:<\/p>\n\n\n
    Alpine.directive('wrap', el => {\n    el.textContent = \u2018***\u2019 + el.textContent + \u2018***\u2019\n})\n<div<\/span> x-data<\/span>><\/span>\n    <span<\/span> x-wrap<\/span>><\/span>Wrap this text! <\/span<\/span>><\/span>\n<\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
     The second allows you to make magic properties and functions:<\/p>\n\n\n
    Alpine.magic('alert'<\/span>, () => {\n    return<\/span> subject => alert(subject)\n})\n<button @click=\"$alert('say hello!')\"<\/span>>Alert  this element text content<\/button>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>","protected":false},"excerpt":{"rendered":"
    When developing web applications I like to experiment with the capabilities of the tools the ecosystem has to offer, in order to find the most accurate solution for a particular project and to refine the coolest development stack possible. Every modern web development tool has specific potentials, limitations, and goals. The Alpine.js framework is one… Read more<\/a><\/p>\n","protected":false},"author":94,"featured_media":18298,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":5,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[9907,9961],"collections":[],"class_list":{"0":"post-18292","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-frameworks","9":"tag-javascript","10":"entry"},"yoast_head":"\nTen Reasons Why I Think Alpine.js Can Do "Magic" - Codemotion<\/title>\n<meta name=\"description\" content=\"Read on to discover code examples, tips, and lessons learned by a pro front-end developer using the alpine.js framework\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ten Reasons Why I Think Alpine.js Can Do "Magic"\" \/>\n<meta property=\"og:description\" content=\"Read on to discover code examples, tips, and lessons learned by a pro front-end developer using the alpine.js framework\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-14T07:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-14T08:14:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Riccardo Degni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Riccardo Degni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/\"},\"author\":{\"name\":\"Riccardo Degni\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/6912e00a94efa41fb20e92ba1bb050fb\"},\"headline\":\"Ten Reasons Why I Think Alpine.js Can Do “Magic”\",\"datePublished\":\"2022-07-14T07:30:00+00:00\",\"dateModified\":\"2022-07-14T08:14:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/\"},\"wordCount\":1376,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg\",\"keywords\":[\"Frameworks\",\"JavaScript\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/\",\"name\":\"Ten Reasons Why I Think Alpine.js Can Do \\\"Magic\\\" - Codemotion\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg\",\"datePublished\":\"2022-07-14T07:30:00+00:00\",\"dateModified\":\"2022-07-14T08:14:26+00:00\",\"description\":\"Read on to discover code examples, tips, and lessons learned by a pro front-end developer using the alpine.js framework\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2022\\\/07\\\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"alpine.js framework, code smells\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/ten-reasons-why-i-think-alpine-js-can-do-magic\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/frontend\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Ten Reasons Why I Think Alpine.js Can Do “Magic”\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#website\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Codemotion.Italy\\\/\",\"https:\\\/\\\/x.com\\\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/#\\\/schema\\\/person\\\/6912e00a94efa41fb20e92ba1bb050fb\",\"name\":\"Riccardo Degni\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/rd-image-book-pic-e1697717445644-150x150.jpg\",\"caption\":\"Riccardo Degni\"},\"description\":\"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.\",\"sameAs\":[\"http:\\\/\\\/www.riccardodegni.com\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/riccardodegni\\\/\"],\"url\":\"https:\\\/\\\/www.codemotion.com\\\/magazine\\\/author\\\/riccardo-degni\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ten Reasons Why I Think Alpine.js Can Do \"Magic\" - Codemotion","description":"Read on to discover code examples, tips, and lessons learned by a pro front-end developer using the alpine.js framework","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/","og_locale":"en_US","og_type":"article","og_title":"Ten Reasons Why I Think Alpine.js Can Do \"Magic\"","og_description":"Read on to discover code examples, tips, and lessons learned by a pro front-end developer using the alpine.js framework","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2022-07-14T07:30:00+00:00","article_modified_time":"2022-07-14T08:14:26+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg","type":"image\/jpeg"}],"author":"Riccardo Degni","twitter_card":"summary_large_image","twitter_creator":"@CodemotionIT","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Riccardo Degni","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/"},"author":{"name":"Riccardo Degni","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb"},"headline":"Ten Reasons Why I Think Alpine.js Can Do “Magic”","datePublished":"2022-07-14T07:30:00+00:00","dateModified":"2022-07-14T08:14:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/"},"wordCount":1376,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg","keywords":["Frameworks","JavaScript"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/","name":"Ten Reasons Why I Think Alpine.js Can Do \"Magic\" - Codemotion","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg","datePublished":"2022-07-14T07:30:00+00:00","dateModified":"2022-07-14T08:14:26+00:00","description":"Read on to discover code examples, tips, and lessons learned by a pro front-end developer using the alpine.js framework","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg","width":1920,"height":1080,"caption":"alpine.js framework, code smells"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/ten-reasons-why-i-think-alpine-js-can-do-magic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Ten Reasons Why I Think Alpine.js Can Do “Magic”"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/6912e00a94efa41fb20e92ba1bb050fb","name":"Riccardo Degni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2023\/10\/rd-image-book-pic-e1697717445644-150x150.jpg","caption":"Riccardo Degni"},"description":"I am a senior web developer, active both on front-end and back-end, a teacher focused on modern programming, a Research Consultant for IT research, and a writer who creates programming articles and guides. I am both a developer with a strong foundation in new technologies such as full Javascript-based environments and object-oriented programming on the server-side (PHP, Node, and Java), and a designer who makes powerful, modern, fully-responsive, and WordPress-free templates.","sameAs":["http:\/\/www.riccardodegni.com\/","https:\/\/www.linkedin.com\/in\/riccardodegni\/"],"url":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-600x400.jpg","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-600x600.jpg","author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg",1920,1080,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-150x150.jpg",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-300x169.jpg",300,169,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-768x432.jpg",768,432,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-1536x864.jpg",1536,864,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg",1920,1080,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash.jpg",100,56,false],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-180x128.jpg",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-896x504.jpg",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-400x225.jpg",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-600x400.jpg",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2022\/07\/jackson-sophat-_t-l5FFH8VA-unsplash-600x600.jpg",600,600,true]},"uagb_author_info":{"display_name":"Riccardo Degni","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/riccardo-degni\/"},"uagb_comment_info":0,"uagb_excerpt":"When developing web applications I like to experiment with the capabilities of the tools the ecosystem has to offer, in order to find the most accurate solution for a particular project and to refine the coolest development stack possible. Every modern web development tool has specific potentials, limitations, and goals. The Alpine.js framework is one……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=18292"}],"version-history":[{"count":12,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18292\/revisions"}],"predecessor-version":[{"id":18408,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/18292\/revisions\/18408"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/18298"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=18292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=18292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=18292"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=18292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}