google / uniflow-polymer Goto Github PK

I often do Polymer courses, workshops and mentoring, both to students and to professional developers, and I've found that most of my students like to use the Polymer Starter Kit as a base in order to build their applications, instead of beginning with an empty project.

I think that having an uniflow based version of the Starter Kit app, with the different elements already in place, would be a great way to introduce the uniflow pattern to Polymer developers.

I had thought about doing it myself, and maybe write an article on it, if it doesn't bother you and if you think it's a good idea.

Hello militeev,

again me, surprise ....

I just stumbled over https://github.com/tur-nr/polymer-redux and just would like to know where you see the difference between your project and PolymerRedux.

As I'm not very advanced in JS, Polymer and co., so I've to ask this to classify both projects and their advantages/disadvantages for me.

Thank you!

Regards,
Michael

Hi!

After having played a bit with UniFlow, I would like to use it in one of my apps, instead of a similar(-ish) home made redux-like setup. But in order to use it, I'd like to make the reference in my bower.json to point to a defined version, not to the head of the repository.

Would it be possible to put a tag and declare it as an initial version?

Hello militeev,

thank you for your work on UniFlow.

But until now, it's hard for me to understand how all this will and should work together in an application. So may it be possible for you to create a sample application which demonstrates how UniFlow is intended to be used?

Regards,
Michael

I have a current solution based on optimizely/nuclear-js and heavily borrowed from home-assistant/home-assistant-js. It is similar in that there is a stateBehavior (the only behavior). Properties are defined with a bindState value that is a nuclear-js getter (function that returns the specified state). A simple example is

properties: {
  isAdmin: {
    type: Boolean,
    bindState: MyApp.authGetters.isAdmin,
  }
}

It is notified of changes and actions dispatched are used to update the state, just like uniflow. When saving a form we call an action which returns a promise. We can then wait for the response from the server and only leave the screen if successful, showing validation errors if necessary.

save: function() {
  if (this.$.form.validate()) {
    MyApp.userActions.saveUser(this.data).then(() => { 
        this.fire('user-save-clicked', this.user);
    });
  };
},

The MyApp.userActions.saveUser calls the backend server API to actually send the data and return any additional validation errors such as a non unique username error. It also updates other state such as the errorMessage to display on this screen. If the server returns an error, a Javascript error is thrown and the 'user-save-clicked' event is not fired. On success it is fired and an upstream component handles routing changes.

Where in uniflow should the calls to the server be put? I really like the ModelView validation method but where would it integrate with sending the data to the server and handling errors returned from the server? How would you wait to make sure it was successful before routing to a new screen?

I've reviewed the ToDoMVC app but of course it is only updating local state and not integrating with a server backend.

Hello militeev,

is it possible to use UniFlow with "polymer build"?

When doing so, my own app is crashing when calling the build version in the browser (says "this.emitAction is unknown"). In development mode with "polymer serve", UniFlow works like a charm with my app. So it's the "polymer build" which "breaks" it.

And building your sample todomvc app with "polymer build" isn't working at all, the building itself crashes.

Any ideas?

Regards,
Michael

Any thoughts on making the async action dispatcher?

I am trying out uniflow for one of my projects and it is wonderful. But there is no support for async actions.

I made some changes to the dispatcher by wrapping the return of the dispatch with a Promise.resolve and chaining the them rather than iterate.

Any thoughts? If you r cool, I can make a pull request.

Any plans to support Polymer 2.0, either via hybrid-mode or directly?

My app component contains my UniFlow dispatchers. It also contains my <app-location> and some of my <app-route> components. In Where to call server API, #1, we determined that we could emit a save action from a page such as a Profile Edit page. Some dispatcher would take care of calling the back end server API to save the data and emit its own action for success or failure. Another dispatcher (or the same) would receive the success action and handle routing.

How do you suggest setting that up? Would you pass the route into the dispatcher and put an <app-route> component in the dispatcher to be manipulated?

<my-app-dispatcher state="{{state}}" route="{{route}}"></my-app-dispatcher>

Then in <my-app-dispatcher> have a <app-route route="{{route}}"> in the template section so that it can be manipulated in the action methods that need to handle routing?

(I'll try this myself but) Can an observer be used to watch a specific portion of the state tree? For my application, my main app needs to know when the user is logged in or not and route to either the login screen or, depending on the logged in user's roles, a specific page. Can I use a simple

observers: [
  'onLoggedIn(state.auth.user.token)'
]

Is that the best method to listen to different branches of the state tree? In a lot of cases the state-path will be a section of the tree specific to the page but the page will still need access to other sections of the tree such as the current user's information.

When I'm using UniFlowvia bower (bower install --save polymer-uniflow-a), Chrome gives me errors like "Uncaught ReferenceError: UniFlow is not defined at action-emitter.html:22".

When I download UniFlow from the website as a zip and put it manually in bower_components, everything is fine.

Is there any difference between the download version and the version supplied via bower?

Just starting to look at uniflow. Looks interesting. We are currently using Polymer-Redux in our app but interested in comparing it with alternative approaches.

One area we struggle with is building UI components that can manage their own state and actions and then just be dropped into an existing app which may also be using Redux. There are solutions in the Redux world, but I have not really got to grips with them yet, so we're still using the default approach of a single application level state atom that all our components tie into.

I'm sure I could answer this question myself after I've spent some time digging into uniflow a bit more, but just wondering if that is something that you considered with uniflow.

I'm trying to access state in javascript, all the examples I can find for state-aware show accessing state in the template. I can access this.stateAware and this.statePath ok but not the state itself. I'm using the latest 0.6.0 release.

What I'm trying to do is store some application level state to be used for many pages (the HATEOS route of my api which is pulled from the server) so I wanted to store it in state and access it using state-aware without passing it down through the element hierarchy. Is what I'm doing sensible or is there a better way, maybe the application object that I don't really understand what it's for?

Thanks for the help in advance, great project if I can work out how to use it properly.

Hi, Polymer 3 is set to be released and I wanted to know if there was any chance this repo was going to be updated to use it or can it be used with Polymer 3 already as it stands?

Do you plan update UniFlow to Polymer 2.0?