A Beginner’s Guide to Front‑End Development in 2017

Assuming I Want to Enter Web Front‑End Development This Year

The term "web front‑end" is used because many iOS and Android projects now adopt a "big front‑end" approach, largely driven by the rise of React server‑side rendering and the blending of native and web technologies.

What People Traditionally Think of Front‑End

Old‑school : Photoshop slicing.

Newbie : Adobe Dreamweaver coding.

Lazy : UltraEdit, Notepad++.

Even experienced developers can make careless mistakes if they skip IDE error‑checking, so always use an IDE’s linting and debugging features.

Current Challenges in China

Outdated browser kernels are still a problem. Some high‑end phones ship with a 2003 WebKit version, Android browsers may be stuck at Chrome 35 for a year, and many shell browsers (UC, Baidu) merely wrap the system kernel without real performance gains.

Recommended Editors

ATOM : Currently popular.

Sublime Text : Good, paid but not forced.

VSCode : Core plugins are solid, third‑party extensions update slower.

Project Engineering

Avoid Meaningless Errors

Front‑end engineering is becoming mainstream, but it is still in an early stage and not very beginner‑friendly. You now need a local server (localhost) instead of double‑clicking HTML files, which often leads to CORS errors like "XXXXX is not allowed by Access‑Control‑Allow‑Origin".

Node.js tools such as Browsersync and webpack‑dev‑server make setting up a local development environment easy, provided you have Node installed.

Front‑End No Longer Writes Plain HTML/CSS/JS Directly

Modern workflows compile source files written in languages like Less, SCSS, or TypeScript into browser‑compatible assets. The "triad" of CSS, HTML, and JS is often generated by build tools.

Example of Less code:

.foo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .bar {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        &:hover {
            color:red;
        }
    }
}

Compiled CSS output (excerpt):

.foo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.foo .bar {
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
  -moz-box-flex: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-flex-basis: auto;
  -ms-flex-preferred-size: auto;
  flex-basis: auto;
}
.foo .bar:hover { color: red; }

Using compilers for CSS, HTML (Pug/Jade, HAML) and JavaScript (TypeScript, CoffeeScript) dramatically improves productivity and reduces errors.

Large Projects Require an MV* Architecture

With the rise of Ajax, RequireJS, and Node.js, front‑end projects have become complex and demand a clear module system. Popular MV* frameworks include Angular 2, Vue.js 2.0, React, and React‑Native.

Note: MV* refers to MVC, MVP, MVVM, etc.; understanding the exact definitions is not essential.

Vue 2 and its ecosystem are especially recommended.

Development Directions

Two Main Front‑End Paths

Interaction‑focused

Data‑focused

The interaction path is challenging but in high demand; it includes WebGL, VR, and related libraries such as Three.js, A‑frame, and eventually Unity 3D. Learning WebGL first is advised.

The data path is the mainstream route, covering MV* frameworks, Node.js middleware, and big‑data visualization (e.g., D3.js). Learning to build Progressive Web Apps (PWA) and WeChat Mini‑Programs also adds value.

Career Environment

Current hiring conditions are favorable for front‑end beginners, as legacy browsers (IE6‑8) are largely abandoned. Modern tools simplify development, though initial setup can be cumbersome. Network restrictions may affect npm installations; using cnpm (npm.taobao.org) or configuring proxy variables can help.

Example proxy configuration for macOS:

export http_proxy="http://127.0.0.1:1087"
export https_proxy="http://127.0.0.1:1087"

And for Windows CMD:

set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080

Summary of Essential Frameworks / Skills

Deploy a Node.js environment (webpack, Babel, Gulp, PostCSS plugins)

CSS preprocessors: Less, SCSS

HTML templating: Pug, HAML (optional)

JavaScript: ES6, ES7 (with Babel for compatibility)

Web Components (optional)

One MV* framework (Vue.js or React) is required

Hot‑fix technologies (e.g., Alibaba’s hot‑fix) are emerging but should be used cautiously.

Other Remarks

Angular 2 has a steep upgrade path; Vue 2 is more approachable. jQuery is not dead—it is being absorbed into native browsers, and resources like youmightnotneedjquery.com help transition away from it.

For interaction‑focused work, learn AE + bodymovin, SVG, Sketch, and keep an eye on WebGL developments.

Whatever path you choose, remember to stay true to your original purpose.

Source: Hujiang UED, a continuously learning design team.