diff --git a/doc/comparison.md b/doc/comparison.md index 1cee3115..7235bc07 100644 --- a/doc/comparison.md +++ b/doc/comparison.md @@ -3,7 +3,7 @@ OWL, React and Vue have the same main feature: they allow developers to build declarative user interfaces. To do that, all these frameworks uses a virtual dom. However, there are still obviously many differences. -In this page, we try to highlight some of these differences. Obviously, some +In this page, we try to highlight some of these differences. Obviously, a lot of effort was done to be fair. However, if you disagree with some of the points discussed, feel free to open an issue/submit a PR to correct this text. @@ -16,6 +16,7 @@ discussed, feel free to open an issue/submit a PR to correct this text. - [Asynchronous rendering](#asynchronous-rendering) - [Reactiveness](#reactiveness) - [State Management](#state-management) +- [Hooks](#hooks) ## Size @@ -26,9 +27,14 @@ than React and Vue. Also, jQuery is not the same kind of framework, but it is in | ------------------------ | ------------------------ | | OWL | 16kb | | Vue + VueX | 30kb | +| Vue + VueX + Vue Router | 39kb | | React + ReactDOM + Redux | 40kb | | jQuery | 30kb | +Note that those comparisons are not entirely fair, because we do not compare +the same exact set of features. For example, VueX and Vue Router support more +advanced use cases. + ## Class Based Both React and Vue moved away from defining components with classes. They prefer @@ -40,6 +46,17 @@ contrast, Owl has only one mechanism: class-based components. We believe that Ow components are fast enough for all our usecases, and making it as simple as possible for developers is more valuable (for us). +Also, functions or class based components are more than just syntax. Functions +comes with a mindset of composition and class are about inheritance. Clearly, +both of these are important mechanisms for reusing code. Also, one does not +exclude the other. + +It certainly looks like the world of UI frameworks is moving toward composition, +for many very good reasons. Owl is still good at composition (for example, +Owl supports slots, which is the primary mechanism to make generic reusable +components). But it can also use inheritance (and this is very important since +templates can also be inherited with `xpaths` transformations). + ## Tooling/Build step OWL is designed to be easy to use in a standalone way. For various reasons, @@ -50,13 +67,23 @@ be used by simply adding a script tag to a page. ``` -In comparison, React encourages using JSX, -which necessitate a build step, and most Vue applications uses single file -components, which also necessitate a build step. +In comparison, React encourages using JSX, which necessitate a build step, and +most Vue applications uses single file components, which also necessitate a build step. On the flipside, external tooling may make it harder to use in some case, but it also brings a lot of benefits. And React/Vue have both a large ecosystem. +Note that since Owl is not dependant on any external tool nor libraries, it is +very easy to integrate into any build toolchain. Also, since we cannot rely on +additional tools, we made a lot of effort to make the most of the web platform. + +For example, Owl uses the standard `xml` parser that comes with every browser. +Because of that, Owl did not have to write its own template parser. Another +example is the [`xml`](tags.md#xml-tag) tag helper function, which makes use of +native template literals to allow in a natural way to write `xml` templates +directly in the javascript code. This can be easily integrated with editor +plugins to have autocompletion inside the template. + ## Templating OWL uses its own QWeb engine, which compiles templates on the @@ -79,7 +106,8 @@ into javascript functions. Note that Vue has a separate build which includes the template compiler. In contrast, most React applications do not use a templating language, but write -some JSX code, which is precompiled into plain JavaScript by a build step. +some JSX code, which is precompiled into plain JavaScript by a build step. This +example is done with the (kind of outdated) React class system: ```jsx class Clock extends React.Component { @@ -98,6 +126,20 @@ This has the advantage of having the full power of Javascript, but is less structured than a template language. Note that the tooling is quite impressive: there is a syntax highlighter for jsx here on github! +By comparison, here is the equivalent Owl component, written with the +[`xml`](tags.md#xml-tag) tag helper: + +```js +class Clock extends Component { + static template = xml` +
You clicked {count} times
+ +You clicked {count.value} times
+ +