One of the correct ways to start JS projects in 201721 Dec 2016
I choose to use
create-react-app, then use ES2016 standard to write
react to build the UI and use
redux to manage the data, and write
flexbox to manage layouts in CSS, if I am going to start a completely new general-purposes front end project in early 2017.
This post only expresses my current opinion and suggestions and I am not responsible for any potential lost or profit for any readers. And moreover, I respect any developers or companies trying to make the community and the world better.
It’s in late 2016 and year 2017 is coming when I am writing this post. Many new learners in front end development are confused of a bunch of different concepts:
babel.js to transform new-style JS code into old style. No other community frequently do that (For example, new compilers for latest C++ / Java standard, separated codebase for Python (or sometimes
left-pad caused tons of package broken in early 2016. Latest
babeljs splits itself into small plugins compared with old versions to “reduce unnecessarily large downloads”. Oh, ES2015 eventually invent a new official module system, “combining the benefits of
require() and AMD”, and later
System.js was invented to “load any module format”. I could only think of the famous xkcd #927 for this situation.
I sincerely wish front end development could become easier in one or two years.
what are those concepts
HTML5 is the newer standard for HTML. Basically, it provides more markups and APIs.
CSS3 is the newer standard for CSS, providing new features like round corners and flexbox.
npm. On client side, people used
Bower to manage packages in old days, but now
npm manages packages on both server side and client side.
For task management, people used
npm. Nowadays people like to use
npm directly, or use
npm as the entry to many task scripts.
webpack are “package loader”. Now many people choose
webpack. “Package loader” can do many preprocess things, like loading packages, transforming language, “bundling” scripts, compressing outputs. As a result, many developers actually invoke some webpack scripts inside
babel is an amazing library transforming new-style JS to old style for capability reasons. People usually invoke babel as one step in webpack commands.
AngularJS 1 and
AngularJS 2 and
VueJS are front end libraries or frameworks. People tend to not use
jQuery in large applications any more.
d3.js is super awesome for data visualization.
react is Viewing library developed by Facebook.
AngularJS 1 and
AngularJS 2 are the front-end frameworks developed by Google, while they share different versions and same name, they are kind of very different in design.
VueJS is another framework.
Angular aim to solve different things: the former is just a view library (View in MV*) and the latter tries to provide whole-stack solution (MVC or MVVM) but people like to compare them.
react is super easy but it should be combined with other things like
redux to provide full front end solution, while
AngularJS is already full solution but has a steep learning curve.
fetch is a new API and better replacement for
react is a syntax sugar. But we need
babel or other things to transform it into normal JS.
what to choose
One old-style popular way was using
jQuery to send AJAX calls and receive data, then manipulate the DOM. It might still be a good choice nowadays, but, on the one hand people use the “standarized” APIs abandoning the old browsers, so
jQuery as the combability layer might be less necessary, and on the other hand people gradually think “manipulating DOM directly is bad”, so people invent other libraries / frameworks to think differently.
react is a view library, designed behind the totally different idea compared with that’s behind
jQuery. I recommend everyone give it a try, because it has a smooth learning curve, helps building efficient UI efficiently, and plays an important role in front end development currently.
react is not the only choice, but it’s more natural to developers who don’t come from Java world (yes, I am looking at you,
And, after choosing
react, we only have the tool for displaying data, then (unfortunately) we need other things to “manage data” in the front end. Here comes
redux, which is one of the best companions with
By developing front end projects nowadays, developers usually need a whole “building toolchain”. Like what I explained above, they are so confusing. Here is one choice: use
webpack to “bundle” (pack) all the code, meanwhile using
babel to transform ES2016 codes and codes using new APIs into the old-style code that could be run on most browsers; also open a local webserver for debugging, which may support “hot reloading”. Setting up these from scratch, in my opinion, is surprisingly annoying and time consuming.
Then here comes
create-react-app. Once again, it’s not the only choice. But it’s officially supported by Facebook and has some sort of minimal configuration design. Once
npm install, we could directly write modern JS (and HTML and CSS) code and the scripts would take care of the build process later.
where to start?
Basic understanding of HTML, CSS, JS (easy). Some sort of new HTML tags, some new CSS styles, and how the modern JS codes are written (easy to know, not easy to write). Then know what AJAX /
fecth is, those are very important for dynamically loading data in web (easy in concept), and how JS deals with async codes (hard to understand). Then
redux and other new worlds (once you know the fundamentals,
react is easy,
redux is not easy,
Angular is hard).