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

«‹›3 »

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Are any of you guys playing with Angular 2? Trying to do something that's not working, but I'm not sure how to phrase the problem so google hasn't helped any.

Basically, I have a set of components, but which one that I use depends on some bit of data on the server. The naive solution is to ngswitch the directives, which is what I initially did. But I wanted to do it properly with DynamicComponentLoader and selecting the class to use at runtime (the proper term for this escapes me at the moment).

ie (using dummy typescript):

code:

import {ComponentA} from "./componenta";

export class WrapperForServerData extends BaseData {
        constructor() {
		// Defined in BaseData as "public myComponent:Type**"
		 this.myComponent = ComponentA;
        }
}

code:

@Component({blah blah blah})
export class ComponentA {
    constructor(private _talkToServerService:ServerService***, private _title:Title*) {
        ....
    }
}

code:

import {ServerService} from "./server.service";
import {ComponentA } from "./componenta";

@Component({blah blah blah})
export class ParentComponent implement OnInit {
    private _myWrapper:WrapperForServerData;

    constructor(private _talkToServerService:ServerService, private _title: Title, private _loader:DynamicComponentLoader, private _elementRef:ElementRef) {
        ....
    }

    ngOnInit() {
        // This works, using the component class directly
        this._loader.loadIntoLocation(ComponentA, this._elementRef, "participants");

        // Error, described below, but not caused by this
        this._loader.loadIntoLocation(_myWrapper.myComponent, this._elementRef, "participants");
    }
}

* angular2/platform/browser/Title
** angular2/core/Type, as used in DynamicComponentLoader.loadIntoLocation. Probably superfluous, but kept since it seems to be a clue in the error message.
*** This gets injected into the app component when bootstrapping. ParentComponent itself is a child of the app component.

But that throws the following error at runtime, which traces to setting the component reference in WrapperForServerData.

code:

Cannot resolve all parameters for ComponentA(undefined, Title). Make sure they all have valid type or annotations.

I assume there's a way to pull it off since the pattern's such a common and obvious one, I just figure that I'm being thrown under the bus by my not-full-understanding of how angular works in the background. Any ideas?

# ¿ Mar 25, 2016 14:45

Adbot: ADBOT LOVES YOU

# ¿ May 6, 2024 05:53

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

IAmKale posted:

Is this not the kind of variable I can bind to with {{ progressPercent }}? At least that's how I'm binding to it in the HTML.

So to my dismay I've inadvertently ended up as the most knowledgeable person regarding front end development. This means I get to wade neck deep into the huge mess that are Angular2 starter projects. I'm surprised these various projects are so gargantuan: three dozen NPM dependencies, a dozen config files to tie it all together...I have no idea how anyone could possibly write this on their own. It's actually kinda disheartening - I feel like I'm at the mercy of these open-source starters to determine my workflow. I know it's still an RC release, but is there any hope that this stuff will get less complex as time goes on? Or is Angular2 complex enough that these huge amalgamations of tools will need to be stood up around it to get it working in production?

Anyway bitchfest over

If you're talking about their tutorial app, most of the npm stuff is the live compiler/server/whatever the hell they use. I only had to put five or six of those on the server to get the site to work.

# ¿ May 26, 2016 19:54

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

IAmKale posted:

I'm guess I'm more interested in an opinionated, standalone program that would just watch a directory and automatically compile .ts/.scss/.html/etc... into a couple of bundled files (vendor.js/main.js/main.css/etc...). Just a single download and some docs that say, "put your files in this kind of structure and you're good to go." Brunch.io was working pretty well, but the community support just isn't there and it choked when trying to build everything for production so now I'm looking at Webpack starters. I can't help but feel like this stuff is purposefully overengineered and in need of some simplification.

That's what it is. I just use the standard typescript compiler in sublime and hit ctrl-b whenever I want to build.

# ¿ May 26, 2016 20:30

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

What problems do you guys have with Angular 2 re: verbosity? It seems fine to me, but that might be my recent C# background inuring me.

# ¿ Jun 7, 2016 20:33

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Professional development question:

I sorta fell into web dev, but I'm sticking with it, and it's time to start moving on, but I know I have some holes. The site I inherited is php/mysql/jquery and I've since added angular 1&2 stuff. But the site was made by non-webdevs so it uses no frameworks, build tools, testing, etc. I've been burned before in interviews by that (why I picked up angular), so if I want to fill those gaps, what sorts of things would you guys recommend I look into?

# ¿ Jun 11, 2016 04:45

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Thanks for the help. Now just to think of a personal project that could make use of it...

# ¿ Jun 12, 2016 03:58

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

This is as much a back-end question as front-end, but what's good stuff to look into for deploying apps? I know there are more elegant solutions than check in to <source control of choice> on one machine then pull to the production machine, but I can't say I know where to start looking.

# ¿ Jun 21, 2016 14:50

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

I've been using gulp and I'm starting to look into webpack, so I've got that step. The part I'm wondering about is how do you go from there to getting everything onto your production server. For example: my ward at work is an unholy mess of vanilla PHP and different flavors of JS, and pushing it is just checking in and merging into successive perforce branches until you get to live. So if I wanted to take the opportunity of an upcoming server rebuild to rethink how we do things, are there options out there?

# ¿ Jun 21, 2016 15:14

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

The Merkinman posted:

Thank you so much for that list.
Our JS is pretty raw, utilizing a lot of jQuery... though we just started using Angular 2.0 (typescript, requirejs) for part of our site.
I already have SCSS to CSS through some compass command thing that I don't even remember how I set up.

So, in general
Is all of this only really useful in DEV, and production wouldn't matter, or it's beneficial there too?
Would I need to start a whole new site-wide rebuild of the entire site to utilize this or could I update as I go (which I was able to do with the SCSS -> app.css workflow)

I've been using webpack on my Angular 2 app, and when packaged and minified, it dropped a couple of MB off the total production download size (my code + my templates + Angular code), and put everything in four files. And since webpack goes through the dependency tree itself, I don't have to manually order the ts files in tsconfig.

# ¿ Aug 8, 2016 21:08

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Granted, the terrible of web dev ten years ago (when I swore it off) was a hell of a lot worse than the current terrible.

# ¿ Sep 28, 2016 15:55

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

I've had to revert to jquery in my new job (among other special horrors), and I spend most of the day thinking to myself how much easier it would be in angular.

# ¿ Oct 4, 2016 13:33

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Lumpy posted:

No worries, and I appreciate your help! I went to Art School, so my baseline competence is far below the norm.... you should see my figure drawing though!

BFA programmers :hfive:

# ¿ Oct 11, 2016 16:22

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

I think the handbook on the official site is a pretty good springboard, it covers things pretty well. It's a nicely straight-forward language.

# ¿ Oct 21, 2016 00:22

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

huhu posted:

code:

export class Hero {
	id: number;
	name: string;
}

@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
			 <h2>{{hero.name}} details!</h2>	
  `,
})
export class AppComponent  {
	title = "Tour of Heroes";
	hero: Hero = {
		id: 1,
		name: "Windstorm"
	};
}

What ties @Component and AppComponent together? Like how does Angular know the two are linked?

@Component is a class decorator which is essentially a function that gets called with AppComponent as a parameter, for Angular to do with as it pleases. Check out the decorator docs.

# ¿ Dec 6, 2016 17:25

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

The Merkinman posted:

I see them done with:
code:
<option *ngFor="let object of objects" [value]="object.value">
but I don't have a list of objects, just a list of numbers. I guess I have to make some new function that returns just a simple list of numbers to satisfy Angular?

If you already have a list of numbers, then the "object" there is a red herring, it's just iterating over a list. In JS syntax *ngFor is a for...of statement. If you're looking to emulate for (var i = 0; i < x; i++), then yeah you'll have to generate a list and iterate over it.

# ¿ Feb 16, 2017 16:48

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

I've used flex a little before but I had no idea...

# ¿ Mar 7, 2017 22:14

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Honest Thief posted:

After spending two hours trying to solve a weird import dependency, I simply erased the node_modules folder and re-installed.. it's working now. gently caress me

I think that's pretty much the js version of "did you turn it off and back on"

# ¿ Mar 29, 2017 16:18

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Sublime's my main work workhorse since I've given it some support for the POS custom web framework we use, but in personal dev I'm almost completely VS Code (Unity and typescript stuff). And once we replace the POS I'll probably convert work to VS Code and/or IDEA, depending on what we replace it with. Although based on my experience with IDEA I'd probably love to go to Webstorm if it wasn't a goddamn subscription.

# ¿ Jun 27, 2017 18:01

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Why does an end-user care if file names and production code is not intelligible? If someone's hacked in to change code, then the problem is deeper than obfuscation.

# ¿ Jun 30, 2017 21:03

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Yeah we're converting the public side of our site to use AMP. Apparently google search is going to start prioritizing sites that can load quickly (oh how convenient, google has a tool for that), and our current pages are beasts.

# ¿ Jul 13, 2017 15:42

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

You could probably do a guide like that pretty well as long as you talk about the right stuff. The difficultly of jumping between stuff like angular and react isn't apis and plugins, but the different philosophies of how things go together. And that sort of thing doesn't change as frequently.

# ¿ Sep 25, 2017 03:14

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

prom candy posted:

Oh, cool. What's up with Microsoft doing a bunch of good stuff lately? I'm going to have to look into that.

They're realizing that Windows isn't the monolith it used to be, so they're pivoting (or maybe returning to) using Microsoft stuff is more important than what you're using it on. Which is nice since they do have legit nice stuff (like c#)

# ¿ Sep 29, 2017 16:41

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

I've had some fun with Aurelia. But I'm also making myself learn React...

# ¿ Dec 7, 2017 23:13

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Anyone have any resources they could recommend as a sort of React 201 (or, "so I've made my first app, now what?"), especially in regards of how to think like a react dev? I've made a simple app but I can already see some complexity problems with taking it to the next steps. I know how I'd answer the problems in angular, but I don't know if those same ideas hold up in react.

# ¿ Jan 26, 2018 17:20

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Isn't political quagmire the natural and inherent state of an open-source project?

# ¿ Feb 23, 2018 19:19

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Maybe to put less cynically: big frameworks have to answer a lot of questions, can't answer them all, and people have different needs and opinions about what questions to answer and how to answer them.

# ¿ Aug 3, 2018 15:07

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

huhu posted:

New question - I've got an API where I'd like to save formatted text (thinking HTML) and then send that to a React front end to be displayed as a blog. However React doesn't seem to like this, with the suggested solution being
code:
<td dangerouslySetInnerHTML={{__html: this.state.actions}} />
Is there a better/safer way to store formatted text on the backend and deliver it to React?

Markdown?

# ¿ Sep 22, 2018 16:16

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

huhu posted:

Thanks for catching this!

Another question. I've got an App.js structured like this:
code:
                <AppWrapper>
                        <Navigation someThing={someThing} />
                        <Switch>
                            <Route exact path="/" component={Home} />
                            <Route exact path="/page" component={Page} />
                        </Switch>
                </AppWrapper>
I want to do someThing conditionally depending on the route. I couldn't figure out a good solution, or maybe I did. I ended up wrapping index.js which serves App.js like so:
code:
ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route path="/" component={App} />
        </Switch>
    </BrowserRouter>,
    document.getElementById('root')
)
So then I could add logic like so in App.js:
code:
    componentWillMount() {
        const {
            location: { pathname }
        } = this.props

        this.setState({ pathname, someThing: pathname !== '/' })
}
Is there a better way to do this I'm missing?

Go check out the react router docs, I don�t remember what it is but I�m pretty sure they have something for exactly that.

# ¿ Sep 23, 2018 16:26

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Yeah VSCode is pretty baller. It�s replaced IDEs in all of my languages

# ¿ Nov 1, 2018 00:47

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Ape Fist posted:

Lol. Try doing .net poo poo with it.

Well there�s your problem

# ¿ Nov 6, 2018 00:26

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

My main problem with React and JSX is a philosophical issue with having your code and your view in the same file. In practice it hasn�t really been an issue for me, but my team isn�t set up in a way that could cause the problems.

# ¿ Dec 1, 2018 18:27

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

It�s fine when the developer is the one doing the templating, but I�ve been in environments (which may or may not exist in reactland, I don�t know) where dev and design were two different people trying to work on the same file and it was a clusterfuck. Thus my general philosophical unease about template being code, even if it�s generally not a problem in practice.

# ¿ Dec 2, 2018 00:02

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

We're running a react-router app within an iframe (for salesforce), and any path change causes the whole app to be reloaded but only when it's run in the iframe. I get the sense that this is just a fact of life with iframes, but can't find anything saying that outright. Am I right?

# ¿ Feb 26, 2019 21:02

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

It's a few pages with internal navigation or directly called, run entirely in an iframe on salesforce. There are solutions and I don't know if it's really even a problem, just wondering if my suspicion is correct re: routing not working under an iframe

# ¿ Feb 27, 2019 00:46

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

First time using redux and react-redux and I'm confused. A story in three reducers...

code:

function updateName(state, action) {
    return Object.assign(state, {name: action.name});
}

code:

function updateName(state, action) {
    return _.extend(state, {name: action.name});
}

code:

function updateName(state, action) {
    return {
        name: action.name,
        start: state.start,
        end: state.end
    }
}

According to everything I've read, these three should all be equivalent, and all three correctly change the state. But react-redux only renders on the third one. What am I missing?

# ¿ Mar 18, 2019 14:44

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

justizor posted:

In the first two you�re updating the state object directly. React-redux expects a new state object if the state has changed, which is what happens in the third example.

The first example can be rewritten as:
code:
function updateName(state, action) {
    return Object.assign({}, state, {name: action.name});
}
and it should work. Probably the same for the second example.

Ahhhh that's it, doc reading fail. I thought Object.assign (and probably _.extend as well) was returning a new object, not mutating the first param. Thanks!

# ¿ Mar 18, 2019 15:50

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Queen Victorian posted:

Oh yeah, this is one of the two acceptable solutions I've been entertaining (I think I mentioned it earlier), even though it seems like quite a bit of extra overhead for the sake of not having to split DOM responsibilities - I feel like it'd be better to just cut to the chase and let D3 do its thing in clearly designated zones than to essentially carry out update actions twice on a page full of live-updating animated graphs.

Also, I need to get to the bottom of how feature-complete react-faux-dom really is (been seeing conflicting accounts), and see how performant it is with lots of poo poo going on.

Performance-wise, I'm not particularly concerned with D3 touching the DOM because the data-join enter-update-exit pattern works quite similarly to the virtual DOM - they both detect the data points that have changed, and update only the nodes affiliated with those data points so you don't have any ham-fisted wasteful overwriting going on (looking at you, jQuery).

With or without react-faux-dom, I still want to pursue super clean and obvious boundaries to keep the data visualization stuff agnostic and self-contained. There are a few views that could use consolidation - instead of a dozen inter-dependent D3 widgets just hanging out on the view, I'd instead want to unify them under a single module, which then becomes a single D3 DOM zone and wrapped by React (instead of a dozen separate ones).

May be a stupid question, but did you look at any of the libraries for React-D3 integration? I think there are a couple that try to solve this problem, though I can't speak to how good they are at is (https://react-d3-library.github.io/ looks like it might have its poo poo together?)

# ¿ Mar 27, 2019 15:31

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

I've had a couple of interviews with Vue shops, sounds like it's getting some traction

I'm interviewing for a react job next week. As a largely self-taught react dev, any suggestions on react concepts and things I should brief myself on?

# ¿ Mar 29, 2019 14:08

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Queen Victorian posted:

I'm at the point where I'm whiplashing between "It's awesome!" and "It's gross!" but either way it's pretty convenient. Though I did do a bunch of pondering on why I couldn't just use a template literal, but I figure the ReactDOM and async have something to do with that.

I came into React with philosophical issues with JSX and embedded templates but, really, it's fine in practice and probably going back to templates would be rough

# ¿ Apr 3, 2019 16:05

Adbot: ADBOT LOVES YOU

# ¿ May 6, 2024 05:53

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Thermopyle posted:

It's easier if you can grok it.

I didn't really grok the different between imperative and declarative until just now, upon realizing that react et al is declarative

Thanks thread :discourse:

# ¿ Apr 23, 2019 14:23

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

«‹›3 »