Why use JSX/TSX with Tabris.js
Tabris.js allows us to write JavaScript code in the standard .js files along with TypeScript in the .ts files. However, if you have ever created a project using Tabris CLI, i.e.
|
1 |
tabris init |
you will notice a template question that offers support for the JSX as well.
|
1 2 3 4 5 6 |
? Template (Use arrow keys) Model-View-ViewModel (TypeScript/JSX) Model-View-Presenter (TypeScript/JSX) Hello World (TypeScript/JSX) > Hello World (JavaScript/JSX) Hello World (JavaScript) |
The JSX is a proprietary extension to the JavaScript/TypeScript syntax that allows mixing code with XML-like declarations. It’s not part of any JavaScript standards and not mandatory for app development, but it can be more pleasing to use depending on your preferences. Tabris.js 3 supports JSX syntax out of the box in .jsx and .tsx files with any TypeScript compiler-based projects.
This blog post doesn’t cover what JSX/TSX is and how it works, but we will briefly mention what makes it preferable over imperative UI.
Let’s start with the snippet below that demonstrates how the code would look like with JSX:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
contentView.append( <Composite stretchX centerY> <Button center onSelect={() => console.log('Tapped!')}>Tap here</Button> <TextView stretchX bottom='prev() 20' font='24px' markupEnabled> Normal Text <b>bold</b> <i>italic</i><br/> <big>big</big><br/> Long Text Long Text Long Text Long Text </TextView> </Composite> ); |
The same snippet but with Imperative UI:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
contentView.append( new Composite({ left: 0, right: 0, centerY: 0 }).append( new Button({ centerX: 0, centerY: 0, text: 'Tap here' }) .onSelect(() => console.log('Tapped!')), new TextView({ left: 0, right: 0, bottom: 'prev() 20', font: '24px', markupEnabled: true, text: 'Normal Text <b>bold</b> <i>italic</i><br/>\ <big>big</big><br/>\ Long Text Long Text Long Text Long Text' }) ) ); |
Even for small snippets, it is easy to see how much nicer it is to read the JSX over the imperative syntax. You can imagine how annoying the code would get if you wanted a bunch of nested elements as you would create other components inside the append() function.
Apart from that, there are plenty of reasons that takes JSX several steps forward:
- JSX is more powerful and flexible option that defines application UI in a more compact and expressive way than using exclusively imperative code.
- Using the syntax, you can quickly design UI layouts and the view components they contain, in the same way, you create web pages in HTML with a series of nested elements.
- It supports the LayoutData shorthands.
- It declares a long string or inline-markups perfectly across multiple lines in enclosing tags, without any other techniques such as escape character backslash or splitting the string.
- It supports data binding when used with @component.
- Since the XML has the benefit of balanced opening and closing tags, this helps make large trees easier to read than function calls or object literals.
- It is more familiar for casual developers such as designers.
Overall, JSX/TSX is one of the greatest features that not only make Tabris.js easy to develop but also fun. Just use it and you will be happy you did.
I hope this short blog post will be useful in your JSX/TSX journey.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
