Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Hot drat thats sexy.

Adbot
ADBOT LOVES YOU

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Thermopyle posted:

Hot drat thats sexy.

I just installed it and yes. Yes it is.

HaB
Jan 5, 2001

What are the odds?

Lumpy posted:

Have two configs. One for dev / hot reload (since dev server serves from memory) and one for build / prod (since that will put files places)

Here's my dev config. It uses an index.html file in project root that just has a script tag for bundle.js and the root DIV. This is fine, since in dev all js and css are all mushed up together.

< tons of SUPER helpful codez >


So I have a similar setup mostly up and running after tweaking your configs to suit my setup. The sass-loader is throwing an error on an @import line:

pre:
Error in ./~/sass-loader!./src/app/scss/main/scss
Module build failed:
@import 'colors';
^
    Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
    in main.scss (line 1, column1)
I get that for every time I use @import 'colors';

I don't know where "...load the styles" is coming from, since it's not in my repo anywhere.

Edit: now that I look, that
pre:
var content = requi
line isn't mine either. Hmm. module error?

HaB fucked around with this message at 15:18 on Aug 16, 2016

Kekekela
Oct 28, 2004

I had to resist the temptation to install this this morning because I had some crap that absolutely needed to get done but this is definitely happening today.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

HaB posted:

So I have a similar setup mostly up and running after tweaking your configs to suit my setup. The sass-loader is throwing an error on an @import line:

pre:
Error in ./~/sass-loader!./src/app/scss/main/scss
Module build failed:
@import 'colors';
^
    Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi"
    in main.scss (line 1, column1)
I get that for every time I use @import 'colors';

I don't know where "...load the styles" is coming from, since it's not in my repo anywhere.

Edit: now that I look, that
pre:
var content = requi
line isn't mine either. Hmm. module error?

in my SASS files I import other sass files like so:

code:
@import 'sass/config/_vars';
@import 'sass/util/_typography';
The paths above have to be relative to the path you set in your SASS loader:

code:
sass-loader?includePaths[]=' + path.resolve(__dirname, './src')
is what mine looks like, and my project structure looks like so:

code:
/-
 |- src/
    |- sass/
      |- util/
      |- config/
      |- components/
    |- js/
    ...
So my sass includes start looking from 'src/' and so I need to add the path(s) from there.

Flat Daddy
Dec 3, 2014

by Nyc_Tattoo
I don't think this has been mentioned here yet but for config haters now there's create-react-app. It's like the other modern web starter packs (with webpack, es6, linting, etc), but it's by Facebook and nicely keeps all the config out of your project. It just exists as a couple lines in package.json unless you run an 'eject' command to dump all the machinery into your repo so you can customize it.

I used it to get a really quick cycle.js and typescript setup going even though I wasn't using react at all.

bomblol
Jul 17, 2009

my first crapatar

Flat Daddy posted:

I don't think this has been mentioned here yet but for config haters now there's create-react-app. It's like the other modern web starter packs (with webpack, es6, linting, etc), but it's by Facebook and nicely keeps all the config out of your project. It just exists as a couple lines in package.json unless you run an 'eject' command to dump all the machinery into your repo so you can customize it.

I used it to get a really quick cycle.js and typescript setup going even though I wasn't using react at all.

Wow, this is a god-send for me. I was initially interested in front-end stuff but the loving constant focus on tooling repelled me faaaaar away. I do a lot of projects and experimentation in Node, but I rarely ever actually make a front end on the web for them because it's such an immense hassle getting some arcane pipeline set up. I even resorted to using Elm.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

bomblol posted:

Wow, this is a god-send for me. I was initially interested in front-end stuff but the loving constant focus on tooling repelled me faaaaar away. I do a lot of projects and experimentation in Node, but I rarely ever actually make a front end on the web for them because it's such an immense hassle getting some arcane pipeline set up. I even resorted to using Elm.

This is a little odd to me.

I spent some time setting up a bunch of tooling a long time ago and then I basically just copy it from project to project and change a few names here and there and then don't think about it again.

I think people get a little caught up in all the hype around all the stuff and forget that they can just do work. Every few months change or add some new compiler or whatever...but really it doesn't require much thought or work.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
I think you're underestimating how brittle some of the tooling still can be, and how if you fall in the gaps of use cases it doesn't always do a very good job of telling you what's wrong. For an experienced programmer it's not a big deal, you're experienced enough to diagnose the tooling issue and move on, but for beginners it can be a real hassle, or even block you entirely.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Maluco Marinero posted:

I think you're underestimating how brittle some of the tooling still can be, and how if you fall in the gaps of use cases it doesn't always do a very good job of telling you what's wrong. For an experienced programmer it's not a big deal, you're experienced enough to diagnose the tooling issue and move on, but for beginners it can be a real hassle, or even block you entirely.

No, I understand that completely and this new Facebook thing is a godsend for them.

I'm assuming from the way the poster was talking that he wasn't an inexperienced programmer.

Kekekela
Oct 28, 2004
create-react-app is a great one to 'watch' on github, some of the discussions in the issues there are really informative.

bomblol
Jul 17, 2009

my first crapatar

Thermopyle posted:

No, I understand that completely and this new Facebook thing is a godsend for them.

I'm assuming from the way the poster was talking that he wasn't an inexperienced programmer.
I would easily consider myself inexperienced with front-end development, but not software development as a whole. I think it's just easy for people who work with it to forget how intimidating it can seem once they've already passed that hump, and the huge variety of choices for every stage of the pipeline or environment seems exciting rather than confusing. The post-Rails web dev world seems to have grown too quickly to have any cohesion between the many separate parts for people not already in the know.

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

bomblol posted:

I would easily consider myself inexperienced with front-end development, but not software development as a whole. I think it's just easy for people who work with it to forget how intimidating it can seem once they've already passed that hump, and the huge variety of choices for every stage of the pipeline or environment seems exciting rather than confusing. The post-Rails web dev world seems to have grown too quickly to have any cohesion between the many separate parts for people not already in the know.

This is the thing. As far as toolsets go, front end is one big clusterfuck of sometimes conflicting ideas and opinions compared to developing for an exclusive tech stack with specific tools and well documented workflows. Front End Development is super impenetrable due to the tooling we now insist is mandatory, yet user interfaces to ease people in are only just starting to be seriously considered instead of glued together javascripts.

Sagacity
May 2, 2003
Hopefully my epitaph will be funnier than my custom title.

Maluco Marinero posted:

This is the thing. As far as toolsets go, front end is one big clusterfuck of sometimes conflicting ideas and opinions compared to developing for an exclusive tech stack with specific tools and well documented workflows. Front End Development is super impenetrable due to the tooling we now insist is mandatory, yet user interfaces to ease people in are only just starting to be seriously considered instead of glued together javascripts.
I completely agree with this. I find it highly ironic that Javascript developers tend to see themselves as people who have reinvented simplicity after all the bloat of existing languages and ecosystems. It can be absolutely maddening at times if frontend is not your core competency, even as an experienced developer.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
The worst thing about Modern Front End Development is if you are attempting to learn something, and you find a nice tutorial that makes sense to you, then you see it was written over a month ago (gasp) so you probably shouldn't bother with it.

Hopefully in the next six months or so, things will converge towards sanity, but yeah, right now it's a poo poo-show. Hopefully we'll all jump ship to Elm in the next year or so.... :v:

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

bomblol posted:

I would easily consider myself inexperienced with front-end development, but not software development as a whole. I think it's just easy for people who work with it to forget how intimidating it can seem once they've already passed that hump, and the huge variety of choices for every stage of the pipeline or environment seems exciting rather than confusing. The post-Rails web dev world seems to have grown too quickly to have any cohesion between the many separate parts for people not already in the know.

I largely agree with this...except I mostly don't think all thus constant churn around tooling is exciting. Believe me, I was in exactly your shoes at one point and I haven't forgot any of it.

What I'm saying is that you can eliminate that constant pressure to worry about all this tooling of you just decide that the ecosystem is stupid and ignore it. I haven't changed much about my tooling setup in probably a year.

I'm not saying that front-end tooling is easy. I'm saying that you can safely ignore the constant focus on front-end tooling you see all over the place because you can just set it up once and then, if you're experienced at dev, it's not that big of a deal to keep it going.

Thermopyle fucked around with this message at 16:07 on Aug 17, 2016

HaB
Jan 5, 2001

What are the odds?

Flat Daddy posted:

I don't think this has been mentioned here yet but for config haters now there's create-react-app. It's like the other modern web starter packs (with webpack, es6, linting, etc), but it's by Facebook and nicely keeps all the config out of your project. It just exists as a couple lines in package.json unless you run an 'eject' command to dump all the machinery into your repo so you can customize it.

I used it to get a really quick cycle.js and typescript setup going even though I wasn't using react at all.

This is nice. A buddy of mine and I did some quick hacking after running eject to add in that awesome webpack dashboard, and added sass support. That will likely be our new scaffolding going forward.

lunar detritus
May 6, 2009


I just had to upgrade from Angular 2 rc.4 to rc.5 and oh god stop with the breaking changes already :negative:

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



bomblol posted:

I even resorted to using Elm.

You say that like it's a bad thing?!

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Munkeymon posted:

You say that like it's a bad thing?!

Yeah Elm is cool and good.

I mean, good luck if you're wanting to work with other people, because no one knows it. But if you're working by yourself it's very cool.

bomblol
Jul 17, 2009

my first crapatar

Thermopyle posted:

Yeah Elm is cool and good.

I mean, good luck if you're wanting to work with other people, because no one knows it. But if you're working by yourself it's very cool.

I actually really like Elm - learning Haskell in my compilers class awakened a functional programming lust within me. It's just that I felt that it would not likely be relevant to my present/future job searches, my last semester of school, or most collaborative projects.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Thermopyle posted:

Yeah Elm is cool and good.

I mean, good luck if you're wanting to work with other people, because no one knows it.

I guess this thread will have to start a company. The Ultimate Goon Project....

Kobayashi
Aug 13, 2004

by Nyc_Tattoo
Well I'm an idiot and npm installed a side project in my Dropbox folder and it utterly hosed up Dropbox. I hate FE development.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Thermopyle posted:

Yeah Elm is cool and good.

I mean, good luck if you're wanting to work with other people, because no one knows it. But if you're working by yourself it's very cool.

The team I'm on now talked about adding some Elm to some corner of our current project the other day, time permitting*.

*it probably won't :smith:

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
Ditto. https://www.npmjs.com/package/elm-react-component

moctopus
Nov 28, 2005

God Bless Elm.

I finished a kind of crappy project with it, but I gotta keep digging. I'm not really a front end guy, but writing Elm is a lot of fun.

Too bad everything I make is visually poo poo.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Here's an interesting article about the costs of using webpack/browserify/probably-some-other-alternatives.

In short, nested functions and associative arrays have real time costs and thats exactly how webpack and browserify work. It's really apparent on decent sized sites on mobile devices:

(m.reddit.com and Apple.com both have around 1000 modules)

Plavski
Feb 1, 2006

I could be a revolutionary
Good article, thanks for the link. I'd been doing some ground research on Webpack for a new project, but as it looks like Webpack 2 won't solve these problems, I think we'll end up sticking with JSPM, as that includes Rollup in its build process. There are so many different ways to do absolutely everything in client side development, when you get to eliminate even one thing, it's a relief.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
Wait, so I shouldn't use Webpack? God dammit I hate this field. By the time I've leaned enough by reading the barebones documentation on a github page and typed in a bunch of npm install in a terminal like a 1990s hacker, then another articles comes along and says don't use X (use Y!). What the gently caress is the point in bothering to learn any of these, especially in my case where I only work on one website?

Horn
Jun 18, 2004

Penetration is the key to success
College Slice
Use webpack unless the bloat is an issue for you. Depending on your app size it may be a difference of <100ms so unless you are facebook that probably won't matter.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

The Merkinman posted:

Wait, so I shouldn't use Webpack? God dammit I hate this field. By the time I've leaned enough by reading the barebones documentation on a github page and typed in a bunch of npm install in a terminal like a 1990s hacker, then another articles comes along and says don't use X (use Y!). What the gently caress is the point in bothering to learn any of these, especially in my case where I only work on one website?

It's just like every other thing ever. You have to choose the thing that best suits you. Everything is compromises.

Webpack is likely the best because you probably don't use 1000 modules and it's got a much larger community and thus help/tutorials/support/plugins/whatever.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

The Merkinman posted:

Wait, so I shouldn't use Webpack? God dammit I hate this field. By the time I've leaned enough by reading the barebones documentation on a github page and typed in a bunch of npm install in a terminal like a 1990s hacker, then another articles comes along and says don't use X (use Y!). What the gently caress is the point in bothering to learn any of these, especially in my case where I only work on one website?

You should still use Webpack.

Depressing Box
Jun 27, 2010

Half-price sideshow.

The Merkinman posted:

Wait, so I shouldn't use Webpack? God dammit I hate this field. By the time I've leaned enough by reading the barebones documentation on a github page and typed in a bunch of npm install in a terminal like a 1990s hacker, then another articles comes along and says don't use X (use Y!). What the gently caress is the point in bothering to learn any of these, especially in my case where I only work on one website?

Echoing what everyone else has said, use the tools that fit your current situation, then optimize when it becomes a problem.

A lot of performance guides tend to target larger, more complex projects, addressing concerns that your average website may never run into. I see this a lot in the React ecosystem, where all the cool immutable/Relay/etc. stuff is usually overkill until you start approaching Facebook scale.

Anony Mouse
Jan 30, 2005

A name means nothing on the battlefield. After a week, no one has a name.
Lipstick Apathy
Never preemptively optimize unless you know you need to.

Tivac
Feb 18, 2003

No matter how things may seem to change, never forget who you are
All that said, rollup is fuckin great and if you know a bit of node I highly recommend it. ES2015 modules are really nice!

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Anony Mouse posted:

Never preemptively optimize unless you know you need to.

But then what would we do all day?

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
I think this is a bit different tbh. The node ecosystem has built itself on an idiom of itty bitty modules being the one true way and its primary tool for packing to the browser apparently sucks balls for that. Like all poorly optimised aspects of web development (whether it's a framework, transpilers or whatever), this problem is most keenly felt on mobile, where a runtime lock of JavaScript could be felt for 500ms - 4 seconds (depending on how the CPU is going) that blocks all execution for way longer than the user can reasonably expect.

This is just one kind of performance trade off that's keeping mobile web from being taken seriously vs mobile app development (even though everyone still makes web apps).

If rollup is pretty much a drop in switch for much of my projects I'm probably gonna take it. I'm kinda relieved I only partially invested into webpack by transpiling first and THEN running webpack on the transpilation result, so I'm not super dependant on webpack's loader setup.

Kekekela
Oct 28, 2004
Decided to check Elm out today and first impression was, "god this is perfect, if only I could use JSX instead of their brace syntax".
It feels like Redux+React but without having to have a container wiring up MapStateToProps etc.

Kekekela fucked around with this message at 11:06 on Aug 20, 2016

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Kekekela posted:

Decided to check Elm out today and first impression was, "god this is perfect, if only I could use JSX instead of their brace syntax".
It feels like Reflux+React but without having to have a container wiring up MapStateToProps etc.

Also immutability by default as first class language constructs. Tbh I could easily get over JSX or equivalent for that , such that I'm trying it out and might write a render to string library for elm-HTML (shouldn't be that hard)

Adbot
ADBOT LOVES YOU

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Tivac posted:

All that said, rollup is fuckin great and if you know a bit of node I highly recommend it. ES2015 modules are really nice!

Just so you know, people use ES2015 modules with webpack as well. I haven't used require in a year or two.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply