Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »

Dogcow: Jun 21, 2005

Lumpy posted:

My Telerik anecdote is from a few jobs ago when our .NET guy went to a Telerik training thing and was all excited about using their stuff and was loving life for a couple weeks then wanted to do something slightly different / display data in a way not provided for by the default setup, spent the next few weeks cursing Telerik, then the next few weeks after that re-doing everything to not use their stuff any more.

This was my/team's experience pretty much verbatim minus any initial enthusiasm whatsoever.

# ? Oct 11, 2017 17:38

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 02:52

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Nolgthorn posted:

Best practice question about Vue js.

When I have a list of users, and I want to pass a bunch of props at once, is it better to pass a single prop as an object, a single prop as an id, all of the props using `v-bind`, or each prop I need individually.
code:
<user-item v-for="user of users" :key="user.id" v-bind="user" />

// or

<user-item v-for="user of users" :key="user.id" :user="user" />

// or

<user-item v-for="user of users" :key="user.id" :id="user.id" />

// or

<user-item v-for="user of users" :key="user.id"
  :id="user.id"
  :name="user.name"
  :email="user.email"
  :created-at="user.createdAt"
  ...ETCETC />
Lets say I need like 10 props in total...

If all I pass is the `id` then inside the `user-item` component I'd select each attribute I need from the store.

e:

Going with the `:user="user"` option, with `props: { user: { type: Object, required: true } }` and although I'm not sure about long term it is working for me well right now.

What is wrong with passing in the user object? You have a component that seems to be built around the concept. There's nothing wrong with a component that is purpose built to display a specific object.

# ? Oct 11, 2017 19:17

HaB: Jan 5, 2001; What are the odds?

Dogcow posted:

This was my/team's experience pretty much verbatim minus any initial enthusiasm whatsoever.

omg samesies.

# ? Oct 11, 2017 19:57

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Skandranon posted:

What is wrong with passing in the user object? You have a component that seems to be built around the concept. There's nothing wrong with a component that is purpose built to display a specific object.

In the React world that was bad practice because of the way it optimised re-renders. I don't think it's an issue in Vue... at least from what I can tell so far. But that's why I was asking.

# ? Oct 11, 2017 21:31

Sedro: Dec 31, 2008

Lumpy posted:

My Telerik anecdote is from a few jobs ago when our .NET guy went to a Telerik training thing and was all excited about using their stuff and was loving life for a couple weeks then wanted to do something slightly different / display data in a way not provided for by the default setup, spent the next few weeks cursing Telerik, then the next few weeks after that re-doing everything to not use their stuff any more.

I'm stuck on the last step

# ? Oct 11, 2017 22:12

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

I�m looking for a Node framework to complement Ember on the frontend. Specifically, I�d like something opinionated like Ember, with a focus on tooling and stability. I�m only a hobbyist, so I appreciate structure. Any suggestions for what I should look at? It seems like there are a lot of dead frameworks for Node...

# ? Oct 12, 2017 17:29

Odette: Mar 19, 2011

Kobayashi posted:

I�m looking for a Node framework to complement Ember on the frontend. Specifically, I�d like something opinionated like Ember, with a focus on tooling and stability. I�m only a hobbyist, so I appreciate structure. Any suggestions for what I should look at? It seems like there are a lot of dead frameworks for Node...

Express, Koa, & Hapi are the big 3.

# ? Oct 13, 2017 06:40

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Express is decidedly unopinionated, and Koa looks like �Express, but with generators.� Hapi is interesting though.

# ? Oct 13, 2017 15:52

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Every time I go looking for a Node equivalent of Django, I end up massively disappointed in the options.

# ? Oct 13, 2017 15:56

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Thermopyle posted:

Every time I go looking for a Node equivalent of anything real platforms maintained by grownups have, I end up massively disappointed in the options.

You can generalize that case thusly.

# ? Oct 13, 2017 16:12

canoshiz: Nov 6, 2005; THANK GOD FOR THE SMOKE MACHINE!

Kobayashi posted:

I�m looking for a Node framework to complement Ember on the frontend. Specifically, I�d like something opinionated like Ember, with a focus on tooling and stability. I�m only a hobbyist, so I appreciate structure. Any suggestions for what I should look at? It seems like there are a lot of dead frameworks for Node...

Ember was created by a bunch of Rails devs. If you want to stay strictly Node, probably not the way to go, but Ember adopts a lot of the principles that Rails does.

# ? Oct 13, 2017 16:54

Ahz: Jun 17, 2001; PUT MY CART BACK? I'M BETTER THAN THAT AND YOU! WHERE IS MY BUTLER?!

Thermopyle posted:

Every time I go looking for a Node equivalent of Django, I end up massively disappointed in the options.

Yep, I go to node every once in a while for small projects, but every time I need to wire up full auth workflow, logging, async jobs, etc in addition to the random bugs i get in node.exe or npm.exe with various point releases (es6 fetch in development randomly broke with JSON BODY in requests last week wtf), I head right back to django for the backend API.

# ? Oct 13, 2017 18:03

luchadornado: Oct 7, 2004; A boombox is not a toy!

Hapi is nice if you want stable and opinionated. It's not nearly as fast in benchmarks, but in real-world use the performance difference is considerably less noticeable.

# ? Oct 13, 2017 19:16

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Helicity posted:

It's not nearly as fast in benchmarks, but in real-world use the performance difference is considerably less noticeable.

This is an ongoing theme.

# ? Oct 13, 2017 19:45

Sedro: Dec 31, 2008

Kobayashi posted:

I�m looking for a Node framework to complement Ember on the frontend. Specifically, I�d like something opinionated like Ember, with a focus on tooling and stability. I�m only a hobbyist, so I appreciate structure. Any suggestions for what I should look at? It seems like there are a lot of dead frameworks for Node...

You could see if there's a decent JSON API server implementation, and pick up whichever middleware it supports

http://jsonapi.org/implementations/#server-libraries-node-js

# ? Oct 14, 2017 02:12

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

Helicity posted:

Hapi is nice if you want stable and opinionated. It's not nearly as fast in benchmarks, but in real-world use the performance difference is considerably less noticeable.

Yeah this is what I�m looking for. Like I said, I�m a hobbyist. I�m working on a project to scratch a personal itch and stay somewhat current in modern webdev. I�m more interested in the frontend, but the nature of my project requires some server code. I�d rather focus on the particulars of my business logic and outsource the details of things like session management and authentication to a stable, opinionated framework. This will likely never see a user other than myself, much less run into performance bottlenecks. Plus, I want to write code that I can abandon for a few months and come back to without major breaking changes to the ecosystem. Ember does semver and maintainability as well anyone � if Hapi is similar, then that�s ideal.

# ? Oct 14, 2017 03:31

prom candy: Dec 16, 2005; Only I may dance

I still like Rails...

# ? Oct 14, 2017 04:02

prom candy: Dec 16, 2005; Only I may dance

Do you guys ever move your interface and type definitions for modules out to a separate file? I'm using the ducks pattern for Redux (https://github.com/erikras/ducks-modular-redux) and some of these files are getting really long because there's a ton of type/interface definition going on in Redux. Alternate question if I'm totally going down the wrong path: how do you organize your redux+typescript projects?

# ? Oct 14, 2017 15:25

luchadornado: Oct 7, 2004; A boombox is not a toy!

prom candy posted:

Do you guys ever move your interface and type definitions for modules out to a separate file? I'm using the ducks pattern for Redux (https://github.com/erikras/ducks-modular-redux) and some of these files are getting really long because there's a ton of type/interface definition going on in Redux. Alternate question if I'm totally going down the wrong path: how do you organize your redux+typescript projects?

Just like Java/C#/etc. - interface, classes, models, whatever in separate files. Single responsibility principle is a good concept to keep in mind and apply in a pragmatic fashion. Don't hyper-separate everything into separate files ahead of time, but if a file starts feeling "ugly" or is hard to read, you should consider breaking it up. There's no shame in having a one-off helper function in a class/file because it's easy, but when you have 3 or more of something that's a good point to start thinking about abstractions and modularity.

We used ducks at a previous employer, and it got painful so we split out some of the things. I'm still not convinced of a good way to organize React projects. Having some sort of opinionated framework dictating structure like .NET MVC does would go a long way.

luchadornado fucked around with this message at 15:59 on Oct 14, 2017

# ? Oct 14, 2017 15:54

prom candy: Dec 16, 2005; Only I may dance

Helicity posted:

Just like Java/C#/etc. - interface, classes, models, whatever in separate files. Single responsibility principle is a good concept to keep in mind and apply in a pragmatic fashion. Don't hyper-separate everything into separate files ahead of time, but if a file starts feeling "ugly" or is hard to read, you should consider breaking it up. There's no shame in having a one-off helper function in a class/file because it's easy, but when you have 3 or more of something that's a good point to start thinking about abstractions and modularity.

We used ducks at a previous employer, and it got painful so we split out some of the things. I'm still not convinced of a good way to organize React projects. Having some sort of opinionated framework dictating structure like .NET MVC does would go a long way.

Ducks is definitely not perfect, but I prefer it to what was going on before where we had ActionTypes.js, ActionCreators.js, Reducers.js, etc. I like when the types, creators, and reducers that are concerned with the same slice of state are co-located. Like all things programming though someone is likely to come up with a better solution in the near future.

Any naming conventions or organizing principles you use when separating interfaces and types out into separate files?

# ? Oct 14, 2017 16:02

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

I have a quick Redux question about running async actions in a row.

Here's an example action I have setup that makes an API call

JavaScript code:

export function getAllPosts() : any {
    return function (dispatch : any) {
        api
            .getAllPosts()
            .then((data : any) => dispatch({type: GET_POSTS, data}))
            .catch((e : any) => `error: ${e}`);
    };
}

then in my reducer, I just update the state:

JavaScript code:

export default function posts(prevState : Object = {}, action : PostBody) {
    const {postDetails, data} = action;

    switch (action.type) {
        case DELETE_POST:
            return {
                ...prevState,
                data
            };
        case GET_POSTS:
            return {
                ...prevState,
                data
            };
        default:
            return prevState;
    }
}

Now I want to test it in my index.js file, but I'm not sure exactly how to run these actions is a row, since they aren't returning a promise...

For some reason, deletePost() is running first

JavaScript code:

const loggerMiddleware = createLogger();

const store = createStore(reducer, applyMiddleware(thunkMiddleware, loggerMiddleware));

// how do I run these three dispatches in order???? None of these functions is returning a promise, so I can call a .then.
store.dispatch(getAllPosts());
store.dispatch(deletePost('8xf0y6ziyjabvozdd253nd'));
store.dispatch(getAllPosts());

ReactDOM.render(
  <Provider store={store}><App/></Provider>, document.getElementById('root')as HTMLElement);
registerServiceWorker();

teen phone cutie fucked around with this message at 17:12 on Oct 15, 2017

# ? Oct 15, 2017 17:06

Dogcow: Jun 21, 2005

Grump posted:

I have a quick Redux question about running async actions in a row.

Here's an example action I have setup that makes an API call

JavaScript code:

export function getAllPosts() : any {
    return function (dispatch : any) {
        api
            .getAllPosts()
            .then((data : any) => dispatch({type: GET_POSTS, data}))
            .catch((e : any) => `error: ${e}`);
    };
}

then in my reducer, I just update the state:

JavaScript code:

export default function posts(prevState : Object = {}, action : PostBody) {
    const {postDetails, data} = action;

    switch (action.type) {
        case DELETE_POST:
            return {
                ...prevState,
                data
            };
        case GET_POSTS:
            return {
                ...prevState,
                data
            };
        default:
            return prevState;
    }
}

Now I want to test it in my index.js file, but I'm not sure exactly how to run these actions is a row, since they aren't returning a promise...

For some reason, deletePost() is running first

JavaScript code:

const loggerMiddleware = createLogger();

const store = createStore(reducer, applyMiddleware(thunkMiddleware, loggerMiddleware));

// how do I run these three dispatches in order???? None of these functions is returning a promise, so I can call a .then.
store.dispatch(getAllPosts());
store.dispatch(deletePost('8xf0y6ziyjabvozdd253nd'));
store.dispatch(getAllPosts());

ReactDOM.render(
  <Provider store={store}><App/></Provider>, document.getElementById('root')as HTMLElement);
registerServiceWorker();

There�s probably much better solutions with redux-saga or whatever but you could just call getAllPosts with your own promise that you resolve after dispatching the GET_POSTS action, then on resolve of that promise dispatch deletePost and so on.

# ? Oct 15, 2017 17:39

prom candy: Dec 16, 2005; Only I may dance

I think testability is one of the big reasons that people quickly moved away from thunks. I think you can return a promise from your thunk though, and then chain on that from dispatch, but I'm not 100%. If you are going to stick with thunks (I still use them for smaller stuff and I suspect a lot of other people do too) I would recommend switching to async/await instead of promises if you can, it makes it a bit easier to follow control flow.

# ? Oct 15, 2017 18:47

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

nevermind. I figured it out.

I just had to return the api call in my action creator. That way, I can use .then();

e; this is my first time using redux, and this course I'm taking is preeeeety bad. I wouldn't recommend blowing $400 on an Udacity course unless your employer is paying the bill.

# ? Oct 15, 2017 18:47

prom candy: Dec 16, 2005; Only I may dance

Dan Abramov's free egghead.io series on Redux is really great.

Edit: Here it is

# ? Oct 15, 2017 18:56

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

That dude is seriously really handsome

# ? Oct 15, 2017 19:25

prom candy: Dec 16, 2005; Only I may dance

He's just a generally awesome community guy too. He responds really patiently in his GitHub issues, he answers questions on StackOverflow, he promotes other people's stuff on Twitter all the time. I'm a huge fan.

# ? Oct 15, 2017 19:34

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Yeah, he's probably the best/nicest/most-helpful guy I've come across.running an OSS project.

# ? Oct 15, 2017 19:56

Pollyanna: Mar 5, 2005; Milk's on them.

Is there a way to get HTML5 number inputs to have a step of 1 (i.e. up and down arrows increase the number by 1), but allow numbers with up to 2 decimal places? All the information I can find out there says that step is inexorably tied to both how much a field increments and decrements by, and what numbers are allowed - e.g., a step of 0.01 will allow for 2 decimal places but will offset by 0.01, while a step of 1 will offset by 1 but won't allow for 2 decimal places. What have other people done to implement this behavior?

Considering that we have our own approach to error messaging now, I wonder if we even want to use HTML5 validation for this form.

# ? Oct 16, 2017 19:40

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

I'm starting to think form elements should be abolished in favour of custom JS based solutions. I'd be surprised if there wasn't a lib out there that gave you the default behaviour of form inputs as a starting point.

Nolgthorn fucked around with this message at 20:27 on Oct 16, 2017

# ? Oct 16, 2017 20:23

luchadornado: Oct 7, 2004; A boombox is not a toy!

Forms were some of the most time-consuming and bug prone things I've seen done in Angular or React. If a designer ever brings up writing your own form logic, distract them with something shiny and run. The ROI is seriously not there.

# ? Oct 17, 2017 00:25

prom candy: Dec 16, 2005; Only I may dance

I've made so many forms in my life and I hate all of them. The only good form is a disabled form.

# ? Oct 17, 2017 01:12

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Pollyanna posted:

Is there a way to get HTML5 number inputs to have a step of 1 (i.e. up and down arrows increase the number by 1), but allow numbers with up to 2 decimal places?

No.

# ? Oct 17, 2017 02:10

Gul Banana: Nov 28, 2003

in something like react, though, it�s easy enough to encapsulate �two buttons inside a text box� and have them affect the number however you want. i�d call it a one storypoint thing except that you may have considerations like �how does this work on mobile� or �how do i plug it into our existing validation system� or something - hopefully nothing crippling

# ? Oct 17, 2017 03:29

Nolgthorn: Jan 30, 2001; The pendulum of the mind alternates between sense and nonsense

Helicity posted:

Forms were some of the most time-consuming and bug prone things I've seen done in Angular or React. If a designer ever brings up writing your own form logic, distract them with something shiny and run. The ROI is seriously not there.

Hey man don't stress see look I'm practically almost done. Get one of the interns to write a test or two and don't try it in any other browsers and lets move on to something else.

code:

<template>
<div class="decimal-number">
    <span>{{ number }}</span>
    <a @click.prevent="goUp">+</a>
    <a @click.prevent="goDown">-</a>
</div>
</template>

<script>
export default {
    name: 'decimal-number',
    data () {
        return { number: 0.1 };
    },
    methods: {
        goUp () {
            this.number += 1;
        },
        goDown () {
            this.number -= 1;
        }
    }
};
</script>

Don't even give it another thought.

# ? Oct 17, 2017 04:39

Honest Thief: Jan 11, 2009

Why does the postcss logo look like an iluminati sect?

# ? Oct 17, 2017 10:39

Pollyanna: Mar 5, 2005; Milk's on them.

Glad to see that forms are just as much of a pain in the rear end in React as anywhere else. Unfortunately my entire project is one big API-backed form. :shepface:

I've recommended simply adding `novalidate` to the form and skipping that part entirely. Doesn't solve the step problem, but we do have some custom logic for ArrowUp/ArrowDown events to increment and decrement that I can use instead, so gently caress it, good enough.

# ? Oct 17, 2017 14:22

darthbob88: Oct 13, 2011; YOSPOS

Honest Thief posted:

Why does the postcss logo look like an iluminati sect?

Apparently it's the alchemical symbol for the Philosopher's Stone, presumably for the way it turns base CSS into useful magic.

# ? Oct 17, 2017 17:38

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Pollyanna posted:

Is there a way to get HTML5 number inputs to have a step of 1 (i.e. up and down arrows increase the number by 1), but allow numbers with up to 2 decimal places?

Having this exact problem today. Ended up just making three select elements :shrug:

# ? Oct 17, 2017 19:10

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 02:52

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Grump posted:

Having this exact problem today. Ended up just making three select elements

code:

<input type="number" step="1" min="0" />
.
<input type="number" step=".1" min=".0" max="0.9" />
<input type="number" step=".01" min=".00" max="0.09" />

YOUR WELCOME. :colbert:

# ? Oct 17, 2017 20:44

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »