Being immersed in Web development, I think, is a poetic and beautiful thing. We can decorate our ideas with great front-end technology, UI components, and endless possibilities. There’s always something I want to do, something I can do, something I can’t do. In the midst of all this, it’s easy to forget why we insist on doing this, and what a nice, beautiful website really is. Take a look at the Screenshot of the React site builder toolkit PoemKit that I’ll mention in this post:



Today there are countless React UI toolkits and libraries. So with so many choices and new project challenges, what should I do next? Whether to learn a new framework, build my own wheels, or dig out some tools, IN short, I need a reflection to better face the future of more technical requirements and innovation. After all, the framework is just a framework, and it is wrong to talk about the purpose regardless of the scene. I should think about how to plan the future and the work of this open source tool from the aspects of personal growth, project requirements, language training and other aspects. That’s why, at this busy time of year, I still find time to learn some front-end or back-end techniques that are so important. First, however, I will consider whether certain frameworks are suitable for adoption. I am also particularly concerned about the various work-industry implications of the novel Coronavirus pandemic in 2021-2022.

Let’s start with what I think.

In order to adapt to a few large website platform and software project, I consider some React framework, such as Nextjs, but finally I decided to give it up for the time being, only temporarily, for the future of some projects may also directly adopt), I want to let the site architecture can free control, such as functional webpack scaffolding, extensibility. On the one hand, I built webpack scaffolding from scratch, which enabled me to learn all aspects of knowledge in depth and systematically understand the architecture principles and implementation methods of React website. Meanwhile, I deposited it into an open source toolbox, which can provide necessary support and reference for my future projects.

For data transfer, I would prefer to use Redux as a cross-component state manager and some portable toolkits depending on project needs in the future. I wrote all of the UI components in TypeScript so that the component library is systematized for management and doesn’t conflict with the entire React site’s logical blocks. It also has the ability to import other UI component libraries directly, such as Ant Design. At the same time, the toolkit needs a custom React component built into it to facilitate integration and improve the developer experience.

To create a site with completely separate front and back ends, I also needed to consider responsiveness and some cool interaction effects, I used the GSAP plugin for complex animations, and made the whole site compatible with Bootstrap and common icon libraries to provide more user-friendly style support. It doesn’t conflict with the built-in styles and scripts, which is my concern about the complexity of project interaction.

Finally, WE need to consider the issue of SEO, and I will further solve it. For example, the React website supports custom meta tags and titles. In terms of performance, communication between components, mounting and unmounting, scripts are optimized strictly by referring to relevant official documents.

Of course, for a learner, my code and script are not very high-end and excellent, but the whole open source product has made me learn and improve my thinking and overall technology a lot, and also made me have many choices for new projects in the future. I hope it will be of some use to you, and THANK you very much for your patience.

And then I need a good name for him, because I love WordPress, and WordPress has a saying: Code is Poetry. Code is poetry. With this kit, I’m also trying to make a more poetic website, so that’s where PoemKit comes from.

Now that I’ve made the entire project open source, I’m going to go through the entire PoemKit toolkit in detail:

1. Development background of this project

No matter what kind of development work you do, you may face the challenges of complex DevOps processes and thinking. PoemKit is designed to improve personal growth and development efficiency and quality. PoemKit is a set of free website development kit that helps developers build a React technology site from scratch. It supports automatic deployment of PM2 to the server. PoemKit provides more than 50 built-in UI components for building modern Web applications.

2. Talk about the structure of the project

In short, this is how a complex React project should be built. Although I didn’t use the Next framework in production, this file structure should be very useful in any React setup.

3. Summarize the project features

It creates an environment for you to focus on business logic and simplifies the development of the UI look and feel of your application. The following is a detailed description of its characteristics.

  • Basic environment: TypeScript 4.x.x + Babel 7.x.x + Webpack 5.x.x
  • Provides structured layout objects, UI controls and other preset UI components
  • Accessible urls, SEO optimization, and use React Helmet to make your site search engine friendly
  • Development, debugging, packaging, and deployment all in one
  • It is not a JavaScript framework
  • There is no jQuery and no libraries tied to it
  • Support for server-side rendering (SSR)
  • Component separation allows you to import any third-party UI components into your project (such as Ant Design)
  • Use Sass/SCSS to style the React component
  • Automatically bundle and generate separate core CSS and JS files
  • Supports automatic deployment to servers using PM2
  • ✂️ plugin Extension: Default component demo imports common third party plugins such as Bootstrap4 raster system, GSAP animation library, FontAwesome Icon Library, 3D Engine and so on, in order to be able to quickly expand your website (you can configure the library or plugin to import as needed)
  • ✂️ configurable scaffolding: Pack dist files independently (you can modify webpack.config.js to use memory mount)

PoemKit can work directly from command and deploy to a cloud server, but the real code still needs to be written behind it. These toolkits act as UI components and logic modules that can be combined into a real application prototype. It still requires programming capabilities to make them work on real requirements. If you want inspiration or just a direct preview of the effects, you can get a quick start on your development using our pre-built sample page. We can take a look at a screenshot of its default preview:

 

4. How to use it

The toolkit provides a series of configuration and beginner tutorials that you can grab from Github and view the documentation. In addition, THE UI components and modules in the package can be used individually, styled, and combined with existing application parts.

Step 5 Take it one step further

Want to take your project further? This open source project can provide you with some help and reference.

Github Resources: github.com/xizon/poemk…

These are my thoughts. If there’s something you’d like to discuss or have more ideas on how to improve, please feel free to let me know! Thank you!

This article comes from personal blog no way, reprint please reserve source, thank you!