5 ms·

I was in a similar position two years ago. Best advice I can give is to just build a full-stack website with JS on front and back. Make sure you get your toolin

I was in a similar position two years ago. Best advice I can give is to just build a full-stack website with JS on front and back. Make sure you get your tooling set up so you can use ES6, and then just focus on building what you want. I would recommend using create-react-app for frontend as it sets up all the tooling for you and is production ready. On backend, I would recommend parse-server but I just have a personal affection for its batteries-included approach. You could also just use a simple node/express setup (and/or mount parse-server onto it). Three major things that might trip you up, and you should read about and practice early: - Async programming / closures. You can't just call a function on an object in a loop like you can in Python. - Promises. Figure out how to use these instead of callbacks as soon as you can. - Prototypical inheritance. I recommend explicitly writing "classes" with the "old style" of YourClass.prototype.method before moving to using the "class" keyword. The "class" keyword is just syntactical sugar on prototypical inheritance so it's a good idea to learn the raw form before the sugared form. Recommended reading: - "You Don't Know JS" (https://github.com/getify/You-Dont-Know-JS/blob/master/README.md https://github.com/getify/You-Dont-Know-JS/blob/master/READM...) - Source code. Read the source code of as many JS projects as you can find.

alibarber 9y ago
Thanks - those types of tips were exactly what I was looking for. I've had an idea for a webapp brewing on the side but wasn't sure how best to jump in, and also the main things to look out for when learning something new.
lhlmgr 9y ago
thanks for that! it was an instant-star. However, my approach was to start with an more-or-less small project with react / redux / typescript. In the beginning it was a pain, but now it works.. mostly.
reacweb 9y ago
Do you think he should use typescript or javascript? Would typescript slow down learning or help learning?
- drinchev 9y ago
  Definitely it will slow down learning, but most of all you will be quite confused in the end, what is JavaScript and what is TypeScript.
- rhacker 9y ago
  If he's coming from typed languages he should definitely learn Typescript or at LEAST Javascript with Flow.
  - chatmasta 9y ago
    I wouldn’t touch TS until I had an understanding of JS. The many libraries without typings will just make things confusing IMO.
sametmax 9y ago
+1 for You Don't Know JS. But the rest is a bit "all or nothing" isn't it ? React is a huge bite for a start, espacially since you need webpack. How about something lighter first, like Vue.js ? Once you get how it works, you can up your game and go to React (+ webpack + Mobx, don't try redux at first it's too much) or Angular 2. As for the backend, you can stay in Python first and do a rest API. Then once you get the front right, write a backend using node AND a framework. Do not attempt to pure JS first, it's like doing web Python without django or flask. Possible, but not worth it. ExpressJS is close to flask in philosophy, except for the asynchronous part. If you really want to have fun though, checkout crossbar.io. It's a Python router than allow very easy PUB/SUB and RPC between clients. Clients can be written in JS, Python, Java, C#, etc. You can even write JS clients in the browser, making push notifications and other real time feature a breeze. It's a good way to give you motivation to try on JS: mix it with what you know, and try a new exciting technology. Plus a good way to see the difference between async in JS and in Python.
- chatmasta 9y ago
  All good points. Some counters: - Re: React. I actually disagree with this given that OP is an experienced programmer. The react API is very, very simple to learn but difficult to master. The forced conventions are good for productivity. If you use create-react-app, I don't see any reason to put off learning it until later, but of course you should start with the JS basics before installing react. I'm not sure vue would be better; in fact it might be worse as a first experience, just because there is far less documentation / community / ecosystem around it. - Re: python backend. That's fine, but if the goal is to learn JS, you're not learning much by writing the backend in Python are you? Nice tip on the crossbar.io, I'm going to check that out.
  - paultopia 9y ago
    Disagree slightly with the point about far less documentation/community/ecosystem on Vue. The Vue documentation is stunningly amazing---probably the best out-of-the-box documentation I've ever seen for a library, and that really makes it vastly easier to learn than its competitors.
  - 9y ago
EastLondonCoder 9y ago
Brilliant recommendations. I would like to add learning redux as soon as possible is a good thing.
- adamsea 9y ago
  I would say yes and no. Closures, prototypical inheritance, etc, i.e. the language basics are all are really helpful to understand and be comfortable before using redux. Also, if the OP isn't using React.js then Redux may not be appropriate. That said, yeah, if you are using React.js you should definitely learn and use redux.
  - acemarke 9y ago
    I'm a Redux maintainer. We generally recommend learning React first before trying to learn Redux, if only to minimize the number of new concepts you're dealing with at once. And yes, the more comfortable you are with actually using JS, the better you'll be at both React and Redux. It's worth noting that Redux is not tied to React, and can be used with any UI layer (Angular, Ember, Vue, vanilla JS, etc).
adamsea 9y ago
Agree with all of the above. ES6 is great, as is (imho) using Javascript in a functional-programming style. And, 100% avoid the "class" keyword. When I was learning node.js I used "learnyounode", a terminal-based game/learning program. It was great. It had lessons which appropriately increased in difficulty, code examples, and guidance on which documentation to peruse in order to complete the coding assignments (each of which was a tiny application). There's one for Javascript too. They are both here: https://github.com/workshopper https://github.com/workshopper Learning to understand closures and the "this" context (including prototypical inheritance) can take a bit, but is extremely useful and important. Related to the above, learn the Javascript "module pattern" design pattern. When you get to the appropriate point, the source code of Redux is fairly simple and clearly written: https://github.com/reactjs/redux/tree/master/src https://github.com/reactjs/redux/tree/master/src "Secrets of the Javascript Ninja" is an older book but a good one. So is "Javascript: The Good Parts."
hannofcart 9y ago
In my opinion, prototypal inheritance does not belong in the same league of importance as closures, async programming, promises in the "modern JavaScript" ecosystem. In fact, I'd replace it with generators.
btilly 9y ago
Async programming / closures. You can't just call a function on an object in a loop like you can in Python. Actually if you're willing to use https://github.com/scopsy/await-to-js https://github.com/scopsy/await-to-js as a transpiler, and await/async on the back end in node, then you actually CAN just call a function in a loop like you would in Python, modulo a tiny amount of decoration that is pretty similar to how you'd do it with Twisted.
chrismeller 9y ago
Why would you ever recommend against using actual ES6 classes? Not only is it the new standard, he’s coming from Java... TBH, the only reason that seems to make sense is some kind of weird “I knew JavaScript before it had classes!” kind of sentiment that wouldn’t actually teach him anything of value.
- thinkxl 9y ago
  Prototypal inheritance plays a huge role in understanding the language because JavaScript uses it for everything. It might be a good idea to learn about this before using ES6 classes; remember that ES6 classes are syntactic sugar on top of prototypal inheritance anyway. They wouldn't learn legacy patterns, but the actual pattern that JavaScript uses.
  - chrismeller 9y ago
    I grant you that it plays (or at least played) a huge part, but as things move towards ES6 classes (which are very similar to every other language with classes), I would still argue that you’re insisting upon learning prototype inheritance for no real reason.
    - thinkxl 9y ago
      You are missing the point; if you use JavaScript, you use prototypal inheritance whether you like it or not, e.g.: function getUser() {} That is creating an instance of the `Function` constructor object[1][2]. In a Classical (as classes) language, you would see that like this: // `Function` being a class function getUser extends Function {} but because JavaScript is purely prototypal, this works differently. You say that there's no reason to learn prototypal inheritance, well, the only and valid reason is that to write at least decent JavaScript you have to understand how it works behind the scenes. * [1] - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... * [2] - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... Edit: add links

alibarber 9y ago

Thanks - those types of tips were exactly what I was looking for. I've had an idea for a webapp brewing on the side but wasn't sure how best to jump in, and also the main things to look out for when learning something new.

lhlmgr 9y ago

thanks for that! it was an instant-star. However, my approach was to start with an more-or-less small project with react / redux / typescript. In the beginning it was a pain, but now it works.. mostly.

reacweb 9y ago

Do you think he should use typescript or javascript? Would typescript slow down learning or help learning?

drinchev 9y ago
Definitely it will slow down learning, but most of all you will be quite confused in the end, what is JavaScript and what is TypeScript.
rhacker 9y ago
If he's coming from typed languages he should definitely learn Typescript or at LEAST Javascript with Flow.
- chatmasta 9y ago
  I wouldn’t touch TS until I had an understanding of JS. The many libraries without typings will just make things confusing IMO.

sametmax 9y ago

+1 for You Don't Know JS. But the rest is a bit "all or nothing" isn't it ? React is a huge bite for a start, espacially since you need webpack. How about something lighter first, like Vue.js ? Once you get how it works, you can up your game and go to React (+ webpack + Mobx, don't try redux at first it's too much) or Angular 2. As for the backend, you can stay in Python first and do a rest API. Then once you get the front right, write a backend using node AND a framework. Do not attempt to pure JS first, it's like doing web Python without django or flask. Possible, but not worth it. ExpressJS is close to flask in philosophy, except for the asynchronous part. If you really want to have fun though, checkout crossbar.io. It's a Python router than allow very easy PUB/SUB and RPC between clients. Clients can be written in JS, Python, Java, C#, etc. You can even write JS clients in the browser, making push notifications and other real time feature a breeze. It's a good way to give you motivation to try on JS: mix it with what you know, and try a new exciting technology. Plus a good way to see the difference between async in JS and in Python.

chatmasta 9y ago
All good points. Some counters: - Re: React. I actually disagree with this given that OP is an experienced programmer. The react API is very, very simple to learn but difficult to master. The forced conventions are good for productivity. If you use create-react-app, I don't see any reason to put off learning it until later, but of course you should start with the JS basics before installing react. I'm not sure vue would be better; in fact it might be worse as a first experience, just because there is far less documentation / community / ecosystem around it. - Re: python backend. That's fine, but if the goal is to learn JS, you're not learning much by writing the backend in Python are you? Nice tip on the crossbar.io, I'm going to check that out.
- paultopia 9y ago
  Disagree slightly with the point about far less documentation/community/ecosystem on Vue. The Vue documentation is stunningly amazing---probably the best out-of-the-box documentation I've ever seen for a library, and that really makes it vastly easier to learn than its competitors.
- 9y ago

EastLondonCoder 9y ago

Brilliant recommendations. I would like to add learning redux as soon as possible is a good thing.

adamsea 9y ago
I would say yes and no. Closures, prototypical inheritance, etc, i.e. the language basics are all are really helpful to understand and be comfortable before using redux. Also, if the OP isn't using React.js then Redux may not be appropriate. That said, yeah, if you are using React.js you should definitely learn and use redux.
- acemarke 9y ago
  I'm a Redux maintainer. We generally recommend learning React first before trying to learn Redux, if only to minimize the number of new concepts you're dealing with at once. And yes, the more comfortable you are with actually using JS, the better you'll be at both React and Redux. It's worth noting that Redux is not tied to React, and can be used with any UI layer (Angular, Ember, Vue, vanilla JS, etc).

adamsea 9y ago

Agree with all of the above. ES6 is great, as is (imho) using Javascript in a functional-programming style. And, 100% avoid the "class" keyword. When I was learning node.js I used "learnyounode", a terminal-based game/learning program. It was great. It had lessons which appropriately increased in difficulty, code examples, and guidance on which documentation to peruse in order to complete the coding assignments (each of which was a tiny application). There's one for Javascript too. They are both here: https://github.com/workshopper https://github.com/workshopper Learning to understand closures and the "this" context (including prototypical inheritance) can take a bit, but is extremely useful and important. Related to the above, learn the Javascript "module pattern" design pattern. When you get to the appropriate point, the source code of Redux is fairly simple and clearly written: https://github.com/reactjs/redux/tree/master/src https://github.com/reactjs/redux/tree/master/src "Secrets of the Javascript Ninja" is an older book but a good one. So is "Javascript: The Good Parts."

hannofcart 9y ago

In my opinion, prototypal inheritance does not belong in the same league of importance as closures, async programming, promises in the "modern JavaScript" ecosystem. In fact, I'd replace it with generators.

btilly 9y ago

Async programming / closures. You can't just call a function on an object in a loop like you can in Python. Actually if you're willing to use https://github.com/scopsy/await-to-js https://github.com/scopsy/await-to-js as a transpiler, and await/async on the back end in node, then you actually CAN just call a function in a loop like you would in Python, modulo a tiny amount of decoration that is pretty similar to how you'd do it with Twisted.

chrismeller 9y ago

Why would you ever recommend against using actual ES6 classes? Not only is it the new standard, he’s coming from Java... TBH, the only reason that seems to make sense is some kind of weird “I knew JavaScript before it had classes!” kind of sentiment that wouldn’t actually teach him anything of value.

thinkxl 9y ago
Prototypal inheritance plays a huge role in understanding the language because JavaScript uses it for everything. It might be a good idea to learn about this before using ES6 classes; remember that ES6 classes are syntactic sugar on top of prototypal inheritance anyway. They wouldn't learn legacy patterns, but the actual pattern that JavaScript uses.
- chrismeller 9y ago
  I grant you that it plays (or at least played) a huge part, but as things move towards ES6 classes (which are very similar to every other language with classes), I would still argue that you’re insisting upon learning prototype inheritance for no real reason.
  - thinkxl 9y ago
    You are missing the point; if you use JavaScript, you use prototypal inheritance whether you like it or not, e.g.: function getUser() {} That is creating an instance of the `Function` constructor object[1][2]. In a Classical (as classes) language, you would see that like this: // `Function` being a class function getUser extends Function {} but because JavaScript is purely prototypal, this works differently. You say that there's no reason to learn prototypal inheritance, well, the only and valid reason is that to write at least decent JavaScript you have to understand how it works behind the scenes. * [1] - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... * [2] - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe... Edit: add links