As long as can be seen, whether app, applet, pc end, the front end is done
at the front and rear end of the separation mode, simply get data from the server, to display the page,
or the client obtains the data to the server, interaction layer and application layer
Background needed to process data will be required algorithm
algorithm investigated by logical thinking
Hands are an important part of learning: an example of each book are hands-on and implement in your browser to view the effect of
control recommended on the basis of native javascript master jQuery, proved very useful in practical work
Grunt: front-end automation tools to improve the efficiency of
less css: Excellent CSS preprocessor
bootstrap: Excellent CSS framework, the team of designers is not very good, with less effect in combination with the perfect
requirejs: AMD specification module loader, front-end modular trend indispensable tool for
Node.js: JavaScript can also do the background, the status of front-end engineers more on the step
AngularJS: Single Page Application do a good tool for
mobile end web development: popularity of smart phones make mobile traffic end is gradually catching up PC end
Javascript memory management: SPA should be noted that the long-running problem of memory leaks
Tools
chrome dev tools: front-end development and debugging tool
- Important to note that several functions:
Console (nonsense)
Elements: elements of style adjustment, it is commonly used
sources: code, add breakpoints, single-step debugging, and single-step through the process of viewing objects in memory
watch expression: View the current memory by expressions the value of the
call stack: view the call stack, open async, you can see the asynchronous call stack (this is very useful, especially when debugging ajax)
scope the variables: variable on the scope chain, very useful
network: capture view each request very important, the front and rear ends of the FBI necessary
timeline: render analysis, js various stages of execution, etc., performance optimization tool
emulation: analog mobile terminal environment, mobile page development required - Some plug-ins:
liveload: After modifying the page automatically refresh, do not press the F5
Dimensions: measured directly on the page weapon
livestyle: after css styles from the modified automatic effect, no refresh, the elements can also be synchronized to modify the code in the
image tool: measure , take color
UC-dimensional code: mobile side debugging scan code necessary
pagespeed, YSlow: page performance analysis and optimization plug-ins
make Fei like: excellent online markdown editor, fast write weekly, take notes
Mark Men: measure, check color, annotation tool, visual artwork after getting the first open software
GFW Fucker: I use Apricot, if you can buy a virtual server when the ladder
iHosts: very good hosts management software to easily modify the hosts , development and debugging necessary
Charles: packet capture analysis tool for the Mac platform is best to use the
Rythem: AlloyTeam produced agents capture software, very light weight, easy installation, mobile end (real machine) development and debugging good use
Wunderlist: a very good the Todo List, tasks, and more easily manage time demands
Language Basics
- JavaScript:
scope chain, closures, runtime context, the this
prototype chain, inheritance
NodeJS basic and common API - CSS:
selectors
browser compatibility and common hack processing
methods and principles of CSS layouts (box model, BFC, IFC, etc.)
CSS 3, such as animation, gradient, etc. - HTML:
semantic tags
Advanced
- JavaScript:
asynchronous control (Promise, ES6 generator, Async)
modular development approach (AMD, CMD, KMD, and so on)
JavaScript interpreter some knowledge
of asynchronous IO implement
garbage collection
event queue
Use common framework and principles
jQuery: selectors based framework, but personally think that can not be called framework, should be considered a tool library, because they do not have the module loading mechanism, in which the source code is very suitable for reading research
AngularJS / Avalon and other MVVM framework: focus on understanding the MVVM pattern concept and realization of two-way binding itself, how decoupling
underscore: excellent arsenal of tools to facilitate the understanding of the tools to achieve common snippets of
polymer / React: component-based development, future-oriented, component-based development to understand the principles of
CSS and HTML : The main characteristic is a characteristic of CSS3 and HTML5, as well as processes and principles browser rendering process
DOM tree, CSSOM tree, the render tree building process and page rendering process of
parsing HTML, CSS, JavaScript caused when blocked
HTML5 related to
SVG and vector principle
Canvas development and principles of animation (frame animation)
Video and Audio
Flex Box layout
icon the use of fonts
常用NodeJs的package：
koa
express
underscore
async
gulp
grunt
connect
request
Some ideas :
Responsive Web
graceful degradation, progressive enhancement
do not make me think
web usability, accessibility, the significance of which
SEO search engine optimization, understand how search engines
SPA benefits and problems
Performance Optimization:
reducing the number of requests (sprite, combo)
take advantage of caching (application cache, http cache, CDN, localstorage, sessionstorage, memo mode)
to reduce consumption selector (right to left), DOM reduction operation (DOM and the JavaScript interpreter separation)
CSS reflux and redraw
project
-
Versioning: devaluation Git, used Git will not want to use the SVN
Git: local version management mechanism of
version management mechanism for remote center: SVN -
Build Automation: mainly pre-less, templates, coffee, etc. as well as the code compression and merge
Gulp: stream-based construct, fast, good quality module
Grunt: independent task of building a slow, boring configuration, high flexibility -
Pretreatment and template engine
less: The syntax is simple, but the function is limited
jade, ejs, velocity and other template engines, each with its own strengths - caffe: python engineer favorite, I have not used -
Environment structures: The main line is mapped to the local codes, and start a local server demo, as mock analog data, a matter of opinion
home agent: ihosts -
Automated Testing: In business more stable, test events can be reduced through automated testing, but needs more time, maintenance of test cases will be very costly, may play a counter-automated test will be
Jasmine
Mocha -
Ecosystem
npm
Bower
SPM -
Build a blog of their own
git Pages and the
HEXO
Jekyll
future
- Web Componets: future-oriented component-based development approach
HTML template
Shadow the DOM
Custom Elements
HTML Import - Native mobile terminal development: this is the need to know, after the front-end engineers will often deal and webview, but also understand the native development
Other
something not test code will be able to knock things right,
- For business thinking: I personally very lacking in this area, so on the front, before knocking code to think more about business
- Communication and interpersonal skills: this is very important, front-end also need to deal with project managers, product, interaction, background, poor communication can lead to a lot of wasted effort, delaying the project
- Knowledge management, time management: the balance of input and output, output is the best input. How to Share, community involvement, good communication, make records
- Desire for new technology, and the courage to try
Primer
Started by assiduously, but a lot of things on the books are outdated, while assiduously, we must also continue to focus on new developments in technology.
"JavaScript Advanced Programming": can be used as entry-books, but also the advanced books, you can quickly absorb basis, until the upgrade and then come back again to see
"JavaScript Definitive Guide": not suitable for beginners, but necessary, I do not understand where to go to view look, very helpful
"writing maintainable JavaScript"
"JavaScript DOM programming art" must-read for learning JavaScript and DOM development.
"Node.js Developer's Guide": Nodejs good introductory books
"in layman's language Node.js": Nodejs advanced books, must have
"JavaScript Asynchronous Programming": JS understand the concept of asynchronous programming
"JavaScript mode" and "JavaScript Design Patterns": JavaScript code and design modes, will develop a paradigm shift to JavaScript, a very good book
"JavaScript framework design": with wheels at the same time, it should know is how the wheels turn up to explain in great detail, from the source to explain the level of each frame realize part of the existing framework with a reading, you can learn a lot
"Don`t make me think": web design concepts, understanding of user behavior, very good
"CSS Zen garden": a work of enduring also passed web design concepts and issues that need attention in the design of
"high-performance JavaScript" and "high performance HTML5": emphasis on the performance of the book, which is not only to optimize performance, there are many things worth learning principles level
"HTML5 Canvas core technology": I was reading a book, for the use of the canvas to achieve the animation, and the development of animation framework are very helpful
"HTTP Definitive Guide": HTTP protocol related essential, front-end development and debugging time which will often involve knowledge
"responsive Web design": the technology itself is not difficult, it is important that the concept of responsive web design, as well as the idea of moving ahead
"JavaScript language essence": Road book, but also popular JavaScript development thinking of a good book, very suitable for entry
Some good sites
- GitHub : nothing to say, more than reading someone else's source, multi upload your own source code, learn from Daniel around the world
- codepen : beautiful feeling the front end of the mandatory land, there are a lot of cool effects and excellent plug-ins
- echojs : quickly learn new information website js
- stackoverflow and segmentfault : Basically all kinds of problems can be answered in the above
- Web Fundamentals Google : suitable for reading each article carefully
- Files static : open CDN, very good use
- IconFont : Ali vector icon library, very good, CDN support and project support
- Rocks html5 : a nice site, many new features of the browser, and cutting-edge technology, the article can be found in it
- Tricks CSS : How to utilize CSS, CSS and understand the new features, here to meet you
- JavaScript Secret Garden JavaScript beginner must-see, very good
- w3cplus : a front-end learning site, inside the article are all very good quality
- School node : The node a good learning site
- git Branch Learn : git a learning site, great interaction
- Luandun the front : a front-end article sharing community, there are many excellent articles
- Regular Expressions : A regular expression introductory tutorial, well worth a look
- Ruan Yifeng's blog and Zhangxin Xu's blog : Learn some quick shortcut to knowledge, but if you need to dig deep, but also other resources
- Brightest Daniel's blog: There are full of knowledge on almost
- Norms official website, do not know how to read the time specification
Positioning the front end of
front-end technology advances, the more spread wider the range, the standard has become increasingly diverse, it seems that any one of the tentacles can extend very far. How to locate a suitable front-end?
User and website links, users experience the creator
whether you start from the interaction design, or from the performance optimization, improve workflow or enhance workflow efficiency and ultimately to create and enhance the user experience, will eventually be reflected in this is up to the user experience.
Now the front-end engineers do a certain stage will inevitably be exposed to a lot more than cut the page, to achieve visual requirements, achieve a deeper interaction and other problems, such as front-end automation, graphics programming, performance optimization, etc., and then further push point is that PHP / JSP / ASP / nodeJs,
now with the evolution of front-end architecture may allow you to write code for the back end of the template, need to use back-end language (PHP / Java / C #, etc.), which is called the big front-end (which is however positioning the front end is not the departure from the large front-end processing is still in contact with the part of the user, is still optimizing the user experience). Probably the most common or the most talked about is the node, in fact, these types of technology selection can, bat three more with PHP is said Baidu, Ali node with more.
Yu Bo mentioned the so-called full end is horizontal in his blog, the whole stack is vertical. Full end that all terminals that white is the front end, as are related to the user experience, and user in direct contact. Adapt to the development of multi-terminal, asking you on the basis of the web front-end, we may have to expand knowledge and develop ios android development, and good development because the popular hybrid approach, using native language skills development will require not so deep .
