This is the current state of web development

This is the current state of web development.
github.com/verekia/js-stack-from-scratch/blob/master/tutorial/05-redux-immutable-fetch.md#redux

This is almost like those "enterprise java fizzbuzzes" that people used to make fun off, except nobody's laughing and this is all considered serious and well engineered code design.
How the fuck did this happen?

Other urls found in this thread:

github.com/cssinjs/jss
github.com/gajus/babel-plugin-react-css-modules
webpack.js.org/guides/code-splitting-libraries/#manifest-file
twitter.com/NSFWRedditImage

pajeets

what's your criticism, exactly?

This is a result of the web being a terrible platform to develop for. So you need a bunch of polyfill libraries to support legacy browers and enhancing the underpowered styling language and a "framework" to gloss over the details of the shitty way the browser renders it's layout.

plus a live reload server so you can save and see your results.

Don't worry, if you're too dumb to get past the buildstep you'll never learn any of the technologies it contains anyway

This babel trend shit has to stop.
Just to support the fucking ES6 style imports these fools import like 130mb of dependeces, what the fuck.

Just use the fucking requires! Node already supports most of the ES6 shit, fucking god.

I've been playing with freecodecamp and similar things to get away from IT and maybe towards "development". Then I start into platforms and I spend more time reading than building anything that works. Am I dumb, or is the "web" field of work just a giant mindfuck? I don't know or work with any devs, just IT people.

What the fuck am I looking at exactly

Dependencies on a modern programming app's environment file

Why not simply not support legacy browsers? If the site is rendered in IE6, it should just display a message that says, "Go to hell and stop using Internet Explorer 6."

This is how I can tell you've never held a real job in your entire life, you academia weenie.

>what is forced legacy usage

Loads of companies are tied to ancient webapps that still require legacy browsers. Forcing updates would literally kill productivity for a whole bunch of companies purely because one developer is pissy about supporting anything but the latest and greatest browser of his opinion.

>Art majors and college dropouts that took a bootcamp class that now call themselves engineers

Pajeets can at least do Calculus

>node

Not even once

It's retarded.

No one has the balls to write a vanilla JS library or project. It's actually not hard.

it's a giant mindfuck, mostly because there are so many ways to implement something. if you keep on top of things it isn't too bad.

Babel, React and Webpack purposely split their modules into individual dependencies, it makes your package json look long but it doesn't matter at the end of the day.

No one is forcing to use any of these technologies, there's no requirement to using ES6 / React / Build tools etc. Just stick to script tags and jquery if you want.

Whoever set this up doesn't know what he's doing.
All that babel shit etc. goes into devDependencies, only stuff in dependencies should be react & react-dom as that is the only stuff actually required to run the app.
You then configure webpack to build a dist.js or whatever. All that other shit is only needed for *building* the app.

Can someone tell me what's wrong in simple terms? I've only done a small amount of embedded programming.

Yeah because it makes total sense to write code for the same shit you're facing building any SPA.
Routing, keeping state and DOM in sync, ...
Any armchair coder will beat the performance of React's virtual DOM for sure ;-)

"live reload" is so 2010
HMR is state of the art. You save changes, the whole app state remains as is, and only module changes get loaded via sockets.
It's a very good dev experience once you went through the whole webpack setup meme desu

live reload and hmr is a meme

A web page is written in HTML.

HTML dictates what ressources are loaded, the browser interpret the ressources.

In modern web dev environments, you need a bunch of external tools to make you type as little HTML as possible. So a simple web project will have a file at its root listing dependencies. When building the project, the build tool will download all the dependencies, compile them into a single huge file. It will also cross compile you're incompatible javascript into browser friendly javascript further increasing the web page size, load time, and run time. That's why you see more and more fucking webpages with a loading screen. Each framework comes with its own set of tools, cross compilers, and even the workflow.

What's wrong? It's incredibly inefficient. Everything changes too fast. It's whole paradigm shifts every time you have to use some framework a bit above average in size. People start developing a framework, everyone move to it, and later they realize the thing is a mess and abandon ship, move to something else and repeat until they find something that last more than a few months. Starting a new project from scratch proves difficult especially if you don't know from the start what tools you'll need. Most of the time you'll have to copy paste a template project and work it up from there.

Calling people out on how there's no need to support IE6 in 2017 will get you hordes of pajeet calling you a jobless NEET. But they really are just scared of losing their worthless slave jobs.

I can't stand people who do this. This is also a problem in mobile development - where nobody really knows what the fuck they're doing so they add yet another needless dependency

if you are developing babbys first SPA maybe
once things get complicated you do not want to lose your app state every time you change sth in your src

that's a baby easy package.json file. basic basic stuff.

you're a retard.

ruby is even worse OP. here is an empty project

I can't stand web developers who complain about shit like this. You are coding/programming at the end of the day for a system that is a document parser for an end users machine that isn't supposed to be able to execute arbitrary code. Of course its going to be curmudgeoned and hamfisted. If you want to program like a normal person, write a normal program.

Time to take up Gopher.

HTTP is clearly dead.

what did they mean by this
even a simple concat into a single file would speed up load times by a factor of at least 10x

I fucking HATE this. At least CS / SE graduates had exposure to some math and theory.
If you 'graduated' from a bootcamp or graduated with a degree in finance or some shit and you think you're special because you built a shitty web app in rails from a tutorial, you are a code monkey and have no goddamn business calling yourself a software engineer.

JUST

ask the guy who designed Rails. I hear even ruby "devs" don't like him

Yes, people use various tools to catalyze their workflow.

What is your "criticism", that there's a lot of them?

The actual code isn't even the problem. Configuring your build tools is.

Good luck trying to learn soime deeply nested webpack object structure by heart.
I don't even think that it's possible, and I fucking HATE configurations I can
t replicate without having to look up the documentation or copy from a previous object.

A million times this.

I said this in the thread you found this image in but you must have ignored it because you didn't want to pass up the opportunity to shoehorn your opinion into another thread and make yourself feel profound:

JavaScript is inherently a dinky piece of crap and people are building on top of it to solve the problems it has. This leads to a confusing mishmash of different tools doing different things on different levels and it might not be ideal but it's a step forward. Having poorly organized tools doesn't mean it's a stupid idea to have tools, I guess that's what you're supposed to be saying because your post is conveniently ambiguous enough to be exempt from saying anything concrete.

Hopefully it will be more cohesive in the future.

If refreshing the page sends you somewhere different, then your SPA is providing a worse user experience than NCSA Mosaic.

>Read extremely limited documentation
>Get weird bug
>Google around for an hour
>Finally run into a stackoverflow answer that goes "Oh the instructions sometimes don't work, try this "
I spent 10 hours today getting my build tool to do something entirely trivial. It's really hard to express the amount of loathing I have for this retarded process.

I hope you're right, but I think we're too far down into webshit hell

every person i've seen come out of a bootcamp 6 months later has retained a mere fraction of what they were taught
i'm pretty sure these things are a scam, it's amazing how pricey they are.

>people that don't have anything to do with operating or maintaining engines getting upset that "their" title is being stolen
pottery

Thanks mate.

If the URL contains your whole app state you're probably 'developing' Wordpress templates

I just hope you realise this is done only when running in development.

>mfw I'm exactly the type of brogrammer Sup Forums hates
I haven't written a program in my life yet my job title has "Engineer" in it :^)

me too senpai
I don't even have my B. Sc. in compsci yet and I'm already making some good cash with frontend memes :^)
probably more than the average Sup Forums NEET shitposter will ever archieve

Yeah. And in the end, it takes longer to build your stupid web project than it would take to compile some Million LOC C++ projects with a lot of template metaprogramming.

And then there's the scanario where your application stops being super trivial and you have an actual backend and you can no longer use webpack-dev-server. In fact, I can't imagine any situation where you don't have a backend. So for whom is webpack-dev-server even there?

? you're missing the point of webpack
webpack-dev-server is just a nice addon for a nice dev experience.
what you are actually using webpack for is bundling your app for different targets, most commonly bundling everything into a single file, minifying stuff (webpack is actually really smart about this, check out tree shaking), applying css-postprocessors etc.

I think we're finally just going to start anew. Webassembly and whatnot

Like we've known this forever but I think we're finally just gonna do it over

JavaScript is basically a monument to technology progressing faster than it can get a grapple on. Atleast we can learn from our mistakes and have some funny stories to tell our kids

or maybe he doesn't work for a company/client that still lives in the 00's

Enterprise Java is annoying, but hipster JS is worse.

I know that, but automatically realoading your web browser is an important part of the development experience and you can no longer do that if you have some faggit apache serving the page instead.

actually webpack exposes an API and you could run the whole HMR thing in your production server if you wanted to
but why would you? it's better to develop a feature locally using dev server, push it to master and hope your DevOps monkey set up CI so it gets deployed automatically

I know right? A bit of management and soft skills, a bit of frontend, a bit of automation, and you can earn decent money merely by walking around the office, attending meetings, and giggling with female colleagues like a retard.

I recently updated a customer website for bootstrap and modern CSS. The website is a search engine for auto parts, and guess, a lot of people in this industry still uses XP and even crt.
Since the site was updated we get 1-2 nails every day of some asshole complaint that he can't use the site on IE. One fucker sent a print screen on do and the asshole had chrome but was using the fuck ie.
Man just force people to update browsers. Really. Chrome runs on almost any os. There is no reason to stay locked because the shitty IE that never adhered to standards. IE is a fucking hell.

The purpose of Redux is to force developers to do things atomically as much as possible.

For small projects, it probably adds too much verbosity for it to be worth it, but for large projects, added verbosity is an acceptable trade-off for having easy-to-trace code execution path for debugging.

>Why not simply not support legacy browsers?

Because something you consider a legacy browser today is not IE7 vs 8, where you have 2 years and a full level of css standards compliance between versions. It's WebKit 537.11, vs 537.17 where you have 2 months between versions, and each version adds a new experimental feature while also fixing support for a 4 year old experimental feature that became a standard 2 years ago.

Today, two browsers with the same version number, user agent, platform, and everything else, can end up rendering a page in two different ways.

Microsoft and Mozilla had to add support for -webkit- prefixed CSS because they are so fucking widespread.

It is simply not possible to not support legacy browsers today, because there's no line between modern and legacy browsers.

If you need to do all that shit on a web page, then you are already doing something very, very wrong.

trips of truth.

>In modern web dev environments, you need a bunch of external tools to make you type as little HTML as possible.

In return, you end up typing a fuckload of extra JS, and the same amount of resources will get loaded anyway (in fact, probably more).

kek that part about giggling with female colleagues hit close to home
I'm literally the only dev here that gets along super well with the female designers.

Frontend is super versatile. Can do some design work if I feel like it, code some elegant abstractions, write tests, optimize build process, or just develop new components, it just never gets boring.
meanwhile the C guru gets a hardon because he could shave off a clock cycle in some for loop

>bootstrap
>modern CSS
that shit has been looking dated for a good 2 years now and putting in the time to make it look good/different would be better spent somewhere else desu

That is a good reason to stay the more you can true to html bare standards than JScript magic.
People have horrors thinking about reposting a page and how every shit has to be dynamic and imediate.
For a great majority of applications posting is better than infinite JScript msgic. Look big sites, Microsoft, Intel, Reddit. All employ posting while some retards insist in doing a full post less Ajax site that less than 500 people access per day.

>what is a SPA

Not a website...?

I don't get the whole "do CSS in JS" thing that's trendy right now.

github.com/cssinjs/jss

POST is just plain bad from a UI and UX standpoint (e.g. history)
The reason those huge ass sites don't use a more modern approach is a) to ensure compatibility across ancient devices and b) because they have such a large legacy feature base that migrating to a SPA approach would require a massive investment.
If you wanna do it right you can't just change shit here and there and add some jQuery pajeet tier code, you gotta develop it from the ground up.

most of that should be in devdependencies you noob

also these are just build tools, it doesn't bloat the actual script that's compiled.

all that babel shit just "compiles" react and allows you to import modules. all that sass shit just compiles sass into css, autoprefixer automatically adds browser prefixes etc.

Because CSS in JS doesn't make any sense at all.
HTML in JS àla JSX does because if you want to develop dynamic components you're always gonna need both.

CSS is not a solved problem by any means but I'm really liking the CSS modules approach.
It allows you to write 'local' CSS code that will make your stuff look the same no matter where you use it, pretty great stuff.
github.com/gajus/babel-plugin-react-css-modules

I honestly don't mind ajax submissions, it's pretty neat, and has its place. In fact most modern crap can be neat and have a place.

But, people who did not learn the basics end up making a navigation menu in 250kbyte of php + bootstrap + angular + 100kb css animation library, with two or three completely separate list elements for desktop/mobile/tablet designs, hardcoding all links one by one.

The single fucking line of JS you need for that is an onclick class toggle to trigger the menu between open and closed states. All the rest can be done easily via css. If you want more sub elements to have open triggres, then you need another class toggle for every child menu as well.

That's the shit I had to deal with the past week; I eventually figured that I couldn't be arsed to (nor had the extra day required to) rewrite it so I just changed two animations to hide the giant glaring design bugs in it.

I've been just writing one big CSS in Stylus and having Webpack inject it onto the page.

This modular approach is probably better for larger projects.

The cool thing is, you can still use CSS preprocessors if you want to. Just need to add the appropriate loader to your webpack config.
For my needs, I'm totally fine with not using a preprocessor with CSS modules, because they allow variables/imports natively and an autoprefixer in webpack takes care of the stuff I'd previously use SCSS mixins for.
But to each his own, I love that we have so many options.

looks like my current project

how many megabytes do you load per refresh?

Do you mean gigabytes?

...

nigga. you need a manifest chunk so that your vendor bundle only changes when you add a new dependency and not on every fucking build

even looked up the docs again for you senpai
webpack.js.org/guides/code-splitting-libraries/#manifest-file
step up ur game thx

This is wht i do and i get paid 180k/yr as a sr react dev at the age of 23 without a degree,

How does it feel to be a one trick pony?

this

lol no.

>become react dev
>all languages become lock, cannot learn all skillpoints used

Does g honestly know anything about coding besides knowing how to fizzbuzz in punchhole cards

Becoming a full stack webdev is basically giving yourself mental retardation.

I make $300k/yr as a software architect.

This is how e-penis comparing works, right? Because I would be winning.

You can say that about cs majors too lmao
so much useless filler in a cs curriculum.

>calls himself an engineer
>doesn't even know basic college level physics
why is this allowed

Post a timestamped photo of your w2.

explain why you need physics to write software without trying to justify your expensive degree

why not?

U ddnt post ur age or ur degree

man idk how you JS people do it. This looks like such overengineered garbage, but at the same time it looks like the desolate wild west. Some new sheriff (framework) comes into town and you gotta roll with it and end up in the back of the saloon getting tied to a horse.

nobody would ever start programming if this was what it entailed. Fucking webpack?? Manifests??
And this isn't even the dynamic page shit like python and php is it? All for some shit crud app

stop doing web development, it's not real programming... take my advice and just stop now, you will thank me later

suggestions?

i make about $110K as an architect doing godless java EE. we average about 100 mill transactions through our system a month. that seems cool to me. i'm barely following this thread. front end seems painful. we don't have women designers to flirt with but i get to develop substance abuse problems with my fellow backend graybeards.

Yeah, I'll just drop support for 95% of my customers, this will work out well.

>How the fuck did this happen?
When you tell everybody they can code, they get into webdev because they "used to do their own CSS for myspace xD!"
Then they realize they don't know how to do shit, but this library does it for them.
Repeat that about 15x.

Stack overflow writes 90% of web application code nowadays.

Only 15 times?

How are the version numbers of each different browser even related?