Compare other frameworks
Welcome to this page, we believe that the purpose of coming here is to understand the difference between Ale and other large frameworks, which is exactly what we want to answer here.
Objectively speaking, as the core developer of Ale, we will definitely prefer Ale, and think it would be better to solve it with Ale for some problems. But here, we want to describe everything as fair and accurate as possible. Other frameworks have significant advantages, such as React’s vast ecosystem, or like Angular and Vue, which have numerous solutions for large projects. We will try to list all of them.
React and Ale are almost identical. In fact, React is the inspiration for the early Ale, they all have:
- Update only the necessary [use diff algorithm] when status (data) is updated
- Provides view components for responsive and componentized.
- Focus on the core library and pass other functions to the relevant libraries.
Because there are many similarities, we will spend more time comparing them in this block. Here we not only guarantee the accuracy of the technical content, but also take into account the balance considerations. We need to recognize where React is better than Ale, such as a richer ecosystem.
Here we only tested for component definition and component rendering, so the test results do not represent full performance. But what is certain is that Ale outperforms React in both respects: (defining a component and rendering 1000 elements)
- Ale: 46~52 (ms)
- React: 307~336 (ms)
Of course, we also did a test on responsive dynamic rendering, which showed that Ale performed dynamic rendering 2.5 times faster than React.
The reason for the slowness of React may be due to the fact that we use
Babel for dynamic rendering. But don’t forget, Ale doesn’t need to compile. If you compile React ahead of time, this will be unfair to Ale.
HTML & CSS
Ale’s overall idea is to embrace and extend the classic Web technologies. We will analyze it in detail below.
JSX vs Templates
Using JSX has the following advantages:
- Development tools support JSX is more advanced than other available Ale templates (eg, linting, type checking, editor auto-completion).
But in fact, Ale also provides rendering functions, and even Ale abandons the traditional Mustache (JSX) template and chooses a less popular rendering function, which includes the following aspects:
Well, to be honest, Ale is really not designed for large applications. We designed it to be able to handle almost all small and medium-sized applications.
In contrast, React provides powerful routing for large applications. And the React community is very innovative in terms of state management (such as Flux, Redux), which Ale can’t match.
The React learning curve is steep, and you need to know JSX and ES2015 before you start learning React, because many examples use these syntaxes. You need to learn to build the system, although you can technically compile the code in real time with Babel, but this is not recommended for production environments.
However, Ale expands down to be very similar to jQuery. Because you just have to put the following tags on the page to run:
Then you can write the Ale code and apply it to production. You just need to replace it with the min version of the Ale file without worrying about other performance issues.
Since Ale’s start-up phase doesn’t require any complex knowledge points, such as ES2015 and JSX, developers can build simple applications in less than half an hour by reading the guide.
React Native enables you to write native rendering capabilities for apps (iOS and Android) using the same component model. Being able to develop across multiple platforms at the same time is great for developers. In contrast, Ale is a bit weaker in this regard. But we didn’t stop here. As Ale slowly develops, these build systems will be released accordingly, so stay tuned.
Compared to React, Ale is extremely lightweight. Ale’s compressed files (not g-zip) [including APIs for manipulating DOM] are only about 8kb size, while React’s core library plus DOM library is amazing 108kb**.
Preact and other classes React library
The libraries of the class React often share API and ecology with React as much as possible. Therefore the above comparison is equally applicable to them. They differ from React in that they have a smaller ecology and higher performance. However, because these libraries are not 100% compatible with all of the React ecosystem, some tools and auxiliary libraries may not be available. Or even if it seems to work, there may be incompatibility at any time, unless the React library you use is officially consistent with React.
It is time to compare the most important frameworks. Earlier we said that React was the inspiration for early Ale. In fact, Ale’s more inspiration comes from Vue, which is why some of the features and APIs provided by Ale are very similar to Vue.
However, although Ale and Vue have similarities in some places, we recommend that you install both Ale and Vue, because Vue can make Ale’s development more efficient. But if you don’t want to do this, you can just install a framework.
Ale.js is much simpler than Vue in both API and design, and is more suitable for beginners to learn, so you can quickly master all of its features and invest in development.
Flexibility and componentization
Compared to Angular, Vue.js is a more flexible and open solution. But in Ale, this situation will change.
In fact, Vue enforces one-way data flow between different components, which makes the data flow in the application clearer and easier to understand, but it also limits the flexibility between components. In Ale, there are only composite components, and there are no parent and child components, and any component in the composite component can interoperate because they share a set of data.
Here we are the same as React, and only tested for component definition and component rendering, so the test results do not represent the performance of all operations. But what is certain is that Ale outperforms Vue in both respects: (defining a component and rendering 1000 elements)
- Ale: 46~52 (ms)
- Vue: 181~228 (ms)
Vue provides an official type declaration and component decorator for TS, but not everyone wants to use TS. In small and medium-sized projects, the introduction of TS may not bring much obvious advantages. In these cases, using Ale would be a better choice.
The separate vue.min.js file has a size of 88kb, while Ale has a size of only about 8kb, which is relatively lightweight compared to Vue.
But specifically, Vue’s API area is much larger than Ale, so you need to understand more concepts to get productive. Of course, the complexity of Vue itself is because it is designed to target large, complex applications. But it is undeniable that this also makes it quite unfriendly to developers who are not experienced enough.
Of course, the editors don’t know much about Angular, so they don’t make a good comparison. Here, we hope that more experienced developers can help us write articles comparing Angular. You can click on the Edit page below, then go to Github to submit, thank you for your support and understanding!
In fact, there is one more thing to add in terms of performance, because Vue and React use virtual DOM and diff algorithms. Ale actually traverses the real DOM tree directly, and then uses the diff algorithm to compare the differences. This is similar to Angular’s dirty check, and performance is affected. However, this approach also eliminates the need to create a virtual DOM tree.