Hacker News new | ask | show | jobs
by modalist 3229 days ago
Hi nherment,

I appreciate your feeedback. To follow up on some of your concerns:

Top-level UI components can have state now:

    class {
      onCreate () {
        this.state = {
          count: 0
        }
      }
      increment () {
        this.state.count++;
      }
    }

    <html>
      <body>
        <div onClick('increment')>Count: ${state.count}</div>
      </body>
    </html>
If Marko's built-in component state management is not sufficient, you can of course use Redux with Marko. Here's a sample app: https://github.com/marko-js-samples/marko-redux.

Marko does not have an "officially" supported router yet, but this is the one we've been pointing people to: https://github.com/charlieduong94/marko-path-router. If I understand your statement correctly, you mean that you would prefer to export the path directly from the component? I agree that this should be supported. Currently, Marko does not support exports, but it's actually on our issues board https://github.com/marko-js/marko/issues/538. We'd like to support the following:

    export var route = '/about';

    class {
      ...
    }

    <div>About!</div>
This actually would be fairly easy to implement, but we've been focusing on other things. I think that we should reprioritize this issue though.

It's definitely true that we have a lot of features that we'd love to focus on and a very small team of engineers working on Marko/Lasso. I welcome you and anyone else to jump in and help if you'd like! Any contributions are extremely appreciated. Additionally, feel free to drop into the Marko Gitter chat with any concerns and we'll try to help https://gitter.im/marko-js/marko.
3 comments
nherment 3226 days ago
I have just been using the state for a top level component.

While it is true that this is now working, updating the state in the component that contains the <lasso-head/> and <lasso-body/> tags will cause the dependencies (defined in browser.json) to be lost. Unfortunately, the stylesheets are included in the dependencies... This means that playing with state at the top level removes any styling on the page.

This is EXACTLY the type of insanity that makes me recommend AGAINST using marko...

Example code here: https://github.com/nherment/marko-css-error

link
pier25 3228 days ago
Something I love about Vue is having official router and state management modules.

You should seriously consider making and maintaining those.

link
nherment 3228 days ago
I am very happy to hear that top level components now support state :) It's a major pain that is now relieved.

For state management, we have built https://github.com/Portchain/markojs-shared-state. The main problem with this solution is that it's a singleton. Being able to have state at the top level will help in allowing us to pass the state manager to children.

Router wise, maybe it should not be a component's responsibility to know their route but rather the parent's ?

Marko already comes with an elegant way of doing conditional forks in the HTML. This is a huge strength of Marko. What is displayed is defined in the template (.marko files). We currently have input and state defining what needs to be displayed. Adding to these two a `route` object and simple state management is made easy.

This is something we'd be very happy to do as we could use it immediately. However it's not urgent because we route server-side*

eg.

  <html>
    <body>
      <if(route.path === '/about' || route.path === '/about/*' /* matches 'http://www.example.com/about and all subpaths' */)>
        <about-content />
      </if>
      <else>
        <home-content />
      </else>
    </body>
  </html>
With each component getting a nested value of the path but also being able to access the whole URL. For example, in about-content.marko:

  <div>
    <!-- get the 'nested' path only -->
    <if(route.path === '/company' /* matches 'http://www.example.com/about/company' */)>
      <div class="company">Lorem ipsum...</div>
    </if>
    <!-- or access the full path -->
    <if(route.fullPath === '/about/career')>
      <div>Get hired !</div>
    </if>
  
    <!-- being fancy now ! -->
    <if(route.path === '/:mySubsection')>
      <div>Get hired ${route.params.mySubsection}!</div>
    </if>
  </div>
```

However, there is probably no need to re-invent the wheel. While I like the idea of embedding routes in the templates, Vue.js approach seem quite sane too: https://vuejs.org/v2/guide/routing.html

link