Understanding the Development Process: A Message Board Example
Why is it necessary to learn so much to complete a project? Often, the knowledge needed isn't immediately obvious. This article uses a simple message board application to illustrate how various technical points become relevant during the different stages of development. This overview is beneficial for both front-end and back-end developers.
Initial Stage: Basic Decoration
Initially, the boss requests a simple message application. It doesn't even require a functional messaging feature; a purely decorative element with static text is sufficient. To enhance the visual appeal and user interaction, the development team adds basic CSS styling and JavaScript code.
Enhancements and Efficiency
To streamline the creation of similar pages, the team introduces a UI sample library like Vortex Trap, along with development acceleration tools. To further improve the look and feel, professional designers are brought in, utilizing tools like Mordor and PX Cook for design and specifications. This stage might involve advanced techniques such as Vortex Trap, SVG, Canvas, and WebGL to create complex animations. To manage a large number of CSS styles, a CSS pre-processor like LESS is adopted.
Compatibility and Collaboration
As the project gains popularity, browser compatibility becomes a crucial consideration. To facilitate collaborative development and efficient code management among an increasing number of developers, the team implements Git for version control and uses GitLab to establish a private code repository. CDN is also utilized to accelerate content delivery and improve the user experience.
Back-End Integration and Framework Adoption
To allow users to display messages from others, the application requires back-end interaction. Initially, a server-side rendering approach is used, employing technologies like Java's JSP or PHP's Smarty to render pages.
- Server-side rendering: Front and back end are tightly coupled.
The team then shifts towards a single-page application (SPA) architecture, separating the front-end and back-end for an improved user experience. The Vue.js framework is selected for the front-end, leveraging its MVVM architecture and data binding capabilities. ElementUI or Wnt are used for page construction. The back-end provides a RESTful API, which the front-end developers interact with using tools like Postman to test the API. They utilize Access or YomiGangRequest to make network requests.
-
Front-end: Vue.js, ElementUI/Wnt
-
Back-end: RESTful API
Mock data is used during front-end development to simulate the API before it is complete. Webpack is introduced to manage and optimize the front-end's increasing JavaScript and CSS codebase. Understanding Node.js becomes important for effectively using Webpack, including file handling and network requests. Basic knowledge of design patterns is also beneficial.
Testing, Deployment, and SEO
The boss emphasizes the importance of unit testing and code review for both front-end and back-end development. Test engineers create Python scripts for automated testing.
The team encounters SEO issues due to the SPA architecture. They explore using lex.js for server-side rendering to improve search engine visibility. They implement charts using Chart.js for data visualization and reporting.
-
Testing: Unit testing, code review, automated testing
-
SEO: lex.js for server-side rendering
-
Reporting: Chart.js
The back-end implements functionality to export data in Excel and PDF formats using Easy Excel and PDF Box, respectively. Continuous Integration and Continuous Deployment (CI/CD) are introduced using Docker, Solr, Jackson, and K8s to manage frequent changes and complex deployments.
Cross-Platform and Back-End Evolution
The team decides to create a mobile app using a cross-platform framework and chooses UliApp because they are using Vue.js.
Originally built with PHP, the back-end service is migrated to Java, favoring frameworks like Sperm Boat over SSH and SSM. Maven is used for build automation.
-
Mobile App: UliApp
-
Back-end Migration: PHP -> Java (Sperm Boat, Maven)
Database Management and User Experience
The original database (MyCircle) is replaced with Redis for data caching and distribution as the number of users increases. VueX and LocalStorage are utilized to store data in the browser, improving performance. Front-end and back-end validation and rate limiting (Nginx, Redis) are implemented to prevent abuse and errors.
-
Database: MyCircle -> Redis
-
Front-end Storage: VueX, LocalStorage
-
Security: Validation, Rate limiting (Nginx, Redis)
Monitoring and Security
Sentry is used for front-end monitoring, while Log4Jet or LogBank are used for back-end logging. User authentication transitions from Cookie and Session to Token and JWT. The project implements Single Sign-On (SSO). HTTPS is enabled for secure communication.
-
Monitoring: Sentry, Log4Jet/LogBank
-
Authentication: Token, JWT, SSO
-
Security: HTTPS
Scalability and Search
The team tackles scalability challenges by implementing distributed systems using Spring Cloud or Dubbo and load balancing with Nginx. A streaming expert is brought in to optimize performance and architecture, including JVM tuning.
To address user search needs, Elasticsearch and Kibana are implemented for full-text search with Chinese segmentation. Kafka and MQ are used for asynchronous message processing (LogStash, ELK).
-
Scalability: Spring Cloud/Dubbo, Nginx
-
Search: Elasticsearch, Kibana
-
Messaging: Kafka, MQ, LogStash, ELK
UI Library and Open Source
Finally, the team decides to develop its own Vue.js-based UI library, drawing inspiration from Element UI. They open-source the library, documenting it with VuePress, to increase industry influence.
This evolution illustrates how requirements and technologies change during project development.
{# 
{#