big-frontend
- Take
Todo-App as an example to experience various frameworks and libraries in the front and back ends. - The server address is
http://localhost:8080 - The interfaces of the front and back ends are:
- Get all TODOs:
{path: '/api/todo', method: 'GET', status: 200, return: [{action: 'todo1', done: false}] - Add new TODO:
{path: '/api/todo', method: 'POST', status: 201, return: ''} - Complete or close the specified TODO:
{path: '/api/todo/toggle/{index}', method: 'POST', status: 200, return: ''} - Delete the specified TODO:
{path: '/api/todo/{index}', method: 'DELETE', status: 200, return: ''}
Completed backend
-
{tech: 'spring-boot', tag: 'springboot-backend'}
Completed web frontend
-
{tech: 'vuejs', tag: 'use-vue-frontend' } -
{tech: 'vuejs-vuex', tag: 'use-vuex'} -
{tech: 'react', tag: 'use-react'} -
{tech: ['react', 'redux'], tag: 'use-react-redux'} -
{tech: ['react', 'hooks'], tag: 'use-react-hooks'} -
{tech: 'jquery', tag: 'use-jquery-ajax-to-read/write-from/to-server'} -
{tech: ['react', 'typescript'], tag: 'use-react-typescript'} -
{tech: ['react', 'typescript', 'redux'], tag: 'use-react-typescript-redux'}
Completed command line frontend
-
{tech: ['react', 'ink'], tag: 'use-ink-cli'}
A front-end that can run independently
-
{tech: 'jquery', tag: 'use-jquery-in-static-web' } -
{tech: 'javascript', tag: 'use-pure-javascript' }
Purpose
- Understand the meaning of front-end and back-end
- Understand the differences and connections of multiple front-ends
- Understand the significance of a big front-end
- Experience the mainstream technical framework of the front-end
Front-end, back-end
- Front-end: Design and implement the interface about human-computer interaction in the system
- Command line: Console program. It is usually implemented using languages such as C, C#, and Java. Input and output with commands and parameters, as well as scanf and printf
- Desktop: Use various graphic controls such as windows, menus, forms, etc. to complete input and output using various devices such as keyboards and mice. Commonly used technologies include MFC, Java Swing, Qt, WPF, etc.
- Web(H5): Similar to desktop, but runs in a browser. The technologies adopted mainly include HTML5, CSS3, and Javascript
- Mobile: Using mobile phones as carriers, common mobile devices include Android and iOS
- Mini Program: No need to install or deploy, it runs in applications such as WeChat, and is quite popular in the country. Such as WeChat mini-programs, QQ mini-programs, Baidu mini-programs, Alipay mini-programs, quick applications...
- Backend: also known as server side. Generally used to provide data and services.
- Common processing procedures
- Data is stored in the database
- The server receives requests from the front end, which are generally HTTP requests.
- According to the request, the relevant business logic is called and the calculation result is returned
- According to the calculation result, the response is returned, which is generally an HTTP response. Response can have multiple representations, such as JSON, HTML, etc.
- Commonly used technologies and frameworks
- Java EE, ASP.Net, PHP
- Spring, Hibernate
- ...
- Development characteristics of traditional applications
- The technology stack used in the front-end and back-end is not unified
- The technology stacks used by multiple front-ends are not unified
- Front-end and back-end development methods and ideas are not consistent
- It's hard to have engineers who are proficient in front and back ends at the same time
Large front end, full stack
