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 »

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

I always like to see someone else banging their head against something I've also banged my head against.

# ? Mar 11, 2016 19:46

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 02:26

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Yah, the import syntax has a bunch of gotchas especially when working with legacy code, and you get almost zero indication that you messed it up.

# ? Mar 11, 2016 20:47

piratepilates: Mar 28, 2004; So I will learn to live with it. Because I can live with it. I can live with it.

I think typescript would catch it though wouldn't it?

# ? Mar 11, 2016 20:54

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

It would, but then you start mixing tooling and things can get real painful at that point. I must say these days I'm pretty disillusioned with JavaScript tooling, but hopefully stuff will look a lot better in a years time.

# ? Mar 11, 2016 22:51

Plavski: Feb 1, 2006; I could be a revolutionary

We're building an entirely new product that's going to use office 365. We have a lot of in house asp.net skill so we're going to use asp.net 5 MVC on the backbend, but we're still in the decision phase on the front-end. Microsoft use knockout a lot in their own 365 apps (azure, planner etc.) so there's a lot of chatter about using that, but I'm really pushing for angular 2. I've already written a lot in it and see many similarities in approach and style to .net which I think will ease transition.

Anyone any thoughts on using angular 2 for enterprise?

# ? Mar 12, 2016 08:21

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

Plavski posted:

We're building an entirely new product that's going to use office 365. We have a lot of in house asp.net skill so we're going to use asp.net 5 MVC on the backbend, but we're still in the decision phase on the front-end. Microsoft use knockout a lot in their own 365 apps (azure, planner etc.) so there's a lot of chatter about using that, but I'm really pushing for angular 2. I've already written a lot in it and see many similarities in approach and style to .net which I think will ease transition.

Anyone any thoughts on using angular 2 for enterprise?

Angular2 components shares a lot of commonalities with WPF components, and TypeScript shares a lot with C#. Angular2 is probably the closest new framework to your teams current experience. It's also the most complete and modern, with a lot of room to grow without fundamental changes. I'm personally really looking forward to it being able to take advantage of multiple Webworkers.

# ? Mar 12, 2016 14:39

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

Elm has been touched on earlier in this thread, and it was on my //TODO: list for a bit, and I had some time the other day to check it out, and it's pretty drat neat. Even though I don't think I'd use it for anything "real", it's a very, very good way of thinking functionally which has given my lots of "Ah ha!" moments for making React / Redux apps.

tl;dr: Elm:Two thumbs up!

# ? Mar 13, 2016 20:16

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

Yeah. I think I might've said this here before, but maybe it was somewhere else...but anyway, the only reason I don't use Elm as much as I'd like (aka at all) is that the community, tools, available resources, etc seems too small.

And I'm too stupid to use something that doesn't have a lot of help to fall back on.

# ? Mar 13, 2016 21:00

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

Has anyone here been able to get an Angular2 application running in a Web Worker while also using webpack? I haven't found anything that talks about using all 3 together, and I just can't seem to get webpack to co-operate.

# ? Mar 13, 2016 21:28

Plavski: Feb 1, 2006; I could be a revolutionary

Skandranon posted:

Angular2 components shares a lot of commonalities with WPF components, and TypeScript shares a lot with C#. Angular2 is probably the closest new framework to your teams current experience. It's also the most complete and modern, with a lot of room to grow without fundamental changes. I'm personally really looking forward to it being able to take advantage of multiple Webworkers.

Thanks, this echoes what I've found too. Though having said that, I've started looking at Aurelia recently and it's like Angular2 without the dodgy syntax stuff. It has two-way binding by default too, which could well help us in our application. I think it would combine the effectiveness of structured C# .NET code that the team writes with a clean, standards driven HTML experience. Essentially meaning that as TypeScript is our in-house JavaScript structure, we can make a transition even easier. Having to learn the Angular 2 way of doing everything was pretty messy just for me, so the cleaner we can start it for everyone else, the better.

But we're still evaluating frameworks, so Angular 2 could still be the way forward. The cleanness of Aurelia is really starting to keep my attention though.

# ? Mar 14, 2016 17:04

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

Plavski posted:

Thanks, this echoes what I've found too. Though having said that, I've started looking at Aurelia recently and it's like Angular2 without the dodgy syntax stuff. It has two-way binding by default too, which could well help us in our application. I think it would combine the effectiveness of structured C# .NET code that the team writes with a clean, standards driven HTML experience. Essentially meaning that as TypeScript is our in-house JavaScript structure, we can make a transition even easier. Having to learn the Angular 2 way of doing everything was pretty messy just for me, so the cleaner we can start it for everyone else, the better.

But we're still evaluating frameworks, so Angular 2 could still be the way forward. The cleanness of Aurelia is really starting to keep my attention though.

It's mainly webpack I'm having the issue with. Managed to get everything working by dropping webpack and use SystemJS. The worker thread needs to load everything over again, not just the worker code. Also, the worker thread can't use things like jQuery, so I had to replace our AmplifyJS message bus with PostalJS because Amplify needs jQuery, even though it doesn't do any DOM manipulation.

# ? Mar 14, 2016 17:08

well why not: Feb 10, 2009

I'm trying to wrap my head around Bourbon / Neat / Bitters. I'm getting some SASS errors - mostly to do with bitters mixins. I'm new to SASS and these new tools, could anyone tell me what their basic website package.json files are looking like? I've got mine setup with Gulp, Bitters, Neat, SASS, CleanCSS and LiveReload. I'm wondering what a cool guy setup in 2k16 looks like.

edit: figured out the issue, was to do with underscores in the start of the included partials' filenames.

well why not fucked around with this message at 12:59 on Mar 15, 2016

# ? Mar 15, 2016 12:39

no_funeral: Jul 4, 2004; why

ok dumb question time. can i add react-native to an existing react web app? i just don't get how i could do react-native init and have the react-native project's root dir share the same root dir of the existing app.

no_funeral fucked around with this message at 22:52 on Mar 15, 2016

# ? Mar 15, 2016 22:38

N.Z.'s Champion: Jun 8, 2003; Yam Slacker

I don't know but https://github.com/kauffecup/react-native-web-hello-world has an example of shared code but platform-specific entry points

# ? Mar 16, 2016 09:56

zorch: Nov 28, 2006

�hmmm, lea verou�s book has been out for almost a year now, I wonder if she�s stopped retweeting every tweet that mentions it"

�welp,"

# ? Mar 21, 2016 01:51

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

Has anyone else had to deal with https://github.com/nodejs/node/issues/3742 ? I got around it using the helpful "just disable security :v:

" comment on that issue, but then someone asked me to see if it was still a problem on latest stable because the team is still on v4. I tried it and it navigated the MITM firewall no problem after some internal tool patched it :toot:

Oh but now grunt tasks fail, so back to the old version aaaand the "just disable security" workaround doesn't work anymore and I'm left with no working build environment.

My two takeaways from today:
1) don't be helpful, it only breaks things
2) I'm feeling very justified in avoiding (most) JS build tooling until recently, but clearly didn't wait long enough

# ? Mar 23, 2016 20:37

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

You should ditch grunt and just use npm. I mean, npm is poo poo too, but you need to be able to get packages somehow, and the more build tools like grunt you add to the mix you just increase the chances of their poo poo nature reaching out and loving you up.

# ? Mar 23, 2016 23:38

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Modern front-end development: it's all poo poo, deal with it.

# ? Mar 23, 2016 23:49

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

To be helpful though, now more than ever you need to be running node version manager. Now that Node is being actively developed on its good to see progress in the core runtime, HOWEVER the true dependability of npm packages is starting to be laid bare. I have a project stuck on v0.10 indefinitely because the only library for handling png is not compatible with higher versions. Luckily that's just build work, nothing server related, but you see the risk. All those packages on npm, but the percentage that are keeping up with node latest is dwindling.

# ? Mar 23, 2016 23:59

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

Thermopyle posted:

You should ditch grunt and just use npm. I mean, npm is poo poo too, but you need to be able to get packages somehow, and the more build tools like grunt you add to the mix you just increase the chances of their poo poo nature reaching out and loving you up.

How does that solve anything (other than grunt being crap)? The problem is with node.exe getting permissions, npm/grunt/gulp all run on top of node.exe.

# ? Mar 24, 2016 00:21

Tres Burritos: Sep 3, 2009

What resources are recommended for learning React for someone who's got plenty of JS experience?

# ? Mar 24, 2016 05:31

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

The docs and some of the React site's blog posts would probably be more than enough to get you up to speed. They're well written and the docs aren't particularly huge and intimidating.

# ? Mar 24, 2016 05:36

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

Thermopyle posted:

You should ditch grunt and just use npm. I mean, npm is poo poo too, but you need to be able to get packages somehow, and the more build tools like grunt you add to the mix you just increase the chances of their poo poo nature reaching out and loving you up.

The team I'm on now uses both. I'm anticipating some upgrade pain in the coming ~year. Seems quite sane mostly, but I guess I'll find out for sure soon enough.

Maluco Marinero posted:

To be helpful though, now more than ever you need to be running node version manager. Now that Node is being actively developed on its good to see progress in the core runtime, HOWEVER the true dependability of npm packages is starting to be laid bare. I have a project stuck on v0.10 indefinitely because the only library for handling png is not compatible with higher versions. Luckily that's just build work, nothing server related, but you see the risk. All those packages on npm, but the percentage that are keeping up with node latest is dwindling.

Yeah, nvm made getting the latest stable node so easy that I did it by accident. I guess if it doesn't quite "get" what version you asked it to install it just does that? So helpful!

Maluco Marinero posted:

Modern front-end development: it's all poo poo, deal with it.

At least it used to mostly just be poo poo to deal with IE :sigh:

# ? Mar 24, 2016 06:32

Analytic Engine: May 18, 2009; not the analytical engine

Are React apps capable of interaction and redraw speeds faster than well-optimized vanilla JS / jQuery? I've never actually asked or heard an answer to this. Obviously React is faster for some typical webapps, but does it beat everything?

# ? Mar 24, 2016 06:34

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Analytic Engine posted:

Are React apps capable of interaction and redraw speeds faster than well-optimized vanilla JS / jQuery? I've never actually asked or heard an answer to this. Obviously React is faster for some typical webapps, but does it beat everything?

No, however you'll write good enough code in far less time, the maintenance of it will be easier to track, and the good enough performance doesn't require you to think too hard.

# ? Mar 24, 2016 06:44

Analytic Engine: May 18, 2009; not the analytical engine

Maluco Marinero posted:

No, however you'll write good enough code in far less time, the maintenance of it will be easier to track, and the good enough performance doesn't require you to think too hard.

That sounds great, but does it do a good-enough job for the effort with complicated interactive webapps / data visualizations / games? I have to learn React soon anyway and it's absolute strengths aren't clear.

# ? Mar 24, 2016 06:58

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Data visualisation would be fine, as you can always use d3 inside the component, and let react just handle everything around it. For games you would probably be better if for something fit for purpose for fast rendering animation, but again depends on the game. Most of the time if you've built something well in React you can probably port it sensibly, because it's all about components and passing down properties without lots of two way logic.

# ? Mar 24, 2016 07:33

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

Also complicated interactive webapps are where it shines, it's generally performant, so it's usually best practice to write React code and just work around it with componentDidMount stuff when you need to do raw JavaScript to get the performance.

The big gain you get is managing application state is orders of magnitude easier, especially combined with something like Redux (application state manager)

# ? Mar 24, 2016 07:37

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

Skandranon posted:

How does that solve anything (other than grunt being crap)? The problem is with node.exe getting permissions, npm/grunt/gulp all run on top of node.exe.

I was just saying in general, I wasn't addressing his specific problem.

# ? Mar 24, 2016 14:43

Analytic Engine: May 18, 2009; not the analytical engine

Maluco Marinero posted:

Thanks, sounds like a good tool for making complicated stuff that's reliabley "80% of the way there"

# ? Mar 24, 2016 16:50

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

Analytic Engine posted:

Thanks, sounds like a good tool for making complicated stuff that's reliabley "80% of the way there"

As for "is React Fast Enough" this article: http://swizec.com/blog/animating-with-react-redux-and-d3/swizec/6775 uses d3 for calculations and React to draw the SVGs and it seems pretty snappy. Might be something to look into as well.

As for "how to learn React", I'd read the Redux docs / watch the Redux egghead videos. Obviously very Redux specific, but those really get at the way React should work in my opinion.

# ? Mar 24, 2016 17:25

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

If you're like me and learn best from physical books, I can recommend React.js Essentials.

# ? Mar 24, 2016 20:28

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

fart barterer: Aug 24, 2006; David Byrne - Like Humans Do (Radio Edit).mp3

Every 5-6 months I get an idea for a pet project and revisit the front-end scene. Jesus Christ. What a poo poo show.

If I'm making a Rails app and I need some basic model binding and ajax sillyness what should I use? It looks like Knockout is the only "front-end" that hasn't gone "framework".

There's also EmberCLI-Rails, which seems cool. I'm fine with my front-end being bloated and opinionated as long as it's in line with everything under the hood. Any good experiences there?

# ? Mar 26, 2016 22:26

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

There's not really that much of a reason your backend and your front end have to be from the same project or whatever.

Just develop a good API delivered by the backend and consume it at the front end.

I recommend React plus Redux for the front end.

# ? Mar 27, 2016 01:58

Dr. Poz: Sep 8, 2003; Dr. Poz just diagnosed you with a serious case of being a pussy. Now get back out there and hit them till you can't remember your kid's name.; Pillbug

I'm re-designing the front end of a project of mine and using flexbox for the layout. Everything has been really great and I've learned a lot. A big focus of mine has been on making the layout responsive. This has caused me to hit a snag in my REPL. I'll use Chrome and Firefox Developer Edition mobile emulator tools to spot check things but this doesn't catch everything. When I deploy the site and visit it from my phone (iPhone 6s+) I will notice there are bugs/different behaviors that were not present using the browser emulators. This is where my delay comes in. I'm using webpack to bundle everything into app.js and it seems to take a few minutes after deployment for my phone to realize that what's on the server is newer than what's cached.

I'd really like to avoid constantly clearing the cache on my phone while still being able to test in Safari on iOS and would like to know what my options are for iPhone / iOS Safari emulation? I'm running Windows 10 and developing everything inside an Ubuntu VM.

While I prefer free, I don't mind buying a license for something as long as it isn't prohibitively expensive and gives an accurate representation of what the site will render like on modern iOS devices.

Dr. Poz fucked around with this message at 16:59 on Mar 30, 2016

# ? Mar 30, 2016 16:55

piratepilates: Mar 28, 2004; So I will learn to live with it. Because I can live with it. I can live with it.

If the problem is that the mobile browsers are just caching the old bundled js file then you could probably fix that with a cache buster plugin that appends an ID to the bundle's file name, and have the HTML reference the bundle with the ID. No idea on a good one for webpack.

# ? Mar 30, 2016 17:02

bartkusa: Sep 25, 2005; Air, Fire, Earth, Hope

piratepilates posted:

No idea on a good one for webpack.

https://webpack.github.io/docs/long-term-caching.html

Instead of a version, you can use a hash, which is nice if you have releases where the JS doesn't change.

# ? Mar 30, 2016 19:39

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

Don't tie your front end to Rails if you can avoid it, sprockets is dog slow and lacks a ton of tooling compared to things like webpack. I'm in the middle of writing a big mountable rails engine which means I have to use the asset pipeline and it's driving me crazy.

If you want to use a combination of Rails views with a few mounted JS components for the more interactive pieces look into something like react_on_rails or webpack-rails to get as much of your asset code as possible away from Rails. You'll thank me when you're getting automatic style injection on save and using proper JavaScript modules.

# ? Apr 7, 2016 05:41

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 02:26

ModeSix: Mar 14, 2009

In case anyone else is interest, I found a Typescript course on edx.com that is sponsored by Microsoft.

https://www.edx.org/course/introduction-typescript-microsoft-dev201x-1

# ? Apr 7, 2016 05:57

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

«‹›235 »