Request about state router about abstract-state-router

[TehShrike]

1. You'll have to be a bit more specific about "supporting good practice", but I believe the answer is "yes". URL routing works very similarly to how ui-router's does.

2. If I understand it correctly, then yes, you can create setups like that.

   I also have an app that has a completely different interface for mobile versus desktop. In that case, I have different top level states, say mobile and desktop. You can make whatever child states you want. If you go this way, and you're at the state desktop.account.profile and you navigate to the state mobile.login, every level of the UI would change.

   You could do browser detection yourself like this in your app's on-document-ready code:

   var browser = require('detect-browser')
   if (browser.name === 'ios' || browser.name === 'android') {
       stateRouter.evaluateCurrentRoute('mobile.login')
   } else {
       stateRouter.evaluateCurrentRoute('desktop.login')
   }

3. The closest thing to a state view controller in abstract-state-router is the activate function you can supply, which is called when the states are activated. It is passed the DOM API (whatever rendering/templating library you chose) as well as other context about the newly activated state.

   Like ui-router, anything you load in the resolve function is passed to your templating library of choice.

   When it comes to controllers or directives, that is outside of the scope of abstract-state-router. You pick your own templating/rendering library. Ractive.js and Riot are both solid popular choices.

   abstract-state-router brings the power of ui-router, but without overriding your choice of front-end templating or DOM manipulation. If there is some other library you prefer (like React or even yo-yo), you can use it with abstract-state-router.

Do you have any specific questions? I would recommend reading over the API documentation (it's not too long) and checking out the source code of some of the example todo apps to see how the abstract-state-router can be used with different templating libraries.

[Gavarni]

Hey TehStrike,

Thank you for yoru fast reply.

1. i geuss its ok then :)
2. if thats possible then i want to use this state-router
3. Im not familiar with template/rendering libraries.

The thing is this. I want to create an app. At the moment i want to focus just on the UI. Someone else will do the backend for me. For that app i want a simple easy to implement js (include into html) state router where i can just put the html parts into a main app html file based on a html tree as we discussed in point 2.

So my ideal situation is

1. create a html file include the router js => abstract-state-router.js.
2. then write the javascript with the states =>
   init = app.html
   root-state 1 = default.html
   substate = default/about.html
   root-state 2 = login.html

and voila it would work. My problem with all the new JS i see online there are 1000 other things i have to do to get something to work which eventually leads to all needlessly long learning curves.

I downloaded the zip for the abstract state router but it doenst tell me how i should implement this step by step for my project. this is what is for me lead to complexity. That does not mean that what your doing is wrong but my experience with javascript on this lvl is maybe a bit too complicated.

I read through most of the readme of git then i see i need browserify so i go check some tutorials on that nice but then i when i try to look at a riot example i dont see this abstract-state-router anywhere in that riotjs implementation.

Few question on which i will decide on what to do

1. Can or IS abstract-state-router only intended to be used in combination with other libraries/framework? Could you make an app and have sbstract router on itself?

2. could you make an starter app that handles all requirements i have i believe this is such a used setup that it should be standardized.

Kind Regards

Gavarni

ps: m still trying to get my head around this things so ill keep on watching tutorials and videos on riotjs and the implementations you showcase with sbstract router

[TehShrike]

Frameworks

abstract-state-router is not a framework. I agree with Peteris Krumins that frameworks don't make sense for developers who want to build an application.

abstract-state-router is a library that is meant to be used with other libraries. There are many, many options for turning a template into HTML for the browser, and I don't want to tie this useful webapp routing to one of them.

I don't actually know what gets packaged up in the zip file, but it's probably not useful. abstract-state-router is mean to be installed from npm, though you can download the compiled version from wzrd.in as well. In either case, you'll want to use it with one of the renderers that act as a go-between for this library and your rendering/templating library of choice.

Starter apps

"Starter app" usually implies a complicated build system that someone else made that you won't ever look at, even though there are lots of things about it that you might not like that much. For getting-off-the-ground projects like the one you're starting, I prefer to use npm run scripts.

You could consider the state-router-example repository to be a starter app, though - if you clone it locally and run npm install, you can run the build/development scripts for any of the different implementations. You can edit any of the HTML files and see which templating system you prefer.

You can also look at the package.json file to see what all of the npm run scripts are doing (which isn't much, they mostly just call browserify/watchify).

fin

I'm not interested in tying myself or anyone else to a frameworkey development ecosystem, so you should be able to use abstract-state-router with Grunt and Rollup as easily as npm run scripts and Browserify. If you learn to use those tools, and find you prefer them, you can switch over to them, and the abstract-state-router shouldn't get in your way.

Out of curiosity, how did you find out about this library?

[TehShrike]

@Gavarni - you may be interested in https://github.com/TehShrike/simplest-abstract-state-router-usage, an example of using the state router without any build steps or other dependencies. It uses Ractive for html templating, but you could easily switch it out for Riot or anything else you prefer.

[Gavarni]

Hey TehStrike sorry for my late reply i was in germany.

I also agree on the framework part which is why i dont want to use angular1 or 2. im not really familiar with renderes. If you mean template engine like scala in the java world. Then thats not what im really looking for. What i basically need is a simple standalone sorta router with a few lines that can dynamically load JS for me into a div or custom tag and that i can build my app in a modular way.

For a starter app i didnt actually mean comlicated but a simple example with just bareminimal code to show how the router works so that you can take the essential code parts and make your own.

I came on your router through searching the web i was looking for simpeler solutions without an entire framework. and used names like state-router in my search query

[Gavarni]

I just cloned the example you linked to me

Very clear and to the point :). Ill use this as an starting point for building my app. The moment im about to launch my app if im at that point ill offcourse add all credit for the routing to your state router.

The only part im going to have to figure out is the how the top states work.

I asume i declare on this part the top state

var stateRouter1 = abstractStateRouter(ractiveStateRenderer, '#app-content'), var stateRouter2 = abstractStateRouter(ractiveStateRenderer, '#app-content')

[TehShrike]

You only need one state router - you should only call abstractStateRouter once.

You add more states by calling stateRouter.addState.

Top-level states are just state names without any periods in them. State a would be a top-level state. a.b would be a b state that was a child of the a state. a.c would be another state that was a child of a. But if you added a state named x, it would be another top-level state, a sibling of a. Then you could add x.y and x.z, which would be children of this other top-level state x.

In that "simplest-abstract-state-router-usage" example, the renderer I hooked up allows you to render Ractive templates. You can see some of the mustache templating in action on the lines with the curly-braces. Eventually, you'll need to know more about those - you can find that documentation here.

[TehShrike]

If you have any other questions, feel free to ask!