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 »

The Fool: Oct 16, 2003

COOL CORN posted:

Is there a starting point that people use for React projects? Or do you tend to roll your own backend + webpack + Babel + whatever?

Just getting to Hello World in React is such a pain in the rear end to get working. I should save a template some day as a starting point.

https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

# ? Mar 16, 2017 19:56

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 00:18

Kekekela: Oct 28, 2004

COOL CORN posted:

Is there a starting point that people use for React projects? Or do you tend to roll your own backend + webpack + Babel + whatever?

Just getting to Hello World in React is such a pain in the rear end to get working. I should save a template some day as a starting point.

https://github.com/facebookincubator/create-react-app

# ? Mar 16, 2017 19:56

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

COOL CORN posted:

Is there a starting point that people use for React projects? Or do you tend to roll your own backend + webpack + Babel + whatever?

Just getting to Hello World in React is such a pain in the rear end to get working. I should save a template some day as a starting point.

I rolled my own and basically just copy paste it for new projects with whatever tweaks are needed.

I'm kind of in the middle of redoing it for webpack 2...

# ? Mar 16, 2017 19:56

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

COOL CORN posted:

Is there a starting point that people use for React projects? Or do you tend to roll your own backend + webpack + Babel + whatever?

Just getting to Hello World in React is such a pain in the rear end to get working. I should save a template some day as a starting point.

Download NPM then follow the installation steps here:

https://facebook.github.io/react/docs/installation.html

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Those 4 commands should get you a starting project on a local server, with Babel and webpack and more:

https://github.com/facebookincubator/create-react-app

Easy peasy!

# ? Mar 16, 2017 19:59

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

Plavski posted:

dynamic compilation with themenames in the *.less files

I guess I'm not sure what this means - probably because I haven't looked at LESS since I picked SASS over it years ago. I was just on a project that had one generic set of SASS full of things marked default. To make a theme, you made a file defining anything you wanted to override and then included the generic theme. It was probably easier to do because the styles all lived in one tree apart from the code. I guess you guys could have each generic file include theme files around themselves, but that sounds like it'd be hard to maintain.

# ? Mar 16, 2017 21:05

smackfu: Jun 7, 2004

How do people use feature flags with unit tests? It seems like your tests would have to use the flags which would just multiply the needed tests. Or is this just "lol wut unit tests?"

# ? Mar 17, 2017 01:42

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

smackfu posted:

How do people use feature flags with unit tests? It seems like your tests would have to use the flags which would just multiply the needed tests. Or is this just "lol wut unit tests?"

The test runner doesn't run tests for features which aren't enabled.

# ? Mar 17, 2017 16:27

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

HaB posted:

The test runner doesn't run tests for features which aren't enabled.

Wait, what?

You write unit tests for a unit of code - whether that's a function, or a whole class, is up to your individual view of testing. Your tests shouldn't care about a feature switch, because that switch is outside of your unit of code. If your feature switch is deep inside your functionality, you're making things decidedly less orthogonal, and violating any single responsibility guidance.

One of the best smell tests for bad code is when things don't test cleanly. You get some false positives, but it can be a useful sign that you're not designing your code in a maintainable way.

Integration tests are a different story. Then you'd probably want to spy on your feature code and ensure that it gets called when a stubbed switch says it should.

# ? Mar 18, 2017 00:49

manero: Jan 30, 2006

COOL CORN posted:

Is there a starting point that people use for React projects? Or do you tend to roll your own backend + webpack + Babel + whatever?

Just getting to Hello World in React is such a pain in the rear end to get working. I should save a template some day as a starting point.

How about https://github.com/facebookincubator/create-react-app ?

# ? Mar 18, 2017 03:47

Kekekela: Oct 28, 2004

Just got an email from codepen about something they've just launched called "Projects". (pretty creative)

Anyway, they're billing it as "Zero setup, full-featured front-end web development environment....You can use preprocessors. For example, just by naming a file ending with `.scss`, it will be preprocessed by Sass....You can choose to have all your CSS run through Autoprefixer. Similarly, you can choose to have all your JavaScript run through Babel." and codepen is pretty dope so its probably worth taking a look if you're in the "just want to get up and running fast" crowd.

# ? Mar 21, 2017 21:01

spacebard: Jan 1, 2007; Football~

Kekekela posted:

Just got an email from codepen about something they've just launched called "Projects". (pretty creative)

Yeah. I saw that announcement too. Looks pretty neat as a development prototype tool. Could be the Invision for front end web dev.

http://codepen.io/pro/projects/

# ? Mar 21, 2017 21:06

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

Kekekela posted:

Just got an email from codepen about something they've just launched called "Projects". (pretty creative)

Anyway, they're billing it as "Zero setup, full-featured front-end web development environment....You can use preprocessors. For example, just by naming a file ending with `.scss`, it will be preprocessed by Sass....You can choose to have all your CSS run through Autoprefixer. Similarly, you can choose to have all your JavaScript run through Babel." and codepen is pretty dope so its probably worth taking a look if you're in the "just want to get up and running fast" crowd.

spacebard posted:

Yeah. I saw that announcement too. Looks pretty neat as a development prototype tool. Could be the Invision for front end web dev.

http://codepen.io/pro/projects/

Pretty cool. I wonder if / when they will support frameworks (React / Redux or Angular) in there. Would be an amazing solution to the "I just want to mess around w/o installing npm blah blah blah..." problem. Maybe they do and I'm blind!

# ? Mar 22, 2017 14:00

reversefungi: Nov 27, 2003; Master of the high hat!

I'm pretty sure codepen already supports React. I remember seeing that freeCodeCamp has some example React projects on there. I haven't gotten that far in their curriculum yet though, maybe the support is somewhat limited?

# ? Mar 22, 2017 15:11

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

The Dark Wind posted:

I'm pretty sure codepen already supports React. I remember seeing that freeCodeCamp has some example React projects on there. I haven't gotten that far in their curriculum yet though, maybe the support is somewhat limited?

If they support CDN external resources, then you could use the inline transformer I guess. Slow, but for messing around it's fine, so definitely something to look into for teaching people and so forth.

# ? Mar 22, 2017 15:34

Kekekela: Oct 28, 2004

Lumpy posted:

Pretty cool. I wonder if / when they will support frameworks (React / Redux or Angular) in there. Would be an amazing solution to the "I just want to mess around w/o installing npm blah blah blah..." problem. Maybe they do and I'm blind!

yeah they already support React, I've done up samples in there before

# ? Mar 22, 2017 19:10

Kekekela: Oct 28, 2004

Anyone messed around with Electron? I'm pretty enamored with VSCode, and then last night I realized a video game I like is also an Electron app. Thinking about trying to build some toy apps with it when I get a chance.

# ? Mar 23, 2017 12:57

Count Thrashula: Jun 1, 2003; Death is nothing compared to vindication.; Buglord

Y'all, Vue is really good. I love how simple it is and I don't have to deal with webpack or babel just to throw something together.

# ? Mar 23, 2017 14:11

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

COOL CORN posted:

Y'all, Vue is really good. I love how simple it is and I don't have to deal with webpack or babel just to throw something together.

Can you write ES6 stuff and have it work? i.e. does Vue have a transpiler in it so you don't need a 3rd party one? I keep hearing good things about Vue and it's been on my "check this out when you have a free day" list for far too long. Someday I'll have some free time.....

# ? Mar 23, 2017 14:42

Count Thrashula: Jun 1, 2003; Death is nothing compared to vindication.; Buglord

Lumpy posted:

Can you write ES6 stuff and have it work? i.e. does Vue have a transpiler in it so you don't need a 3rd party one? I keep hearing good things about Vue and it's been on my "check this out when you have a free day" list for far too long. Someday I'll have some free time.....

Yep, the Vue cli tool creates a new project with webpack hotloading already set up, and the project it makes is really lean and quick-loading.

# ? Mar 23, 2017 15:22

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

COOL CORN posted:

Yep, the Vue cli tool creates a new project with webpack hotloading already set up, and the project it makes is really lean and quick-loading.

Very cool. Glad to see frameworks are starting to take some of the pain out of trying them out by doing that. Remove a huge barrier to entry for people new to the ecosystem.

# ? Mar 23, 2017 16:12

huhu: Feb 24, 2006

I have this link I'd like flush up against the right side.

https://jsfiddle.net/qs6kLmsd/2/

However, when I do right: 0vh, it's ignoring the fact that the text is rotated to calculate what right 0vh is.

# ? Mar 23, 2017 16:43

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

huhu posted:

I have this link I'd like flush up against the right side.

https://jsfiddle.net/qs6kLmsd/2/

However, when I do right: 0vh, it's ignoring the fact that the text is rotated to calculate what right 0vh is.

You can fudge it with translate if you know the height: https://jsfiddle.net/qs6kLmsd/3/

# ? Mar 23, 2017 17:01

M31: Jun 12, 2012

Or set the transform-origin: https://jsfiddle.net/b5z946u2/
Those are two versions, one extends upwards and the other downwards.

M31 fucked around with this message at 19:14 on Mar 23, 2017

# ? Mar 23, 2017 19:07

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

COOL CORN posted:

Y'all, Vue is really good. I love how simple it is and I don't have to deal with webpack or babel just to throw something together.

Yes, I've messed around with it. It's pretty good.

BTW, you don't have to mess with webpack/babel really when doing react if you use create-react-app.

# ? Mar 23, 2017 20:47

Count Thrashula: Jun 1, 2003; Death is nothing compared to vindication.; Buglord

Thermopyle posted:

Yes, I've messed around with it. It's pretty good.

BTW, you don't have to mess with webpack/babel really when doing react if you use create-react-app.

My issue comes with hooking a create-react-app project into an Express project. Can I just build/deploy/whatever it and then serve the HTML/JS from an Express project with no hiccups?

# ? Mar 23, 2017 21:13

The Fool: Oct 16, 2003

COOL CORN posted:

My issue comes with hooking a create-react-app project into an Express project. Can I just build/deploy/whatever it and then serve the HTML/JS from an Express project with no hiccups?

Just run

code:

npm run build

and copy the files into your node/express project.

It would also be possible to do a

code:

npm run eject

then modify the build scripts to automatically move the built react project into your node/express project.

# ? Mar 23, 2017 21:17

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

M31 posted:

Or set the transform-origin: https://jsfiddle.net/b5z946u2/
Those are two versions, one extends upwards and the other downwards.

Oooh, do it this way! It's smarter. I always forget about that property.

# ? Mar 23, 2017 21:24

akadajet: Sep 14, 2003

COOL CORN posted:

Y'all, Vue is really good. I love how simple it is and I don't have to deal with webpack or babel just to throw something together.

Oh yay, another framework to add to the pile.

# ? Mar 23, 2017 21:54

manero: Jan 30, 2006

COOL CORN posted:

Y'all, Vue is really good. I love how simple it is and I don't have to deal with webpack or babel just to throw something together.

Vue is good poo poo. I settled on it after getting annoyed with JSX and then trying Angular 2, and getting annoyed with that.

# ? Mar 23, 2017 23:01

Honest Thief: Jan 11, 2009

What's going on with Angular, are they re-inventing the wheel again with Angular 4?

# ? Mar 27, 2017 17:04

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

Honest Thief posted:

What's going on with Angular, are they re-inventing the wheel again with Angular 4?

No, Angular 4 is the same as Angular 2, they just did a Windows 8 -> 10 thing with their version numbers.

# ? Mar 27, 2017 17:15

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

Skandranon posted:

No, Angular 4 is the same as Angular 2, they just did a Windows 8 -> 10 thing with their version numbers.

So are the even odd the odd ones the ones that you should skip? :downsrim:

# ? Mar 27, 2017 20:02

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

Lumpy posted:

So are the even odd the odd ones the ones that you should skip?

With Angular, you're supposed to skip the odd versions. And then skip the even versions, too. :getin:

# ? Mar 27, 2017 20:20

FateFree: Nov 14, 2003

I'm going to be upgrading a little pet project of mine to the modern era and I'm looking for some front end advice. The app in question is basically a collection of smaller apps to help me track things. In that sense each app is mostly independent except for a few pages that tie together all the reports.

I've been debating between Spring/Thymeleaf mixed with a js template engine (in the past it was built with JSPs and Dust.js templates). Angular seems complicated and annoying. I liked React and started down that road but Vue is starting to sway me with its simplicity. One of the major problems of the site now is that its complicated as hell looking back at it after so many years have passed, so I think I'm going to put a premium on simplicity.

If I go down the Vue route, would it make more sense to treat each app as its own single page application, rather than the entire site? There are some trackers people don't care about at all so I hate bundling all those resources together unnecessarily. Plus its nice to be able to complete it piecemeal on an app by app basis. Any overall advice would be appreciated.

Here is the site: https://www.tracktacular.com

# ? Mar 28, 2017 03:37

Tactical Shitpost: Jun 13, 2016

FateFree posted:

I've been debating between Spring/Thymeleaf mixed with a js template engine (in the past it was built with JSPs and Dust.js templates).

Thymeleaf is fine, but if you don't need logic in server side templates check out Mustache.java.

FateFree posted:

Angular seems complicated and annoying. I liked React and started down that road but Vue is starting to sway me with its simplicity. One of the major problems of the site now is that its complicated as hell looking back at it after so many years have passed, so I think I'm going to put a premium on simplicity.

Yep, i'd pick a simple framework too. React is fine i guess, but Vue and Knockout are much simpler, which would make it easier to maintain the site.

FateFree posted:

If I go down the Vue route, would it make more sense to treat each app as its own single page application, rather than the entire site?

Yep, each app/view as a separate entity.

I've been using following strategy with success:
- Server side: Mustache.java assembles page's html from reusable components (<header/> with all the js/css imports, menu structure, progress bars etc)
- Client side: JS code operates on data structures (observables), while Knockout.js manages what and how things should be shown. Throw in bootstrap with some customizations and you're pretty much good to go.

If you go with Knockout you could structure code like this:

code:

function MyViewModel(self) {
    self.data = { thingy: ko.observable(false) };
    self.someFunction = function() { self.data.thingy( true ); }
    self.bootstrap = function() { console.log( "load the user data you'd need on the page" ); }
}
var __viewModel = {}; // You can use this to manipulate the model from developer tools
// You could throw in here a call to set up some basic view model items you share between pages:
// BasicViewModel( __viewModel );
MyViewModel( __viewModel );
__viewModel.bootstrap();
ko.applyBindings( __viewModel );

# ? Mar 28, 2017 07:18

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

I'm not sure why anyone would pick Knockout in TYOOL 2017. Or even several years before that. It was a breath of fresh air in 2011, but the ecosystem has moved on for the better.

React is fairly simply at its core - you learn the lifecycle and it's handful of class hooks, you embrace one-way data flow, and you "learn" JSX. Redux is where React projects tend to get confusing, but that's because it's very unopinionated and open-ended, and most examples of how to use it are bad developers hacking together something that works but won't scale. But you don't need to use Redux. I've written several SPAs where I just hand-rolled my own state management and it was simple.

I won't knock Vue other than to say last year's hotness is usually your best bet for a new project, and Vue is still this year's hotness. Living on the cutting edge of the Javascript ecosystem can be maddening at times. When in doubt, check a JS survey or Thoughtworks to get a rough feel for what the community is doing and moving towards:

https://www.thoughtworks.com/radar/languages-and-frameworks

luchadornado fucked around with this message at 13:10 on Mar 28, 2017

# ? Mar 28, 2017 13:08

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

Helicity posted:

With Angular, you're supposed to skip the odd versions. And then skip the even versions, too.

Helicity posted:

I'm not sure why anyone would pick Knockout in TYOOL 2017. Or even several years before that. It was a breath of fresh air in 2011, but the ecosystem has moved on for the better.

React is fairly simply at its core - you learn the lifecycle and it's handful of class hooks, you embrace one-way data flow, and you "learn" JSX. Redux is where React projects tend to get confusing, but that's because it's very unopinionated and open-ended, and most examples of how to use it are bad developers hacking together something that works but won't scale. But you don't need to use Redux. I've written several SPAs where I just hand-rolled my own state management and it was simple.

I won't knock Vue other than to say last year's hotness is usually your best bet for a new project, and Vue is still this year's hotness. Living on the cutting edge of the Javascript ecosystem can be maddening at times. When in doubt, check a JS survey or Thoughtworks to get a rough feel for what the community is doing and moving towards:

https://www.thoughtworks.com/radar/languages-and-frameworks

These are some good posts.

Also, Mobx is a good inbetween roll-your-own state and Redux in React-land.

# ? Mar 28, 2017 18:13

Tactical Shitpost: Jun 13, 2016

I do an application that handles CRUD for complex domain data models (6+ levels deep on the object graph, with lists all over) with client-side validation amongst other things. Knockout seemed as the least clunky and the least getting-in-my-way option, plus it supports ancient browsers some of my clients still seem to use, so ya.

# ? Mar 28, 2017 19:02

geeves: Sep 16, 2004

Helicity posted:

I'm not sure why anyone would pick Knockout in TYOOL 2017. Or even several years before that. It was a breath of fresh air in 2011, but the ecosystem has moved on for the better.

React is fairly simply at its core - you learn the lifecycle and it's handful of class hooks, you embrace one-way data flow, and you "learn" JSX. Redux is where React projects tend to get confusing, but that's because it's very unopinionated and open-ended, and most examples of how to use it are bad developers hacking together something that works but won't scale. But you don't need to use Redux. I've written several SPAs where I just hand-rolled my own state management and it was simple.

I won't knock Vue other than to say last year's hotness is usually your best bet for a new project, and Vue is still this year's hotness. Living on the cutting edge of the Javascript ecosystem can be maddening at times. When in doubt, check a JS survey or Thoughtworks to get a rough feel for what the community is doing and moving towards:

https://www.thoughtworks.com/radar/languages-and-frameworks

I wrote my own state management tool as well with React and got one of our most complex pieces of our application running a prototype in just a few hours.

I passed on Redux just due to the fact that I can't trust the front end developers to unit test or write non-state changing methods. We have scattered legacy spaghetti code in both angular and jquery that would take an entire rewrite to do in the correct way (that's regardless of framework choice). Sadly, this mindset is more of a culture thing at my company and the efforts of a few, including myself, over time to change it have not worked.

# ? Mar 28, 2017 19:47

Adbot: ADBOT LOVES YOU

# ? May 17, 2024 00:18

Honest Thief: Jan 11, 2009

I need to improve my test methodologies, I know how to use test frameworks, like Karma for instance, but plainly I don't know how to even start unless someone forces me to just squirt out some tests to fill out their progress reports. I'm not the biggest fan of TDD due to mostly the community at times coming of as ideological and dogmatic, but I guess I can improve without having to buy into the whole thing.

Honest Thief fucked around with this message at 11:49 on Mar 29, 2017

# ? Mar 29, 2017 11:46

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

«‹›235 »