Live data from Hacker News

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

medium.com

301–310 of 382 posts

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

#301
post #70

One particular weak point of Vue is it's dependency on build tools. I spend a few days buiding a great app, and then another few days on getting the build apps configured right with Vue. You google from one error message to another, where each message is unclear and no relation to any build tool/plugin/library/script is made. I really like Vue for the many great strong points it offers. But I'm equally ready to compl…

Version with debug enabled: Production version: If you need something more complex, vue-cli has webpack inbuilt: vue init webpack my-project cd my-project npm install npm run dev Or if you need webpack, but not the complexity, swap the word 'webpack' in the above command to 'webpack-simple'. ... Vue has already done the hard work of getting the build apps configured for you.

I don't follow. How to use Vue's single-file component if you only load Vue from a script tag? And can I use Brunch instead of Webpack if I want to use single-file components?

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

#302

Earlier quoted context omitted.

Could you recommend two or three non-chat based communities? I'm just starting to try Vue and the first handful of tutorials I've tried simply don't work as described.

I'm always interested when people say that tutorials don't work - I had a site planned called wrongtutorial.com but I couldn't work out how to make it funny/informative without being demeaning. What tutorial are you using? How old is it? What didn't work?

From my notes, these two don't work when followed exactly:

https://www.adcisolutions.com/knowledge/how-build-single-pag... https://codeburst.io/full-stack-single-page-application-with...

The first one doesn't build, if I remember correctly, and the second doesn't display anything after about the halfway point. I'm running them on MacOS.

I tried a couple of others with similar issues, but didn't save the URLs.

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

#303
post #96
post #81

Earlier quoted context omitted.

excuse me if i'm wrong, but isn't it just a snippet for react.createElement?

react-hyperscript seems to also parse class names ('div.example'), ids ('h1#heading') and come with other goodies. Looks pretty interesting, and I appreciate they doing away with the need of a pre-processor ¯\_(ツ)_/¯

I looked through the code and it's about 40 lines long. I don't mind of people using small libraries like this, but it's a bit fun to see it presented as some kind of revelation :)

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

#304
post #197

Earlier quoted context omitted.

Yeah, for a while it seemed like there was a new Redux side effects lib coming out every week. At this point, though, it's pretty much standardized on thunks for basic use cases, and either sagas or observables for more advanced use cases based on your preference of writing async logic. > What I've taken to doing is exporting a dispatch function that calls the store's dispatch, not the store. Not sure I follow that t…

> Not sure I follow that train of thought - could you point to an example? Something like const store = createStore(...) export const dispatch = (action) => store.dispatch(action) It removes the temptation to read directly from the store. > `redux` and `react-redux` are deliberately separate packages Yeah, my bad, got the import wrong. > ...limits the reusability of your logic... When would this become a problem, in…

Sure. I'll toss in a few more thoughts here in response.

Your `dispatch` snippet could be simplified to just `const {dispatch} = store`, because the store isn't a class instance - it's a closure. However, I'm not sure why you'd feel a need to "remove the temptation to read directly from the store". In what scenario are you trying to dispatch actions (presumably from the UI), but not read any data?

A basic example of reusability is the unit testing scenario itself. Ideally, you want to minimize the amount of other app code that's getting pulled in, so you can test this one piece in isolation. A React component shouldn't "know" about a store at all - it should just be getting data and functions as props. Similarly, even async logic _should_ be testable in reasonable isolation. If you are directly importing a singleton store instance throughout the entire app, you're coupling all of your logic to that one instance.

Typical testing of store-related logic involves the `redux-mock-store` package, which is just similar enough to a real store to let code run, but records which actions have been dispatched. Similarly, if you do want to test a Redux-connected component and its pieces all together, you would normally provide a unique store or mock store instance there in the unit test - you don't want to drag in the rest of your codebase to test that one piece. (And sure, Jest has some pretty good mocking abilities, but not everyone's using Jest.) I've got some slides on standard Redux unit testing practices [0], and a large section on testing in my React/Redux links list [1].

Outside of testing, yes, reuse of React+Redux across multiple platforms is viable, as is sharing code in libraries. But, again, that only works if the store is effectively dependency-injected at runtime, and that's the point of how things like `connect()`, thunks, and sagas are set up.

I agree that a separate "starter" package isn't the same as putting that all in the core, but that's kind of the point. The starter kit depends on several other packages (`redux-thunk`, `immer`, `selectorator`, etc), while the core Redux library is tiny and standalone. The intent has always been to keep the core small, and let people build pieces on top of it. So, for this package, the specific goal is to help simplify the most common use cases and concerns I've seen, while still avoiding dictating the rest of their app design.

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

[1] https://github.com/markerikson/react-redux-links/blob/master...

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

#305

Earlier quoted context omitted.

You're talking about Redux, not React. Your website would have probably been fine with just React. React gives you the choice to avoid needless frameworks and choose the level of abstraction that best fits your project.

Nope, I'm talking about react. I'm aware redux is just another step in the "level of abstraction you may want to use". And the problem is that every level you want is a challenge to get started with in React. For example, JSX is an abstraction level I'd like to use. It requires an npm install to set up to contribute to production code. It has already crossed the threshold of an easy on-ramp for say, an intern -- beca…

Your interns take a week to install npm? Good lord.

Sorry, in your last post you specifically mentioned only terms that apply to Redux. React has no concept of actions, reducers, etc.

If you read my top comment I specifically talk about React’s function component, which is the least verbose way to describe an interface across any framework. Unless you can think of something easier than (props) => {props.name}

Honestly you just need new interns.

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

#306

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…

If plain, idiomatic React so great, why does every semi-complex React app end up bringing in a separate state management framework like Redux or MobX? The reason is that while you may be able to break up your HTML into a composable hierarchy of purely-functional components, the actual data and state you need to distribute to them has a structure that is completely unrelated to how its laid out in the DOM. In a comple…

if walking is so great, why does every semi-long distance end up requiring a car or bicycle?

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

#307
post #56

Earlier quoted context omitted.

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…

If you care about compile-time checking (you would, if you work on medium to large applications) then JSX (or the TypeScript variant, TSX) is much better because it catches invalid or mistyped attribute names etc.

Looking at the sample in the usage section, I don't see why you could not just write a declaration file that would catch wrong attributes and so on.

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

#308

Earlier quoted context omitted.

Could you provide a source for the maintainers of redux-form admitting that Redux was a poor fit for forms? I'm inclined to agree and am kind of interested to see their reasons.

Yep, sorry I should have included the reference. This post is by the redux-form creator, in which he states why it was a bad idea, and announces its 'spiritual successor': https://codeburst.io/final-form-the-road-to-the-checkered-fl... > Also, everyone high up in the React community, including both inventors of Redux [1], say that Redux is not the best place to keep form data. Oops. [1] https://github.com/reactjs/red…

Now, it _does_ depend on your use case.

An isolated login form? Yeah, no point keeping that in Redux - it's not being shared, it's not being persisted, there's no real need to track the history of changes. But, there are certainly situations where you might want to keep some form data in Redux.

As a specific example from my own app: we show some polylines on a 3D globe, and allow the user to edit them. We need to be able to live-update the point locations and labels on the globe as the user edits them, allow resetting edits, and still be able to show the original values elsewhere in the UI. Keeping all that data in Redux makes it easy to do so.

The Redux FAQ has a list of suggested rules of thumb for deciding what state should go in Redux: https://redux.js.org/faq/organizing-state#do-i-have-to-put-a... .

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

#309
post #219

Earlier quoted context omitted.

So I see where you're coming from. To first address Redux, etc, React has no opinion on state storage, it's a feature not a bug. Obviously you need to store state somewhere, and Redux, Relay, etc are just tools to address that concern. But that's really unrelated to what you're trying to address, which is coupling between leaves that have shallow common ancestors, but are themselves quite deep. Although in my experie…

Is there a blog post explaining higher order components in more detail, preferably with examples?

Yep, lots! See the "React Component Composition" section of my React/Redux links list: https://github.com/markerikson/react-redux-links/blob/master...

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

#310

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…

Two-way data binding and composability don't have to be exclusive. I wrote a web framework that provides the two together, though it's right now in early state. Feel free to try it out / use it though if you're interested:

http://reactiverelations.org/

Post reply on HN