Fast forward to 2018
“Modern” JS development for dummies
Of course things are not that easy for dummies. You have nodejs, npm package manager (or shall I use yarn?). Should I learn AngularJS, ReactJs, Redux, Webpack, Gulp, Vue.js, Grunt? You can easily fall into the trap of choosing the right tools, frameworks and workflows, spending hours on watching youtube videos and reading documentation, while not implementing a single line. The thing is - it does not matter. Keep it simple, implement first version using technologies you know or you can learn easily and finish it as soon as possible. Then you will encounter problems like deployment, which you can solve using existing technologies. So start with stupid solutions and enhance it over times.
First thing - use and learn jQuery. The DOM API (especially old parts like
getElementById) is horrible and jQuery have nicer and easier to use API. Plus all you need to use jQuery is to add
scr="https://code.jquery.com/jquery-3.3.1.slim.js" to your HTML and it works. You can get nicer looking code with a minimal effort
Sadly there are things jQuery is not compatible with modern API like needed for
arraybuffer type for
XmlHttpRequest. Fortunately you can combine it with native browser APIs (unlike ReactJS which builds own Virtual DOM). Which is important in case you’re junior and exploring the world.
Avoid nested code
- You need to use
XmlHttpRequestto download your database file
- THEN you can instantiate database and send first request to worker
- THEN is your application ready
And while this is trivial to write in traditional environment,
XmlHttpRequest is asynchronous, so all you know if that you’re ready when callback is called.
console.log and browser’s REPL
Can’t emphasize how great tool is
console.log. It does not work like Python or similar REPL printing strings. Browser will deal with logged things like with objects, so all the structure become visible to you immediately. This is very powerful tool, especially for novices in the field.
This becomes extremely important when you’re dealing with a relatively simple tasks, like how to iterate through
Map in the language.
Kinkip: The result
Logo by pxhere: [https://pxhere.com/en/photo/1267185]