This article is part of my Web front-end primer and best practices.
A few days ago, I accidentally received a big private letter from an editor of a publishing house, inviting me to sort out and publish a book on front-end aspects. After making sure that I would not be killed even if I could not sell one book (although I would definitely buy at least one, or buy more to replace that), I started to prepare specific chapters of the outline. The author is still very scared, after all, their own water knows. This article is an outline for the book, but it’s also a learning roadmap for modern front-end developers that I have in mind. Even if it doesn’t end up in print, I’ll put it together quietly in the hope that it will help.
However, since there are so many probability of publication, we also welcome all greatly to give advice, for the selection of chapter content, chapter catalog order, we think also want to talk about the content can be welcome to leave a message or email: 384924552@qq. React front-end engineering Roadmap The React front-end engineering roadmap In addition, I received a New Year’s speech invitation a few days ago. Although I have been badly prepared for my graduation thesis and project these days, anyone who is interested is welcome to come and have a look at it. I will tell you a joke.
preface
This book is a summary of my five years of practice in the field of front-end engineering that I hope will be useful to developers of all levels. The central goal of the book:
-
It is hoped that inexperienced developers can quickly become a qualified modern front-end developer on the shortest path chosen in this book. Each section explains the basic syntax or usage points, but does not go into long syntax details. After a quick start with simple examples, the author will introduce many specific practices in the project. It may not be possible for a beginner developer to understand the meaning or value of these practices, but first make sure they work, and then reflect on them in your own practice.
-
For developers with some front-end development experience, this book can help you sort out the complicated situation of modern front-end development, explore the design concepts and programming paradigms hidden behind the blooming tool library, and finally integrate them into your own front-end engineering ideas and systems.
The biggest advantage of this book is that it forms a complete knowledge architecture, allowing you to properly summarize the knowledge you have learned and put it in its place. React, Vue, and Angular2 are all good front-end frameworks, and it’s still a matter of art. Although the book is based on React, the design patterns and engineering architectures contained in it can be applied to any framework. I also try not to be bound too much by a specific framework, after all, in this ever-changing front-end world, it may fall behind one day.
sequence
The first part of the initial peep door path, see the mountain is a mountain
The front-end based
Hyper Text Markup Language
HTML Syntax Basics
Semantic HTML
H5
CSS
CSS Syntax Basics
The box model
Grid layout based on Flexbox
SCSS
CSS Engineering Practice
JavaScript
JavaScript Syntax Basics
This chapter briefly introduces the basic syntax of JavaScript, including the development process of JavaScript/ECMAScript language, basic variable definition, variable assignment, variable scope, judgment and conversion of common types and formats.
JavaScript data structure
This section contains operations and explanations for basic numeric types, string types, time and date types, and array types.
JavaScript control flow
JavaScript function
JavaScript classes and objects
This section covers the use of classes in JavaScript and the writing of common singleton patterns.
DOM
Element selection and manipulation
Incident response
Ajax
Client storage
Simple web design specifications
This section will apply the above HTML, CSS, and JavaScript knowledge to a step-by-step web site beautification example.
Common front-end tool library
jQuery
JQuery based
JQuery tips
jQuery Plugins
You don’t need jQuery
Lodash
Lodash basis
You don’t need Lodash
Pattern Library
jQuery UI
BootStrap
Webpack
Webpack syntax basics
Common Webpack plug-ins
Webpack code segmentation
Webpack
Chapter three Preliminary study on React
Data flow driven pages
This part mainly introduces the design idea of React, the change from imperative programming to declarative programming, and the comparison of the same function implemented by jQuery and React.