What is Alpine. Js

Alpine. Js is a responsive front-end framework developed by developer Caleb Porzio. Unlike vue.js, React, and Angular, Alpine. Js doesn’t require costly modifications to existing applications or the concept of a VDom.

Quick Study Guide

Alpine. Js is not widely used in China, so the corresponding learning content is mostly written in English, but Alpine. Js does not involve as many concepts as Vue, React and so on.

Recommended Learning routes

Alpine. Js doesn’t have that many concepts, so the route to learning Alpine is very simple. You just need to know the following

  • Alpine. Js basic syntax and usage;
  • Alpine. Js magic helper; (Not required)
  • Spruce, alpines.js state management tool (not required)

An understanding of the basic syntax will allow you to develop your own application using Alpine. Js. The latter two can simplify your entire development workflow and increase your development efficiency.

Recommended learning Documents

1. Consult official documents to learn basic grammar

To learn Alpine. Js, the first thing you can’t do without is the official document. Alpine

Github.com/alpinejs/al…

If your English is not good enough, I recommend you to read the traditional Chinese version translated by Taiwanese developers. Although the grammar and vocabulary are not exactly the same, it is a good supplement for developers who are not good at English.

Github.com/alpinejs/al…

In addition, Chinese developers have translated simplified Chinese version on their blogs, but it is not officially approved, so please pay attention to the version problem when watching.

For specific grammar, I suggest you follow the following logic to learn

The first tier, learn:

  • x-dataHow do you organize Alpine. Js code
  • x-on: event binding
  • x-if: Logical processing
  • x-forList rendering
  • x-bind: Data binding
  • x-model: two-way data binding

These six syntaxes allow you to get started with Alpine. Js.

The second tier, learn:

  • x-show: Controls whether to display
  • x-spread: Binds Alpine. Js Object properties to Object
  • x-text: Controls the text inside the element
  • x-html: Controls the Html within the element
  • x-transition: Controls transition gradient animation

These five syntaxes give Alpine. Js more functionality

The third tier, study:

  • x-cloak: Initialization of the control component is complete
  • x-ref: Binds the parent component object
  • $el: Get elements
  • $refs: Gets the x-ref annotated in the parent component object
  • $event: event object
  • $dispatch: Trigger event
  • $nextTick: Next DOM update
  • $watch: Listens for data changes

The syntax above will allow you to use Alpine. Js in more depth, but you probably won’t need it in many situations, so don’t worry.

2. Check the implementation modes of common logic and compare them

Hugo is a member of the Alpine. Js development team. In addition to development, Hugo also gives Alpine a Playground on his website, where you can see some common use cases of Alpine.

You can visit alpinejs.codewithhugo.com/ to see Hugo to prepare some cases, to rapidly understand. Are you familiar with the function in Alpine js should be how to implement.

Practice Alpine. Js online

Once you understand some of the basics, you can start to open a web page and practice using it yourself.

There are two debugging environments available online that you can practice with and see the results firsthand.

  • An exercise environment with TailwindCSS embedded
  • An exercise environment with a built-in Console

Alpine. Js is a tool that needs a lot of practice to become familiar with. With the documentation and case studies you have seen above, you can now practice Alpine.

4. Check out the real project to learn Alpine. Js

All a tool needs to move from testing to landing to a real environment is a reference from a real project. Awesome provides a number of examples.

By learning about these projects and tools, you can see how Alpine. Js is used by others and learn about Alpine.

Alpine. Js learning resources summary

Alpine. Js learning resources are not many, but there are some more suitable for domestic developers to see, I also list, specific as follows:

Video tutorial

  • Building AlpineJS: This course on Laracasts by Alpine. Js developer Caleb Porzio explains how to build Alpine. Js from 0.

Personal blog

  • Code With Hugo: Alpine. Js core developer’s blog will be updated With technical articles about Alpine
  • Alpine. Js step by step: Alpine. Js introductory tutorials written by compatriots in Taiwan, there is a series. A total of 30 complete, you can read a little bit.

Mailing list,

  • Alpine. Js Weekly: Alpine. Js Weekly is maintained by Hugo, the core developer of Alpine.

discussion

  • Github Discussions
  • Discord

Some Frequently asked Questions

Alpine. Js relies on Webpack/Alpine. Js does not support Webpack?

Answer: No, Alpine. Js can be used with or without webpack. Even if built with Webpack, Alpine. Js will automatically bind objects for you to use.

Alpine. Js is a technical solution designed for the front end/back end

A: Alpine. Js is not a technology solution for one type of person. While it seems to me that it’s backend friendly because you don’t need a front-end build like WebPack to use it, if you’re a front-end and don’t like React JSX or Vue template, you can still use Alpine.

3. How about Alpine. Js learning threshold?

Alpine. Js learning only need to master a few core syntax, can officially start using. Compared with Vue and React, I think the cost of learning is lower. Vue has a full toolchain, which smoothen the learning curve, but there are still a lot of concepts to learn, just easy to get started with.

My own experience of using it

Alpine. Js, in my opinion, is a great tool for backend developers. Its syntax is simple enough and does not require packaging, making it easy for back-end developers to plug into the system. At the same time, Alpine. Js can be well combined with the traditional server-side rendering logic, using the server-side rendering content, Alpine. Js to control the content, so as to complete the construction of the page, not only improve the complexity of the project, but also improve the dynamic effect of the page and the difficulty of writing logic. It’s a great tool for back-end developers.

For front-end developers who are sick of having to build and package every time they write a project, Alpine. Js is also a good choice.

The original address: www.ixiqin.com/2021/02/how…