React product realization task management tool “hydrogen”

Time:2020-8-1

React product realization task management tool

Original address: https://zhuanlan.zhihu.com/p/… , welcome to reprint: -)

? about

In fact, I’m very sorry for the subscriber of this column. It has been stopped for a long time, and there is no special reason for laziness! No, the painting style can’t start like this. It’s like this. I think I should use react to do something. Writing an article can clear my mind and let me communicate with others. But it’s not as sexy as actually making products. So I decided to use react to make some products, so there was “hydrogen” http://origingroup.tech I believe that my introduction to hydrogen and the implementation technology can also be helpful to you.

So in this article, I would like to introduce some ideas, ideas, technical implementation and some tools used to do this thing.

What the hell is hydrogen

This name sounds very strange. Why is it an H element as a name? Yes, it’s like this. No matter what hydrogen is, my idea is that I want to make some products with react, and then we have to give it a name, “some products” It means that I have to spend a lot of experience to think about the product name. Well, it’s better to choose the name according to the order of the periodic table of elements, so the name of “hydrogen” is determined. I think I’m a genius

Well, seriously, there was a premeditation to make hydrogen. A long time ago, I made some products and then died. EEE… So now I decide to pick them up!

In the end, one of the “notes management tools” for personal project management was not changed for a long time, So there’s this guy called hydrogen (of course, it wasn’t named this before.)

What are the core functions of hydrogen?

  • It provides a powerful list of workflowy functions, which can add, delete and modify daily trivial things with extremely simple interaction

  • The core objective is based on task management, so I refer to many UX of task management tools and my own ideas – combined with the scrum model, it can also be extremely simple in task management (at the beginning, too many core objectives lead to almost difficult production of the product, but in fact, the last hydrogen is a deletion, which also makes me understand the need for restraint in making products)

  • Finally, I need to have a powerful editor, because I always write something when I record things, so the task details are made into a WYSIWYG editor, which supports markdown syntax. You can paste markdown directly to generate styles, and the function of exporting markdown will be provided later

  • Beautiful, of course

Well, after all, there is a famous saying called meitus huigejb

The first figure is the list I mentioned. You may have to experience it before you know how to use it. You can create a task by pressing enter. After tab, the task becomes a subtask. Ctrl + Command + up / down

React product realization task management tool

React product realization task management tool

React product realization task management tool

React product realization task management tool

⚒ Talk about technology realization

As you can see, the above object is a desktop app. The specific implementation method is as follows:

Electron + React

At the beginning, it was only for the web version, so the technology was all around react. Later, it was decided that it should be a desktop app. Of course, the first choice was electronic. During the process, there were a lot of holes. Here are some convenient points to share

  1. The choice of react stack

  2. Project structure and webpack package compilation

  3. Application details of electron

  4. How to make I18N with electron
    Stack selection of react Technology

The basic technology use is the same as I mentioned in this column

  • ES6 + JSX + less: as a basic choice of language layer, this routine is still very common

  • Ant.design : Using ant.design As the foundation library, I would like to thank Yubo dada team for their contribution

  • Redux + Redux Saga: now that you are familiar with Redux and Redux saga, it’s difficult to change it to other methods, because it feels that this kind of matching has been very extreme. When dealing with data flow and UI interaction, Redux saga is almost a magic tool

  • draft.js +Draft plugin JS: used Facebook’s draft.js , If you are willing to learn more about its design and architecture, you will also feel that this is a great project. At the same time, through draft plugin JS, editor functions can be quickly componentized, and it is easy to use hook Customize your own editor. There are two editors in hydrogen. The first one is a list item. Each editor is an instance of an editor, task details and a customized rich text editor

  • Immutable.js : immutable data, which is really important for the list. If react is not optimized, there will be serious performance problems under special circumstances. The hydrogen list is such a special case. Once a certain task is edited, it will be stuck and vibrated. So when I made the list, I decided that immutable reconstructed the whole project. At the same time, the data structure of the list was specially designed and optimized. (for example, a small problem, moving up and down, how to determine the order?)

  • React Intl: since hydrogen has been internationalized, it supports English. Of course, there should be a lot of grammatical errors that haven’t been checked. React Intl is used.

  • React virtualized: this project is also used for performance optimization, but the current version does not need it because it optimizes the data structure

Project structure and webpack package compilation

The directory structure design of the project and the packaging and compilation of webpack are the headache problems. When webpack encounters electron, I will not tell others about the strange bugs caused by different environments, ☝️ I bear it in silence…

First, the diagram of the last project structure

React product realization task management tool

This is a long directory. The key point is the design of containers. The current design of containers in the project is a cotainer

  • reducer.js

  • sagas.js

  • index.jsx

  • styles.less

  • components

Of course, there are special reducers directory and sagas directory in the project structure in the figure. This is because the previous design has not been changed, and the following reducer, style and sagas are all self-contained components.

Talk about the packaging of webpack

Thank you for this project for helping me solve many problems of chensulin / electron react boilerplate under normal conditions. React project basically follows this boilerplate. However, I have made a lot of user-defined modifications in the packaging, so there are many webpack problems.

One of the optimizations is that without using DLL, both production and dev will use it vendors.js The vendor is pre packaged and compressed, so each time the vendor is packaged, only the business code is packed. The specific way is to see the picture

By defining externals, the packaging process ignores the packaging of these modules and uses external reference

React product realization task management tool

Specifically package the webpack configuration of the vendor. Be sure to pay attention to the librarytarget

React product realization task management tool

Application details of electron

Here is too laggy to list too many details. One of them is to initialize loading loading, because electron opens almost every browser and takes a lot of time to execute large JS, so 1s will stop at 2S and appear to be stuck.

The way to solve this problem in hydrogen is to use a window specially responsible for loading. This page is extremely simple and can be loaded quickly. At this time, open the main window and display it when the window is loaded. Then close the window responsible for loading. I will paste it directly below main.js If you need it, you can take it away

app.on('ready', createWindow);

function createWindow () {
  locale = app.getLocale();
  landingWindow = new BrowserWindow({
    show: false,
    frame: false,
    width: 490,
    height: 400
  })

  landingWindow.once("show", () => {
    // Create the browser window.
    mainWindow = new BrowserWindow({
      width: 1000, 
      height: 740,
      titleBarStyle: 'hidden',
      icon: `file://${__dirname}/assets/imgs/logo.png`,
      show: false
    })

    mainWindow.once("show", () => {
      landingWindow.hide()
      landingWindow.close()
      landingWindow.removeAllListeners();
      mainWindow.show()
      landingWindow = null
    })

    mainWindow.webContents.on('did-finish-load', () => {
      if (!mainWindow) {
        throw new Error('"mainWindow" is not defined');
      }
      mainWindow.show();
      mainWindow.focus();
    });

     // Emitted when the window is closed.
    mainWindow.on('closed', function () {
      // Dereference the window object, usually you would store windows
      // in an array if your app supports multi windows, this is the time
      // when you should delete the corresponding element.
      mainWindow.removeAllListeners();
      mainWindow = null;
    })

    // and load the index.html of the app.
    mainWindow.loadURL(`file://${__dirname}/app.html`);
    
    const menuBuilder = new MenuBuilder(mainWindow);
    menuBuilder.buildMenu(locale);
  })

  landingWindow.loadURL(`file://${__dirname}/landing.html`)
  landingWindow.once('ready-to-show', () => {
    landingWindow.show()
  })
}

How to make I18N with electron

There are two situations when making international version

main.js Internationalization of main process
Internationalization of render process in Windows
In main.js It can be done through

locale = app.getLocale();
To obtain the language of the current system, but it should be noted that the place to obtain must be in the app.on (‘ready ‘), or it will be retrieved to “en US” by default

In windows, this is really the front-end world

locale = navigator.language
And in chrome, you can get the language as above, and then set it to the provider of react Intl, and then the trivial translation work will follow…

last

Hydrogen still took me a lot of time. At present, I don’t plan to open the source. After accumulating to a certain extent, it should open source. Finally, I’d like to talk about the harvest of doing this thing

  • Design and UX are important

  • Restraint, in the production, in the design must be restrained

  • Linux philosophy, let the product only complete one function, do not think too much, think too much, nothing can be done

  • Even if it’s a bug all over the body, you should push it out as soon as possible, otherwise you can’t find any reason to continue to do it