Frontend Development
Idea
Intro
Frontend development is intuitive, you need to use your eyes and hands to adjust the style. Different from the backend, the frontend requires you to have full imagination and design ability. You need to build a page that meets the application scenario, meets the functional requirements of the application, and makes the user's vision feel comfortable. At the same time, you need to be responsible, because you need to do your best to satisfy users and make more elegant animations.
Just like you don't like a shabby website, we need to make the site style eye-catching so more users are willing to stay here and become our loyal users.
Technology Stack
The frontend has a perfect ecology, so its technology stack development is faster. We should pay attention to current affairs and learn more about new technology stacks. Being obsessed with old tech stacks is not good for your personal development ability, although they usually have higher stability and better ecological environment.
We must follow the pace of the times. Learn, create, and contribute new technologies to build a better ecosystem for the frontend.
Environment
Software for Develop
As a front-end developer, I recommend WebStorm to you. This is a professional IDE for frontend development created by JetBrains, which is suitable for the development and maintenance of large-scale projects. It helps you learn front-end development techniques quickly and broaden your skills.
WebStorm is an integrated development environment for JavaScript and related technologies. Like other JetBrains IDEs, it makes your development experience more enjoyable, automating routine work and helping you handle complex tasks with ease.
Code Hosting
According to the company's internal regulations, the company code must be hosted under the GitHub account Ungine-Tech which is belonged to our company.
The authority of the repository can be decided according to the project leader, and the creation and maintenance of the repository must be the responsibility of the leader or senior management of the company.
Dependencies
We now use Yarn for frontend dependency management.
A complete replacement to use pnpm is already under consideration.
Framework
We follow in the footsteps of the times and use advanced frontend frameworks as much as possible.
Typically, we use the following three basic frameworks:
Some derivatives are also worth using：
Since the SEO quality of SPA applications is difficult to guarantee, we usually use a framework with server-side rendering functions such as Next.js to build the project homepage.
Since the majority of developers in the company use React, we usually use React more for building large front-end programs.
Scaffold
For some small and medium-sized frontend projects, we will directly use scaffolding:
For large frontend projects, we may make modifications based on the configuration of the scaffolding or directly build the application ourselves.
When creating a project, you can use the following methods:
# Basic
yarn init
# For react app
yarn global add create-react-app
yarn create react-app --template typescript
# For next.js app
yarn global add create-next-app
yarn create next-app --typescript
Language
For project maintainability and durability, we require everyone to build with TypeScript in projects of all sizes.
Also, all variable names must be in English, and the comment language is determined by the project leader.
Different from personal development, company projects require strict type specifications and data specifications, so TypeScript is a better choice.
For more details on React Typescript development, you can go to React Development.