4 ms·

I'm an experienced backend developer but always struggled with learning modern web development. I understand all the core well (html, CSS, JavaScript, etc.), b

by nlnn 4y ago

I'm an experienced backend developer but always struggled with learning modern web development. I understand all the core well (html, CSS, JavaScript, etc.), but struggle with choosing the right high level abstraction/framework/technology for ideas I want to implement. E.g. should I make it a single page app or not? Should I be using ES6 imports? Which build tool? Would I want React or Vue or something simpler here? Should I use SSR? NPM vs. Yarn? Do I need a CSS compiler? Maybe I should be using TypeScript? Wepback? Basically I'm overwhelmed with choices, but struggle to find useful docs on why a lot of these tools came about, what problems they solve, tradeoffs for using them, etc. Asking the web devs I know in person doesn't help much (“just use React for everything, it's fine").

dgb23 4y ago
If you’re a backend dev, with solid HTML/CSS and HTTP/REST fundamentals then I recommend you default to using htmx plus server side templates for HTML rendering and interactivity, plus a well documented, simple CSS framework that gives you out of the box components like bootstrap/bulma/semantic. React/web components etc. is when you need advanced/bespoke UI widgets. If you can afford KISS then they only introduce complexity and cost.
Heyso 4y ago
Fullstack dev here with more experience in front-end. I struggle too. I'll tried a lot of different things (ex : puppeteer vs cypress, react vs angular2), and I end up having my own preference. I'll try to answer some of your questions : - Should I use SPA ? Slower initial page loading time, but faster to load more pages. Good if typical user stay long on website and navigate multiple pages. - Es6 import ? Use them when you can, better IDE support than require. - Build tool ? Start with webpack, oldest tool, with more chance to find answer to your questions on stackoverflow. Although I have little experience on the others (Rollup, etc), so maybe there is one that is simpler to start with. - React or Vue ? Idk, haven't used view, both are popular and similar, take one you prefer the syntax ? - Something simpler ? Well, there is too much choice... Vanilla js, another cool library, low code or no code like wordpress... - SSR ? Less API to build. Faster initial page loading. Roughly. There is quite a lot of library out there with SSR, and it is elvolving quite fast. The future is probably a mix of server and client side rendering. - npm vs yarn ? I recently played with npm workspaces, and yarn had a feature I needed, otherwise I think sticking to npm is fine. Historically yarn became popular because it introduced .lock file before npm. Npm has since catch up. - Css compiler ? Minifying, or compiling sass ? You can start without it. Also starter like "create react app" already do these optimizations for you. - Typescript ? Use it ! Only exception would be your code is too simple to take advantage of typing.
- nlnn 4y ago
  Thanks, that's super helpful. Would have loved to have found something like this as a high level flowchart or similar somewhere. Sometimes a lot of the tradeoffs or design choices behind a tech aren't obvious from the outset.
immigrantheart 4y ago
I despise frontend development as a JavaScript/TypeScript developer. Every recruiter out there wants me to do frontend work. It just occurred on me when I got onboarded on this team (one of the big tech), majority of them are Python developers, that they can't for the life of me, figure out a simple npm errors. These are really smart senior developers. In the past, I've always thought "its just frontend, anyone can do it". Then it dawned on me that my JS/TS frontend experience are actually really valuable. Now I no longer take it for granted.
legopeice 4y ago
I think sveltekit gets it right most of the time. yes its new tech. but I think its way better than the alternatives already. You want a frontend server that handles auth and credentials. cleans up queries to and from the main backend server. Then you want as low-level interaction as possible in the HTML space. HTML doesnt provide everything you need. but it gets close. JS should augment HTML, the closer you stay to HTML the better. Sveltekit goes a long way in providing this, nextjs and all the others just threw way to much tech at the front end space. You basically want a way to turn URL's and POST requests into GET and POST responses. SPA is mostly not great and was a sidestep in a useable web.
- nlnn 4y ago
  I've been looking into that too, it makes a lot of sense to me (and appeals in a lot of ways). The newness is the only thing that's put me off, mostly due to lack of finding good examples compared to Vue/React for various things. But I figure that if I start with either of Vue/React, I should be able to then translate anything useful I find there to Svelte eventually.
kevinfiol 4y ago
Use esbuild and plain CSS to start. Consider Mithril.js for something React-like, or something like Alpine.js.

by nlnn 4y ago

dgb23 4y ago

If you’re a backend dev, with solid HTML/CSS and HTTP/REST fundamentals then I recommend you default to using htmx plus server side templates for HTML rendering and interactivity, plus a well documented, simple CSS framework that gives you out of the box components like bootstrap/bulma/semantic. React/web components etc. is when you need advanced/bespoke UI widgets. If you can afford KISS then they only introduce complexity and cost.

Heyso 4y ago

Fullstack dev here with more experience in front-end. I struggle too. I'll tried a lot of different things (ex : puppeteer vs cypress, react vs angular2), and I end up having my own preference. I'll try to answer some of your questions : - Should I use SPA ? Slower initial page loading time, but faster to load more pages. Good if typical user stay long on website and navigate multiple pages. - Es6 import ? Use them when you can, better IDE support than require. - Build tool ? Start with webpack, oldest tool, with more chance to find answer to your questions on stackoverflow. Although I have little experience on the others (Rollup, etc), so maybe there is one that is simpler to start with. - React or Vue ? Idk, haven't used view, both are popular and similar, take one you prefer the syntax ? - Something simpler ? Well, there is too much choice... Vanilla js, another cool library, low code or no code like wordpress... - SSR ? Less API to build. Faster initial page loading. Roughly. There is quite a lot of library out there with SSR, and it is elvolving quite fast. The future is probably a mix of server and client side rendering. - npm vs yarn ? I recently played with npm workspaces, and yarn had a feature I needed, otherwise I think sticking to npm is fine. Historically yarn became popular because it introduced .lock file before npm. Npm has since catch up. - Css compiler ? Minifying, or compiling sass ? You can start without it. Also starter like "create react app" already do these optimizations for you. - Typescript ? Use it ! Only exception would be your code is too simple to take advantage of typing.

nlnn 4y ago
Thanks, that's super helpful. Would have loved to have found something like this as a high level flowchart or similar somewhere. Sometimes a lot of the tradeoffs or design choices behind a tech aren't obvious from the outset.

immigrantheart 4y ago

I despise frontend development as a JavaScript/TypeScript developer. Every recruiter out there wants me to do frontend work. It just occurred on me when I got onboarded on this team (one of the big tech), majority of them are Python developers, that they can't for the life of me, figure out a simple npm errors. These are really smart senior developers. In the past, I've always thought "its just frontend, anyone can do it". Then it dawned on me that my JS/TS frontend experience are actually really valuable. Now I no longer take it for granted.

legopeice 4y ago

I think sveltekit gets it right most of the time. yes its new tech. but I think its way better than the alternatives already. You want a frontend server that handles auth and credentials. cleans up queries to and from the main backend server. Then you want as low-level interaction as possible in the HTML space. HTML doesnt provide everything you need. but it gets close. JS should augment HTML, the closer you stay to HTML the better. Sveltekit goes a long way in providing this, nextjs and all the others just threw way to much tech at the front end space. You basically want a way to turn URL's and POST requests into GET and POST responses. SPA is mostly not great and was a sidestep in a useable web.

nlnn 4y ago
I've been looking into that too, it makes a lot of sense to me (and appeals in a lot of ways). The newness is the only thing that's put me off, mostly due to lack of finding good examples compared to Vue/React for various things. But I figure that if I start with either of Vue/React, I should be able to then translate anything useful I find there to Svelte eventually.

kevinfiol 4y ago

Use esbuild and plain CSS to start. Consider Mithril.js for something React-like, or something like Alpine.js.