-
Welcome to B4X forum!
B4X is a set of simple and powerful cross platform RAD tools:
- B4A (free) - Android development
- B4J (free) - Desktop and Server development
- B4i - iOS development
- B4R (free) - Arduino, ESP8266 and ESP32 development
B4J Question [BANano] Can one create and use ES Modules?
- Thread starter Mashiane
- Start date
- Similar Threads Similar Threads
You can not create ES6 modules (BANano generates for B4J, not for other tools), but you can still use existing ones. It does require however good knowledge of ES6 modules and how every one of them works. You are often much better off just using the umd version if available.
You must understand that CustomViews ARE B4Js answer to Reusable Web Components. With the help of BANanoElement and BANanoObject you already create all kind of Reusable Web Components within B4J. Just as B4J does not support class inheritance, I don't feel limited by it because of that. Same goes for Custom Html Tags: they are nice for someone who needs to write in pure Javascript/html the whole day, but as you are well aware with your own libraries, with B4J we can make it MUCH easier (and faster to program for the end user!) without those 'tricks'.
In B4J, such html tags would only be a wrap of a wrap of wrap... but at the end you still need normal B4J getters/setters/methods/events for the end user to be able to work with them.
Attached is a simple example of using ES6 modules
You must understand that CustomViews ARE B4Js answer to Reusable Web Components. With the help of BANanoElement and BANanoObject you already create all kind of Reusable Web Components within B4J. Just as B4J does not support class inheritance, I don't feel limited by it because of that. Same goes for Custom Html Tags: they are nice for someone who needs to write in pure Javascript/html the whole day, but as you are well aware with your own libraries, with B4J we can make it MUCH easier (and faster to program for the end user!) without those 'tricks'.
In B4J, such html tags would only be a wrap of a wrap of wrap... but at the end you still need normal B4J getters/setters/methods/events for the end user to be able to work with them.Attached is a simple example of using ES6 modules
Upvote
0
Thanks for the example, let me check this out.You can not create ES6 modules (BANano generates for B4J, not for other tools), but you can still use existing ones. It does require however good knowledge of ES6 modules and how every one of them works. You are often much better off just using the umd version if available.
You must understand that CustomViews ARE B4Js answer to Reusable Web Components. With the help of BANanoElement and BANanoObject you already create all kind of Reusable Web Components within B4J. Just as B4J does not support class inheritance, I don't feel limited by it because of that. Same goes for Custom Html Tags: they are nice for someone who needs to write in pure Javascript/html the whole day, but as you are well aware with your own libraries, with B4J we can make it MUCH easier (and faster to program for the end user!) without those 'tricks'.
Attached is a simple example of using ES6 modules
B4X:
BANano.TranspilerOptions.DoNotTranspileForOldBrowsers = TrueYour lib is way ahead, will have to comment this part out.
Upvote
0
@alwaysbusy
Thanks for the clarity also. I think one of the difficult things is whilst we think abstract designer for creating the UIs and other things. Its the thinking out of the box at times that is a hurdle. One needs to interpret javascript code they see and be able to write it the BANano way. i.e thinking out of the box.
For example, I have a potential client who wants to use lemonade.js. So I have to study how the whole thing works. My problem is wrapping my head around this code and doing it the BANano way.
This first use case is close to how my mind works. Yet for all I cant figure out how I can do it the BANano way. If for example you have any advice, it could help, otherwise will have to try and convince the potential client that we try something else as the tools I have cannot address these kind of real world cases.
[/LIST]
Use Case 1
[/LIST]
Use Case 2
[/LIST]
Use Case 3
[/LIST]
Thanks in advance.
Thanks for the clarity also. I think one of the difficult things is whilst we think abstract designer for creating the UIs and other things. Its the thinking out of the box at times that is a hurdle. One needs to interpret javascript code they see and be able to write it the BANano way. i.e thinking out of the box.
For example, I have a potential client who wants to use lemonade.js. So I have to study how the whole thing works. My problem is wrapping my head around this code and doing it the BANano way.
This first use case is close to how my mind works. Yet for all I cant figure out how I can do it the BANano way. If for example you have any advice, it could help, otherwise will have to try and convince the potential client that we try something else as the tools I have cannot address these kind of real world cases.
B4X:
<html>
[LIST=1]
[*]<script src="https://lemonadejs.net/lemonade.js"></script>
[*]<div id='root'></div>
[*]<script>
[*]// Template is based on the caller innerHTML
[*]function Crypto(template) {
[*] // this received title from the caller
[*] const self = this;
[*] // Create the component
[*] return template;
[*]}
[*]
[*]function Component() {
[*] let self = this
[*]
[*] // The innerHTML of Crypto is the template for the component
[*] return `<>
[*] <h3>Example</h3>
[*] <Crypto title="Bitcoin">
[*] <b>Coin: {{self.title}}</b>
[*] </Crypto>
[*] </>`;
[*]}
[*]// Register custom tags
[*]lemonade.setComponents({ Crypto });
[*]// Render the component
[*]lemonade.render(Component, document.getElementById('root'));
[*]</script>
[*]</html>Use Case 1
B4X:
[LIST=1]
[*]<html>
[*]<script src="https://lemonadejs.net/lemonade.js"></script>
[*]<div id='root'></div>
[*]<script>
[*]class Counter extends lemonade.component {
[*] constructor(self) {
[*] super(self);
[*] this.count = 1;
[*] }
[*]
[*] counter() {
[*] this.count++;
[*] }
[*]
[*] render() {
[*] return `<>
[*] <div>Counter: {{self.count}}</div><br>
[*] <input type='button' onclick="self.counter()" value='Go' />
[*] <input type='button' onclick="self.count = 0" value='Reset' />
[*] </>`;
[*] }
[*]}
[*]lemonade.render(Counter, document.getElementById('root'));
[*]</script>
[*]</html>Use Case 2
B4X:
[LIST=1]
[*]<hello-element title="Hello world" />
[/LIST]
[LIST=1]
[*]<script>
[*]class HelloElement extends HTMLElement {
[*] constructor() {
[*] super();
[*] }
[*]
[*] render() {
[*] const self = this;
[*] return `<>
[*] <h1>{{self.title}}</h1>
[*] <input type="button" value="setTitle()"
[*] onclick="self.title = 'Test'" />
[*] </>`;
[*] }
[*]
[*] connectedCallback() {
[*] lemonade.render(this.render, this, this);
[*] }
[*]}
[*]
[*]window.customElements.define('hello-element', HelloElement);
[*]</script>Use Case 3
B4X:
[LIST=1]
[*]<html>
[*]<script src="https://lemonadejs.net/lemonade.js"></script>
[*]<div id='root'></div>
[*]<script>
[*]function Hello() {
[*] // Get the attributes from the tag
[*] const self = this;
[*] // Title and year are declared in the parent template
[*] return `<h1>{{self.title}} {{self.year}}</h1>`;
[*]}
[*]
[*]function Component() {
[*] const self = this;
[*] self.value = '2023';
[*] // title and year will be available inside Hello through (this)
[*] return `<>
[*] <Hello title="Hello" year="{{self.value}}" />
[*] <input type="button" value="Next"
[*] onclick="self.value++" />
[*] </>`;
[*]}
[*]// Register custom tags
[*]lemonade.setComponents({ Hello });
[*]// Render the component
[*]lemonade.render(Component, document.getElementById('root'));
[*]</script>
[*]</html>Thanks in advance.
Upvote
0
I had a quick look at this library, and honestly, if you are forced to use it by the client, you are probably way better off just using it directly and not via B4J/BANano. The way you use it is far off from how things are done in B4J/BANano. The end result after transpiling would probably work, but be ugly and not satisfy the client if he wants to make changes later to the code.
Upvote
0
Similar Threads
- Question
- Question
- Question
