Web development is fun~ but Javascript is... daunting.
Everything else in web development is very simple for you, but when you delve into Javascript, you will feel "everyone is awake and you are alone", as if you don’t know some important things that everyone else knows. The basic knowledge content, and these content can help you understand all the knowledge.
The fact is, it is true, you have missed some important pieces of the problem solving.
Moreover, front-end development has indeed entered a crazy state.
It's not just you.
Pulled a chair and sat down. It's time to start writing Javascript applications.
The first step is to set up a local development environment and run through it. So use Gulp? Or Grunt? Wait, ok... there seems to be an NPM script!
WebPACK? Or Browserify? (Shy) Require.js? Upgrade to ES6? Or add Babel support to your project?
BDD or regular unit testing? What assertion framework should be used? Running tests from the command line is obviously great, so is PhantomJS also a good choice?
Angular or React? Or Ember? Backbone again?
You read some React documentation, "Redux is a predictable state container for Javascript applications." Cool! You definitely need one of them.
Why is building Javascript applications so crazy? ! ?
Let me tell you why this is so crazy. Let's start with an example, and there will be beautiful pictures later.
This is React's "Hello, world!" application.
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
More than these.
$ npm install --save react react-dom babelify babel-preset-react
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js
In fact, there are still a few steps missing, such as installing browserify and letting it run on the web page after you have done it, because this will not directly generate a web page with any content.
After completing this, you finally need a file called bundle.js, which contains the new React Hello World application, which has 19374 lines of code. And you only need to install browserify, babelify and react-dom, they will help you generate thousands of lines of code that you don't understand, think about it.
So it basically looks like this:
Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1
— Thomas Fuchs (@thomasfuchs) March 12, 2016Well, let's write a Hello World application with simple Javascipt code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Hello World</title>
</head>
<body>
<div id="container"></div>
<script>
document.body.onload = function(){
var container = document.getElementById("container");
container.innerHTML = '<h1>"Hello, world!"</h1>';
}
</script>
</body>
</html>
That's it. A total of 18 lines of code. You can copy/paste it into the index.html file and double-click to load it into your browser. Get it done.
At this point you will definitely say: "Wait, React can do more things than the gadget you just wrote, and you can't write a Javascript application that way!" (in most cases) you are right Yes, but you still have to take a small step to understand why everything is crazy.
Below is the picture I promised.
Most Javascript web applications you develop will fall somewhere in the middle of the bell curve. It will definitely be in the middle part. If you start with a complete React stack, you have over-engineered your application from the beginning.
This is why everything is going crazy. Most of the tools you think are necessary for you to solve the problem, but you have not encountered such a problem, and you will never encounter it in the future.
The same picture:
Because by default, everyone over-designs their applications, but they don't realize this, making the state of Javascript development too cumbersome.
How should you start a Javascript application? Should I use tools like React or Angular? Should I use a package manager? If you don't do this, what should you do? Is the test necessary? Should Javascript be used to generate the logo? All of these are questions you should ask yourself, before launching the massive technology stack by default.
When you start a Javascript application, the key is to pick a point on the bell curve that is just in front of the level of complexity you think the application may eventually reach.
I will not lie, it takes experience to verify all of this. But here is a nice point that allows you to start most Javascript applications: jQuery plus client-side templates, and a super simple build tool for connecting and reducing product files (if your back-end architecture has not already done so) ).
If you know how to build Javascript applications correctly, then you will begin to understand how, when and why to use frameworks or npm/requir/webPack or ES6, when to write tests, and when to bother to make your tests run locally, When running in the browser, all these problems will be solved.
Interested in filling those gaps with your Javascript development knowledge? Want to avoid feeling overwhelmed? Want to avoid over-designing your Javascript application during this development process? That's what I will focus on next month, so stay tuned, there will be more dry goods coming in a week or two!