5 ms·

Every time I see someone on this site complain about the build setup complexity of modern frontend and having to fiddle with webpack/babel for ages I'm thinking

by janpot 6y ago

Every time I see someone on this site complain about the build setup complexity of modern frontend and having to fiddle with webpack/babel for ages I'm thinking of all the times I have done: yarn create next-app my-app & cd my-app & yarn dev and be up and running in 2 minutes.

rimliu 6y ago
Why don't you list all the command you have to issue before the project hits the production? I can do this too: without the "modern frontend" all I had to do is open my code editor.
- searchableguy 6y ago
  tbh, yarn deploy.
  - rimliu 6y ago
    and nothing in between? No dependencies? No plugins? No changes to webpack config? Who are you trying to deceive, me or yourself?
    - nullandvoid 6y ago
      Nope nothing. Just use create-react-app everything is pre-configured for you It's as simple as `create-react-app my-app`, then `yarn start` for development, and `yarn build` to spit out production ready code into build folder
- nullandvoid 6y ago
  'yarn build' then copy build directory to web server
- Kaze404 6y ago
  yarn build & cp build /var/www
- muspimerol 6y ago
  Uh, "git push"? With netlify or vercel you're up and running in about 60 seconds. I don't see how you get from your code editor to production without a few commands in between.
  - rimliu 6y ago
    That's the point: I don't. So bragging how it is easy to have an initial setup with a command or to makes no sense. It's what you do till the project reaches the production state.
- Lapz 6y ago
  now --prod
BozeWolf 6y ago
I sometimes develop javascript things. And indeed it is a complex system. I only do it once or twice a month. I have build a few react native and web apps. All them are hard to work on because i didnt touch it for a while. Anyways, i am not familiar with next js. -Is it the same thing as nuxt js but different? - Yarn? I thought that npm was the thing to use again. - How does yarn know that “create next-app” command? Perhaps some yarn install globally thing? - Does it include typescript support or is it javascript only? - Which node version is needed? And if I switch, is that create next app still available then? - How many things are transpiled? Are there any other concepts i need to understand? - What is the testing framework of choice these days? - How long will this framework be hip? Am i talking about months, a few months, a year, two years? Hip is important, i (or new employees) dont want to work with software which is considered old fashioned. - Apparently i need this layer on top of react client side rendering. Another concept. - Full control over babel or webpack is exactly the thing which makes it complex. It is probably easy to get started and then you have to make that little tweak on a changed babel plugin to make “it” work. - Is frontend and backend react the same? As in: will it share the same babel config and will every node function be available on the client side and vice versa? Even if every answer is positive, it is such a huge amount of stacked concepts and technologies. Dont get me wrong, i like programming in javascript / typescript. I think the programming is fun, but fixing the damn tooling and having debates about it sucks.
- a_wild_dandan 6y ago
  > Is it the same thing as nuxt js but different? NextJS is a library for doing server-side rendering in your React app. I've never touched Vue, so I don't know if that's what nuxt js does > Yarn? I thought that npm was the thing to use again. They're fairly interchangeable and it doesn't matter much these days. > How does yarn know that “create next-app” command? Perhaps some yarn install globally thing? Yeah it checks the registry of create-* packages and installs the relevant ones. > Does it include typescript support or is it javascript only? Yep, by default can use TS with NextJS. I only use TS when possible. Going back to vanilla JS is a horrifying thought! > How long will this framework be hip? React is probably the most popular front-end framework and pretty beloved. It's used seemingly everywhere these days. Since SSR is such an important use-case for websites, I'd wager that combined with how prevalent React is, NextJS will be around for a long, long time. > Full control over babel or webpack is exactly the thing which makes it complex. It is probably easy to get started and then you have to make that little tweak on a changed babel plugin to make “it” work. Anecdotally, I've used the default configs for create-react-app starters, NextJS, or Electron Forge starters and haven't needed to modify anything.
westoque 6y ago
this is a bit narrow minded view of things. let's start adding the complexity shall we? need to use sass? let's start adding a scss loader. should we use modules in the JS files or compile everything into 1 file? what if we compile different css into another css file for our admin only layouts? should we use the "fiber" module to speed things up? how about images? let's add another loader, should we use svg/png/jpg file types? now, if all those files are included in JS, how do i access them in the CSS? in the HTML? in the JS? it's not as trivial is it? just imagine a person coming from bootcamp trying to learn all those things.
- robertoandred 6y ago
  You don't need to add a loader for any of that.
- searchableguy 6y ago
  No one is stopping you from using an asset folder and doing it like you did before. You want to pre-optimize images that's why you are hopefully doing it. Support for others is inbuilt. Why transpile to single files? It will be faster to have many smaller files for http2 speed up. Bootcamp also teaches those concepts nowadays. They are different than what they used to be. Check frontend masters, egghead etc.
simion314 6y ago
Sure for hello world app works fine. The same for Java or C, but when you have a real world project you always have to understand all the abstractions otherwise you see a "link error" and you will say "What the hell is a link?" or "something error classpath" and you think "I have no class named path". The project I work on uses gulp(probably is ancient already and I have to use soemthing cooler). With gulp sometimes when I switch branches of my project it will crash , I understand how it works and why it happens so I restart it , but someone that does not understand the "magic under the hood" will not know what to search for, what to google for etc. Same for react or angular, if you do not know what is happening under the hood you will eventually cause performance issues(similar if you don't understand how CPU/memory works) My point is that if the abstractions are not perfect you will sooner or later (probably sooner) have to understand them , read the code etc.
- deleted 6y ago
  [deleted]
- reilly3000 6y ago
  The next.js PI is beautifully simple. I completely agree with what you’re saying with regard to tradeoffs, but I’ve been remarkably impressed with the simplicity of the NextJS api and it’s clear, concise documentation.
  - Vinnl 6y ago
    Working through their docs recently my first thought was: huh, I was under the impression that it would do more for me. But then I realised that it actually does do a lot for me, but they really managed to package it all up in a relatively (and deceptively) simple API that so far still does not seem leaky at all.
    - simion314 6y ago
      Usually the leaky abstraction will appear later, I remember years ago I was implementing a react component and for some reason the focus was lost from an input when an update was happening. So eventually you are forced to understand what is happening and to apply workarounds. I have experienced a number of issues where some bug suddenly appears and until I read the source code of the abstraction I could not fix it(not only JS frameworks).
indy 6y ago
Have you watched Rich Hickey's Simple Made Easy talk?

by janpot 6y ago

rimliu 6y ago

Why don't you list all the command you have to issue before the project hits the production? I can do this too: without the "modern frontend" all I had to do is open my code editor.

searchableguy 6y ago
tbh, yarn deploy.
- rimliu 6y ago
  and nothing in between? No dependencies? No plugins? No changes to webpack config? Who are you trying to deceive, me or yourself?
  - nullandvoid 6y ago
    Nope nothing. Just use create-react-app everything is pre-configured for you It's as simple as `create-react-app my-app`, then `yarn start` for development, and `yarn build` to spit out production ready code into build folder
nullandvoid 6y ago
'yarn build' then copy build directory to web server
Kaze404 6y ago
yarn build & cp build /var/www
muspimerol 6y ago
Uh, "git push"? With netlify or vercel you're up and running in about 60 seconds. I don't see how you get from your code editor to production without a few commands in between.
- rimliu 6y ago
  That's the point: I don't. So bragging how it is easy to have an initial setup with a command or to makes no sense. It's what you do till the project reaches the production state.
Lapz 6y ago
now --prod

BozeWolf 6y ago

I sometimes develop javascript things. And indeed it is a complex system. I only do it once or twice a month. I have build a few react native and web apps. All them are hard to work on because i didnt touch it for a while. Anyways, i am not familiar with next js. -Is it the same thing as nuxt js but different? - Yarn? I thought that npm was the thing to use again. - How does yarn know that “create next-app” command? Perhaps some yarn install globally thing? - Does it include typescript support or is it javascript only? - Which node version is needed? And if I switch, is that create next app still available then? - How many things are transpiled? Are there any other concepts i need to understand? - What is the testing framework of choice these days? - How long will this framework be hip? Am i talking about months, a few months, a year, two years? Hip is important, i (or new employees) dont want to work with software which is considered old fashioned. - Apparently i need this layer on top of react client side rendering. Another concept. - Full control over babel or webpack is exactly the thing which makes it complex. It is probably easy to get started and then you have to make that little tweak on a changed babel plugin to make “it” work. - Is frontend and backend react the same? As in: will it share the same babel config and will every node function be available on the client side and vice versa? Even if every answer is positive, it is such a huge amount of stacked concepts and technologies. Dont get me wrong, i like programming in javascript / typescript. I think the programming is fun, but fixing the damn tooling and having debates about it sucks.

a_wild_dandan 6y ago
> Is it the same thing as nuxt js but different? NextJS is a library for doing server-side rendering in your React app. I've never touched Vue, so I don't know if that's what nuxt js does > Yarn? I thought that npm was the thing to use again. They're fairly interchangeable and it doesn't matter much these days. > How does yarn know that “create next-app” command? Perhaps some yarn install globally thing? Yeah it checks the registry of create-* packages and installs the relevant ones. > Does it include typescript support or is it javascript only? Yep, by default can use TS with NextJS. I only use TS when possible. Going back to vanilla JS is a horrifying thought! > How long will this framework be hip? React is probably the most popular front-end framework and pretty beloved. It's used seemingly everywhere these days. Since SSR is such an important use-case for websites, I'd wager that combined with how prevalent React is, NextJS will be around for a long, long time. > Full control over babel or webpack is exactly the thing which makes it complex. It is probably easy to get started and then you have to make that little tweak on a changed babel plugin to make “it” work. Anecdotally, I've used the default configs for create-react-app starters, NextJS, or Electron Forge starters and haven't needed to modify anything.

westoque 6y ago

this is a bit narrow minded view of things. let's start adding the complexity shall we? need to use sass? let's start adding a scss loader. should we use modules in the JS files or compile everything into 1 file? what if we compile different css into another css file for our admin only layouts? should we use the "fiber" module to speed things up? how about images? let's add another loader, should we use svg/png/jpg file types? now, if all those files are included in JS, how do i access them in the CSS? in the HTML? in the JS? it's not as trivial is it? just imagine a person coming from bootcamp trying to learn all those things.

robertoandred 6y ago
You don't need to add a loader for any of that.
searchableguy 6y ago
No one is stopping you from using an asset folder and doing it like you did before. You want to pre-optimize images that's why you are hopefully doing it. Support for others is inbuilt. Why transpile to single files? It will be faster to have many smaller files for http2 speed up. Bootcamp also teaches those concepts nowadays. They are different than what they used to be. Check frontend masters, egghead etc.

simion314 6y ago

Sure for hello world app works fine. The same for Java or C, but when you have a real world project you always have to understand all the abstractions otherwise you see a "link error" and you will say "What the hell is a link?" or "something error classpath" and you think "I have no class named path". The project I work on uses gulp(probably is ancient already and I have to use soemthing cooler). With gulp sometimes when I switch branches of my project it will crash , I understand how it works and why it happens so I restart it , but someone that does not understand the "magic under the hood" will not know what to search for, what to google for etc. Same for react or angular, if you do not know what is happening under the hood you will eventually cause performance issues(similar if you don't understand how CPU/memory works) My point is that if the abstractions are not perfect you will sooner or later (probably sooner) have to understand them , read the code etc.

deleted 6y ago
[deleted]
reilly3000 6y ago
The next.js PI is beautifully simple. I completely agree with what you’re saying with regard to tradeoffs, but I’ve been remarkably impressed with the simplicity of the NextJS api and it’s clear, concise documentation.
- Vinnl 6y ago
  Working through their docs recently my first thought was: huh, I was under the impression that it would do more for me. But then I realised that it actually does do a lot for me, but they really managed to package it all up in a relatively (and deceptively) simple API that so far still does not seem leaky at all.
  - simion314 6y ago
    Usually the leaky abstraction will appear later, I remember years ago I was implementing a react component and for some reason the focus was lost from an input when an update was happening. So eventually you are forced to understand what is happening and to apply workarounds. I have experienced a number of issues where some bug suddenly appears and until I read the source code of the abstraction I could not fix it(not only JS frameworks).

indy 6y ago

Have you watched Rich Hickey's Simple Made Easy talk?