Vue 3.0 Updates [slides] • Hacker News Board

Re: Vue 3.0 Updates [slides]

#121

Post by ivanfon » Mon, Nov 19, 2018, 2:50 AM UTC

keerthiko wrote: post #11

shabbyrobe wrote: post #6

Earlier quoted context omitted.

What power does React offer you that Vue can't? It'd be quite interesting to hear your take on it.

Exporting reactive JS native apps for iOS and Android is the most significant feature -- was what I would have said. I looked it up before writing this comment, and apparently Vue introduced this in June 2018. Case in point of this comment thread :)

nativescript-vue has made a lot of progress over the past few months, it’s shaping up to be a pretty great mobile development experience.

Re: Vue 3.0 Updates [slides]

#122

Post by dmix » Mon, Nov 19, 2018, 5:09 AM UTC

yurishimo wrote: post #117

Zooper wrote: post #111

Earlier quoted context omitted.

Sounds as of 3.0 it became much simpler, as vuex doesn't sound as necessary.

I’ve yet to build a Vue app that I felt needed external state management (though admittedly none are huge SPAs) but I have felt the pain in React working on a similar sized project. Just something about how the events work out of the box. React I felt like I needed to pass in functions to change parent state through a callback function in props, whereas in Vue I just emit the event and forget about it. You can still…

I purposefully avoid Vuex until a) the state becomes large or b) deeply nested objects (which reacitivity handles poorly, as whole trees rerender) or c) when I have lots of deep nested Components with a maze of events.

This is where I've found Vuex is a life saver for reducing complexity, organizing state in a seperate area, and having a consistent interface for accessing/mutating data without a tangled web of events and functions across multiple files/layers.

Re: Vue 3.0 Updates [slides]

#123

Post by PacifyFish » Mon, Nov 19, 2018, 10:00 AM UTC

badestrand wrote: post #44

PacifyFish wrote: post #12

Earlier quoted context omitted.

Could you paste the simple script tag that makes React work without transpilation? I always thought you needed Webpack (or an equivalent) to transpile JSX into a vanilla js function the browser can interpret. If you're referring to Create React App, it uses Webpack - just preconfigured so you don't have to fiddle with it before you start building.

This is my mini React template for experiments, including JSX: https://gist.github.com/Badestrand/3609e7c3c88ba47bb9682a474...

Wow, that’s cool! I didn’t know you could do it all in the browser. Hats off to the Babel devs.

Re: Vue 3.0 Updates [slides]

#124

Post by jetti » Mon, Nov 19, 2018, 3:33 PM UTC

superasn wrote: post #4

I think the best part about Vuejs is that how simple it is and everything just works! A vue component is still as simple as {template: 'hi'}. You don't need webpack or any transliteration for it to work. Just drop the script tag like the good old jQuery and it's working! No wonder it was so easy to switch to it. Transition from vue1 to vue2 was really simple. I'm sure the same will be true for v3.

I ended up taking over a Vue 1.x codebase and tried to update it to vue2. We used single file components and it was a nightmare trying to upgrade. I spent a good two weeks trying to upgrade and eventually just stopped because it was just taking too long. There were a lot of breaking changes from 2.0 to 1.0, especially with the way events were handled. Now, I will admit that the person who wrote the vue 1.x version did not write idiomatic vue and that caused some problems in updating. A lot of the components we used were also not updated to vue 2.0 and, of course, they were using deprecated features. That meant I had to search for something similar to replicate the existing functionality.

Re: Vue 3.0 Updates [slides]

#125

Post by com2kid » Tue, Nov 20, 2018, 5:41 AM UTC

javitury wrote: post #118

com2kid wrote: post #115

Earlier quoted context omitted.

Redux is at its core super simple. Action handler gets data, does business logic stuff, sends result off to reducer that publishes the data back to the UI layer. Online explanations of this suck.

For me, how vuex works was very very easy to visualize. State, mutations and actions are very intuitive. On the other hand, redux's reducers are harder to visualize at the beginning. Until you learn how the reducer works, every reference to "reducer" leaves you slightly confused. I visualized redux's better with a simple example. It helps you to see how state and reducers interact.

Long before learning of React or redux I built a similar system to do IPC between two embedded MCUs.

All state was owned by the master MCU, slave MCU sent messages to the master requesting changes of state, the entire state for the slave CPU was then sent over with the requested changes.

Even what UI screen was shown was handled this way.

I was much more junior then, so the entire system wasn't event driven, all state was transferred every 33ms (iirc).

Redux is moderately more complex than that system, although my system was built in pure C and involved interop between C and C# running in an interpreter.

Re: Vue 3.0 Updates [slides]

#126

Post by IgorPartola » Thu, Nov 29, 2018, 1:07 PM UTC

acemarke wrote: post #109

IgorPartola wrote: post #90

Earlier quoted context omitted.

Agreed. When evaluating both of them, it looked like React and Vue implement the same concepts, but React did it in ways that made it more complicated than it needed to be. I specifically didn’t like that Redux and it’s docs were too heady for what it really is (it’s just event triggering and handling, why does it have to be so complicated?), and the fact that React didn’t have any official “here’s is how to build a…

Hi, I'm a Redux maintainer. FWIW, we're looking at revamping the Redux docs in the near future (see https://github.com/reduxjs/redux/issues/2590 for plans ). If you've got any specific suggestions for improvements, please let us know! I'm always looking for ways we can make the docs better. As a side note, React is separate from Redux, and Redux is definitely not tied to React. Here's a recent post about a team that…

Sorry I just saw this. If you see this comment, yes I know Redux and React are separate and that you can use other state management systems besides Redux with React. However, that doesn’t help when evaluating the React ecosystem at first. I don’t want to play “pick a library, build a framework”. What I do most of the time is pretty common stuff: SPA with login, CRUD data manipulation, etc. I want a a framework that does 80% of that and has flexibility to create the other 20%. Many React/Redux tutorials are happy to oblige. But they are also all incomplete and unofficial. And by the time a large comprehensive tutorial is written by some kind soul, the APIs have changed, and you are back to SO looking for how to make the damn thing run.

Specifically with Redux, I would suggest clarifying stuff around reducers and possibly renaming them. As is, reducers sound like “a monad is a monoid in the class of ...” Vuex specifically does a very nice job of calling their equivalent thing “mutations” which is more intuitive.

My visualization of Redux/Vuex is basically an application of the event system to state management. Instead of manipulating global.state.foo directly, you ask the system to change the value of foo and a callback does it. A simple explanation like that from the start with some examples of benefits of it would be really helpful.

Also, Vuex has a less strict but more usable idea of not having to import actions. You just refer to them as strings.

Also also, examples of XHR/promises handled by Redux especially with error handling all the way from “server returned 404/400/500/etc.” to how to hand that off to a UI element would be helpful. Takes way too long to discover the right pattern for action returning a promise.