5 ms·

As an experienced back end developer that has done a bit of ASP/JSP/PHP in the past but really tried to avoid JS. What is the best place to start now? I figure

As an experienced back end developer that has done a bit of ASP/JSP/PHP in the past but really tried to avoid JS. What is the best place to start now? I figure react is #1 but vue looks simpler. Any moocs or books worth reading first? Or dive in and build something?

ErikAugust 6y ago
Well, you could... take a look at article that you are commenting about.
aryonoco 6y ago
Eloquent JavaScript and the You Don't Know JavaScript series are my favourite books. Both available for free online. Depends on what you want to do. For work, yes React is king and has an absolutely huge ecosystem built around it. For fun? I'd look into Svelte, fixes a lot of the pain points of React and Vue. Also the Javascript DOM API has come a long way itself and IMO, while a library/framework is helpful if you're building a complex web app with lots of states, the great majority of websites out there don't need a framework and can be built statically with something like Eleventy.
k1m 6y ago
I'm more a back end developer myself, but have really enjoyed Vue. My recommendation would be to try a few basic intros to Vue, but try to avoid the ones that want to get you set up with a whole bunch of command-line tools to compile/pack/whatnot the project. (Those can feel quite daunting to start with, and are actually not necessary if the size of your project doesn't require it.) Just include Vue from CDN as a script tag. And if you want a jump-start with ready-made components and good styling, I can also recommend Buefy - https://buefy.org/documentation https://buefy.org/documentation - like Vue, it can also be included with a simple script tag, without any command line tools.
- type0 6y ago
  I like Bulma and Vue, thanks for mentioning Buefy, had no idea it existed.
  - k1m 6y ago
    I think they're a great combo. Had always been scared off from modern front-end work because it seemed to involve a whole bunch of intricate dependencies and build tools. So it's been eye-opening to see just how much you can build with Vue and Bulma (with Buefy making components very easy to use). And I've not yet needed to touch npm/yarn/webpack or any of that stuff for my small projects.
  - james_s_tayler 6y ago
    Buefy is my favorite. Most productive I've ever felt on frontend. But it is a little limited compared to most other component libraries, so YMMV but I really love it.
    - k1m 6y ago
      Would be interested to know what you find its limits to be, and what you'd recommend as something more flexible than Buefy.
loxs 6y ago
Whatever you choose, make sure to use strict TypeScript from the very beginning. You won't regret it.
adflux 6y ago
I absolutely love Vue, but i would think twice or thrice about using any client side framework. If you can, just use e.g. ASP.Net with Razor to create your website. Depends on what you need it to be able to do ofcourse.
vorpalhex 6y ago
Skip the frameworks, start with modern ES5/ES6, don't use babel/ts/etc initially. Modern JS is pretty clean and the native DOM methods are actually very pleasant generally. You can get really far without even needing a package manager, but eventually something like npm becomes useful if bulky.
- hfourm 6y ago
  Further, you will then understand why you need a framework like React should your project become complicated enough on the frontend.
  - bob1029 6y ago
    There's nothing stopping you from tracking client state in a a simple window.state object. This object can be of arbitrary composition, so I see no reason you cannot manage even the most complex UI state in this manner. For me, minimal web development means doing as much as I can at the server. This includes tracking client UI state if feasible. The more stuff you have in 1 domain like that the easier it becomes to control complexity. When your state machine is split between 2 realms is when you get into traps that things like React were created to resolve.
    - twicetwice 6y ago
      I agree that if you have state in two places you're doing it wrong. That's why I keep all my state client-side (the only thing in session storage is your user ID if logged in). My server is basically just a thin wrapper around my database, providing an API for my client to call.
- pvorb 6y ago
  The problem is there aren't many guides for learning "vanilla" JavaScript that aim at newcomers. MDN is a good reference, but I can't think of something more directed tutorial.
  - lambertsimnel 6y ago
jccooper 6y ago
Depends on what you're doing. In general, getting a handle on vanilla JS and the HTML DOM first is a good idea, as everything starts there. If you just want to make web pages move a little, you can stay there. If you want to do anything with much state or user interaction, a reactive framework becomes useful. Vue is really quite friendly. As to how to learn, I've been doing it too long to have a good recommendation. Probably read a JS book, it's a bit of an odd language with a lot of wrinkles.
mhink 6y ago
In addition to what the rest of the comments are saying: if you're talking about front-end Javascript, take the time to really learn the devtools in your browser of choice (personally I'd recommend Chrome or Chromium, but I'll grant that I don't have a whole lot of experience with Firefox.) It's basically an entire IDE right there waiting for you to use. (With a little bit of futzing, you can even use the Chrome devtools as a debugger for Node.JS, which absolutely blew my mind when I first gave it a shot.)
abraxas 6y ago
I'm in the same boat. I want to try something like Flutter to keep the JS madness at arm's length. Not sure if going that way will make it worse or better though.
ric2b 6y ago
Svelte is even simpler to learn than Vue and has the benefit of having a much smaller/simpler/more efficient runtime. As a backend dev, it's what I wanted frontend work to feel like when I started learning frontend.
chrisweekly 6y ago
Don't forget about CSS. Since it's easier to learn than to unlearn, do yourself a favor and start at https://every-layout.dev https://every-layout.dev Full access to the site / book / codebase costs $100, but the free content alone is worth more than that. Can't recommend it highly enough. Axiomatic CSS, composable layout primitives, and profoundly well-researched and -designed solutions to myriad real-world problems with accessibility and maintainability... I've been doing web-related stuff for a living since 1998, and have literally never encountered a better resource for getting the hardest part of FE dev right, using standards and building up from first principles. PS The site's examples implement layouts using HTML and CSS, and the paid version includes a Web Components implementation (trivially translated to React, or integrated / embedded w Vue).

ErikAugust 6y ago

Well, you could... take a look at article that you are commenting about.

aryonoco 6y ago

Eloquent JavaScript and the You Don't Know JavaScript series are my favourite books. Both available for free online. Depends on what you want to do. For work, yes React is king and has an absolutely huge ecosystem built around it. For fun? I'd look into Svelte, fixes a lot of the pain points of React and Vue. Also the Javascript DOM API has come a long way itself and IMO, while a library/framework is helpful if you're building a complex web app with lots of states, the great majority of websites out there don't need a framework and can be built statically with something like Eleventy.

k1m 6y ago

I'm more a back end developer myself, but have really enjoyed Vue. My recommendation would be to try a few basic intros to Vue, but try to avoid the ones that want to get you set up with a whole bunch of command-line tools to compile/pack/whatnot the project. (Those can feel quite daunting to start with, and are actually not necessary if the size of your project doesn't require it.) Just include Vue from CDN as a script tag. And if you want a jump-start with ready-made components and good styling, I can also recommend Buefy - https://buefy.org/documentation https://buefy.org/documentation - like Vue, it can also be included with a simple script tag, without any command line tools.

type0 6y ago
I like Bulma and Vue, thanks for mentioning Buefy, had no idea it existed.
- k1m 6y ago
  I think they're a great combo. Had always been scared off from modern front-end work because it seemed to involve a whole bunch of intricate dependencies and build tools. So it's been eye-opening to see just how much you can build with Vue and Bulma (with Buefy making components very easy to use). And I've not yet needed to touch npm/yarn/webpack or any of that stuff for my small projects.
- james_s_tayler 6y ago
  Buefy is my favorite. Most productive I've ever felt on frontend. But it is a little limited compared to most other component libraries, so YMMV but I really love it.
  - k1m 6y ago
    Would be interested to know what you find its limits to be, and what you'd recommend as something more flexible than Buefy.

loxs 6y ago

Whatever you choose, make sure to use strict TypeScript from the very beginning. You won't regret it.

adflux 6y ago

I absolutely love Vue, but i would think twice or thrice about using any client side framework. If you can, just use e.g. ASP.Net with Razor to create your website. Depends on what you need it to be able to do ofcourse.

vorpalhex 6y ago

Skip the frameworks, start with modern ES5/ES6, don't use babel/ts/etc initially. Modern JS is pretty clean and the native DOM methods are actually very pleasant generally. You can get really far without even needing a package manager, but eventually something like npm becomes useful if bulky.

hfourm 6y ago
Further, you will then understand why you need a framework like React should your project become complicated enough on the frontend.
- bob1029 6y ago
  There's nothing stopping you from tracking client state in a a simple window.state object. This object can be of arbitrary composition, so I see no reason you cannot manage even the most complex UI state in this manner. For me, minimal web development means doing as much as I can at the server. This includes tracking client UI state if feasible. The more stuff you have in 1 domain like that the easier it becomes to control complexity. When your state machine is split between 2 realms is when you get into traps that things like React were created to resolve.
  - twicetwice 6y ago
    I agree that if you have state in two places you're doing it wrong. That's why I keep all my state client-side (the only thing in session storage is your user ID if logged in). My server is basically just a thin wrapper around my database, providing an API for my client to call.
pvorb 6y ago
The problem is there aren't many guides for learning "vanilla" JavaScript that aim at newcomers. MDN is a good reference, but I can't think of something more directed tutorial.
- lambertsimnel 6y ago

jccooper 6y ago

Depends on what you're doing. In general, getting a handle on vanilla JS and the HTML DOM first is a good idea, as everything starts there. If you just want to make web pages move a little, you can stay there. If you want to do anything with much state or user interaction, a reactive framework becomes useful. Vue is really quite friendly. As to how to learn, I've been doing it too long to have a good recommendation. Probably read a JS book, it's a bit of an odd language with a lot of wrinkles.

mhink 6y ago

In addition to what the rest of the comments are saying: if you're talking about front-end Javascript, take the time to really learn the devtools in your browser of choice (personally I'd recommend Chrome or Chromium, but I'll grant that I don't have a whole lot of experience with Firefox.) It's basically an entire IDE right there waiting for you to use. (With a little bit of futzing, you can even use the Chrome devtools as a debugger for Node.JS, which absolutely blew my mind when I first gave it a shot.)

abraxas 6y ago

I'm in the same boat. I want to try something like Flutter to keep the JS madness at arm's length. Not sure if going that way will make it worse or better though.

ric2b 6y ago

Svelte is even simpler to learn than Vue and has the benefit of having a much smaller/simpler/more efficient runtime. As a backend dev, it's what I wanted frontend work to feel like when I started learning frontend.

chrisweekly 6y ago

Don't forget about CSS. Since it's easier to learn than to unlearn, do yourself a favor and start at https://every-layout.dev https://every-layout.dev Full access to the site / book / codebase costs $100, but the free content alone is worth more than that. Can't recommend it highly enough. Axiomatic CSS, composable layout primitives, and profoundly well-researched and -designed solutions to myriad real-world problems with accessibility and maintainability... I've been doing web-related stuff for a living since 1998, and have literally never encountered a better resource for getting the hardest part of FE dev right, using standards and building up from first principles. PS The site's examples implement layouts using HTML and CSS, and the paid version includes a Web Components implementation (trivially translated to React, or integrated / embedded w Vue).