Live data from Hacker News

Vue.js: the good, the meh, and the ugly

medium.com

151–160 of 382 posts

Re: Vue.js: the good, the meh, and the ugly

#151
post #129

Earlier quoted context omitted.

Redux is not over-engineered. It's a simple library that's <1000 lines of code. It is great for large, complex apps where state gets hairy to manage. It's a bit verbose for smaller apps. But just because something is verbose does not mean it's over-engineered. It is explicit in defining all the possible states your application can get in. That's useful for a certain class of application.

It might have been more accurate for me to have said "the code you will get if you follow the reference implementations and documentation of Redux will be overengineered". I dislike three things: that dispatch isn't usually made globally available, but is passed through context, which makes it effectively global anyway; that asynchronous actions are only available via plugins despite being a core part of JS developme…

Hi, I'm a Redux maintainer, and I'd like to clarify a few things.

First, your points about `dispatch` and `context` are specifically about the React-Redux bindings, not the Redux core itself. React-Redux is specifically intended to act as an abstraction layer so that your own components are "unaware" of Redux, which keeps them more reusable and more testable. It also saves you from needing to write store subscription handling every time you want to make use of data from the store. My "Redux Fundamentals" workshop slides [0] show examples of what it would look like to hand-write store subscription code all throughout your UI, and it would be a pain.

If you _really_ want to, there's nothing stopping you from importing the store globally across your application and using it, but that misses out on the benefits of React-Redux, and also ties you to that one specific store instance.

Second, you can absolutely do async logic without any middleware. However, one of the key design points of Redux was to allow users to choose which approach they want to use to handle async logic, without limiting users to whatever was built in to the core. I discussed this in my "Redux Ecosystem" talk at ReactBoston last year [1].

You can certainly do async logic without any special middleware - just `connect()(MyComponent)`, throw in a `setTimeout`, and call `this.props.dispatch()`. The point of `redux-thunk`, the most common async middleware, is that it provides a generic way to move async logic outside of your UI and make it reusable [2].

Finally, the "dispatching an action === calling a function" comparison can be true, but only if you're using Redux with a limited mental approach and treating actions like "setters". If you start thinking about actions as more of an "event that occurred", then that leads to having multiple parts of your reducer logic independently respond to the same action and update their own pieces of state (which is an encouraged usage pattern). Justin Falcone had some good thoughts on this a while back [3], and I talked about this some in a fewmore of my blog posts [4] [5] [6].

[0] https://blog.isquaredsoftware.com/2018/06/redux-fundamentals...

[1] https://blog.isquaredsoftware.com/2017/09/presentation-might...

[2] https://blog.isquaredsoftware.com/presentations/workshops/re...

[3] https://medium.freecodecamp.org/whats-so-great-about-redux-a...

[4] https://blog.isquaredsoftware.com/2017/01/idiomatic-redux-th...

[5] https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-ta...

[6] https://blog.isquaredsoftware.com/2017/01/practical-redux-pa...

Re: Vue.js: the good, the meh, and the ugly

#152
post #106

Earlier quoted context omitted.

Well because the UI isn't just a function of state, it's also a function of those actions (the actions have to literally be passed in to the rendering function). So there's bi-directional coupling between the UI code and the Store (the UI code renders from the state, and passes messages back to the store). Also, conceptually, you often have a lot of state that's very directly concerned with and specific to the UI, an…

I've seen this idea a lot from members of my team that when you use a state management library then absolutely everything has to go through that state management library. This results in some of that pain you describe with state that's specific to the UI. If you're still working with React, try keeping that menu or input state in the component with setState instead of putting it in the global state store. I've found…

Yep, this is exactly why the Redux FAQ has a section with rules of thumb for deciding whether a particular value should go in Redux or not:

https://redux.js.org/faq/organizing-state#do-i-have-to-put-a...

Re: Vue.js: the good, the meh, and the ugly

#153
>Will a state manager start mediating all application logic now?

The author refers to the shopping cart sample -- which is exactly what I used as a blueprint. I think that's acceptable that the design pattern suggestion is coming from the store layer vs. the template layer (who is focused on the UI/UX).

Re: Vue.js: the good, the meh, and the ugly

#154
post #56

I really like a lot of things about Vue. I was apprehensive about using JSX when I first started using React, and I also did not like setState. I think the real issue, though, was that I wasn't thinking functionally. I now rarely write a stateful component, and when I do, it's usually once, for the entire application, or maybe for a few large subtrees if the app is very large. State kept alive by parameters is extrem…

It saddens me that JSX became so popular in the React community. I find the syntax verbose and hard to read ... similar to HTML. At my last company we used `react-hyperscript` which was a simple wrapper around `react.createElement`. Ultimately, the React developers made the mistake of making `createElement` so annoying to work with, I assume because they bought into JSX. Granted, JSX might have been necessary when Re…

Last times I used hyperscript I just got lost in the sea of parens, brackets, and braces. Never had a problem with cl-who though, so don't really know what that's about.

Re: Vue.js: the good, the meh, and the ugly

#155

Earlier quoted context omitted.

For one: vue, vuex (centralized state library) and vue-router are stewarted by roughly the same people, which has a few benefits. The documentation is all pretty decent and uniform. I never sit for very long wondering how to do something. Changes that break backwards compatibility are reflected across all three at the same time, and the correct versions are installed by vue-cli. I had several starts with react, react…

I think the issue is that people keep expecting something from React that React has specifically stated it does not do, which is handle everything. It's always been a library, not a framework, to give people to freedom of choice to choose or omit other libraries or frameworks. I remember working on Angular 1 projects, where literally everything from loops to http calls was mandated by the framework. Then everything s…

> I think the issue is that people keep expecting something from React that React has specifically stated it does not do, which is handle everything.

You can't really have it both ways though: if you're going to say React doesn't do all those things then you have to accept that people who want something more streamlined and comprehensive should legitimately look somewhere else, and React is only for people who want to spend the time assembling their own solution (for some acknowledged benefits). Vue has taken the more comprehensive approach while still being pretty flexible, and therefore suits a slightly different (but I would argue, broader) set of people.

Re: Vue.js: the good, the meh, and the ugly

#156
post #25

Earlier quoted context omitted.

For me (Vue + Vuex) the choice was simple: you get undo for free. Having a shared store really does change the way you look at web apps - it's almost a completely different paradigm. If you can avoid re-loading the data for a view if you already have it then then opening a new view to edit a subset of the data instead of dealing with popup makes life so much easier - you get a lot more freedom with the UX and going b…

You can have undo for free using React as well. React doesn't care about how you manage your state changes, and it will selectively render only the parts of your app that changed.

Not to mention, I believe time travel is an officially supported functionality for redux, if you choose to use that.

Re: Vue.js: the good, the meh, and the ugly

#157
post #147

Earlier quoted context omitted.

Okay - that makes sense. It's been a while since I looked at things like this but have you done simple stuff like check whether the colour contrast ratio [0] meets WCAG standards? What about making the orange highlight work when tabbing through the website with the keyboard? What about having a Skip Navigation / Skip to Content link? [1] 0: https://webaim.org/resources/contrastchecker/ 1: https://webaim.org/technique…

Yes I keep those things in mind while developing. I may have missed one here or there, especially in any code from my early days of development. Thanks for the link about "skipnav" I haven't heard that term before. I don't really see how that can fit in, though? I guess the category links right at the top of the page is the closest concept? It doesn't make sense to skip down to item number 200 since there's no way to…

It's exactly to skip to the main block of content - every item in the nav menu may be read out individually (or at least needs to be tabbed through) otherwise.

Re: Vue.js: the good, the meh, and the ugly

#158
post #147

Earlier quoted context omitted.

Yes I keep those things in mind while developing. I may have missed one here or there, especially in any code from my early days of development. Thanks for the link about "skipnav" I haven't heard that term before. I don't really see how that can fit in, though? I guess the category links right at the top of the page is the closest concept? It doesn't make sense to skip down to item number 200 since there's no way to…

It's exactly to skip to the main block of content - every item in the nav menu may be read out individually (or at least needs to be tabbed through) otherwise.

Oh I understand now. It's skipping the menu itself. I don't know why I misread (skimmed) the link you posted. Yeah, I can see why that's useful. I'll add it to my to-do list to look more into that. Thanks!

Re: Vue.js: the good, the meh, and the ugly

#159
post #135

Earlier quoted context omitted.

Hi voltagex, thank you for your input. I don't think this is the kind of website where I "help someone to use it". Instead of speaking in the abstract I may as well show you so you can see what I mean: https://pricehipster.com As you can see, the whole point of it is designed around quickly glancing at prices. And I don't think it makes sense to tell people other places they can find prices if they can't see well eno…

Okay - that makes sense. It's been a while since I looked at things like this but have you done simple stuff like check whether the colour contrast ratio [0] meets WCAG standards? What about making the orange highlight work when tabbing through the website with the keyboard? What about having a Skip Navigation / Skip to Content link? [1] 0: https://webaim.org/resources/contrastchecker/ 1: https://webaim.org/technique…

I find their recommendation skipnav somewhat ironic - pages on that site with any sizable contents don't show any actual content until after the fold on my macbook, e.g. https://webaim.org/techniques/css/invisiblecontent/ .. the entire first page consists of various forms of navigation.

Re: Vue.js: the good, the meh, and the ugly

#160
My problem with current gen frameworks is composition and modularity with components. Making components stateless and having all data come in as props from parents is good for modularity but how do you pass data back to the parent? This is where the modularity becomes awkward.

I know of two ways in vue to do this and both ways either completely break or make modularity awkward. The first way is to signal the parent with emit. This ties the parent object to a signal and if you want to pass info even further up past the direct parent you have to have components explicitly pass that signal up. While this doesnt break modularity it absolutely makes it awkward.

The second way is to use vuex as a global. This breaks modularity by immediately tying the component to a global. Vuex makes things easy but breaks modularity completely as soon as a component refrences vuex.

I understand why things were done this way. Essentially it's done to prevent a certain class of endless looping bugs but there has got to be a better way.

Post reply on HN