The usual nonsense

When I was a child, my father especially liked to read martial arts novels, and I followed a lot of Jin Yong Gulong’s TV dramas and novels, and then always dreamed of being a novelist, describing the various rivers and lakes of the pleasure of friendship and revenge.

When I was in junior high school, I fell in love with reading magazines. Most of my weekly pocket money was spent on buying magazines. To seek, to find, to seek, to find, expanded my imagination, let the others around me and have a very different place, just like thinking and ask why, sometimes ask people, more time or did you ask yourself, often insomnia because of some problems think impassability, for example, Bermuda, why so many strange incidents, What might have caused those things to happen.

Jobs in high school, you know, like product design, often drawing on scratch paper, describing some of his own strange ideas, sometimes to do a special notes and tidy, make it something like a work of art, can give others copy conspicuous, mainly because of the childhood began practicing copybook, hand written travel model is good.

Then think of having a website is a cool thing, then choose the computer major, as a programmer, but in my eyes, the programmer is always there is no such thing as the front-end and back-end on these differences, the programmer is programmer, if because it will only limited to understand what will be a front end or back end, can only say that you may be wrong understanding of programmers, Sometimes, I prefer to call a programmer an engineer — an Architect, the master of something.

Engineer in my eyes is not a set of knowledge, but the creator and performer of thinking structure, what do you mean, is the engineer is put forward and solve problems, he can according to your own common sense and experience, by some special means, such as making tools, to solve the problem of some unknown fields, the core right here – the problem of the unknown.

Our education system, there are few taught us how to solve the problem of the unknown, because traditional education has always been to our existing problems and almost standard answer, so we rarely have the opportunity to ask questions, and try to solve, and under the pressure of KPI (examination), also don’t have too much time to spend on some looks on the question of “no”.

But the world will always need people to continuously expand and mining, the laws of the physical world basically already finalize the design, but the principle of virtual world is only just beginning to establish, because the earth’s limited resources, human in order to keep down, finally still have to enter the virtual world to “existence”, therefore, to build the virtual world? Who will pose this unknown question?

The answer is left to the latecomers.

Talk about the cause

Recently has been in for the interview review of big company, to put it bluntly is brush topic, recite all sorts of data, special boring and drab, my heart is special resist these things, after all, I am a tour grind school, what is tour grind school? It’s about discovering and practicing a technique with a game-like exploration mindset, and the experience is infinitely better than learning by rote.

I back things especially simple, is to extract the essence, write on the draft paper, a hand cover the answer, and then look at the question recall the answer, to forget the place to remove the hand to look at the answer, and then start again.

But not the same as before the interview and, after all, is a senior engineer of the (I’ve been called interviewing senior engineers, brush levels for advanced), involves the knowledge of the depth of the deeper and cover face is wide, but I think these things is not particularly important, senior engineers have to basically see question the ability to solve the problem, as long as their own questions, They will be curious to explore solutions to problems, and they will not be afraid to learn more knowledge.

So I had an idea, why can’t I make an app to memorize? Start by listing your needs on scratch paper:

  • Add, delete, change and check the topic

  • Mobile terminal support

  • Offline availability

  • Later, in the process of prototype drawing and coding, the following potential requirements were mined:

  • Support rating of recitation for individual topics

  • Support score data analysis

  • Support problem grouping and add, delete, change and check questions

  • Supports tagging problems

  • Support for night mode

  • Supports scrolling and page-turning loading

  • Support for infinite scrolling

  • Supports multi-language switching

  • Support rendering markdown

  • Supports data import and export

At this point, the basic functional requirements of the application were complete, and the process took three days, all done on scratch paper.

After the prototype was drawn, it was time to start the design. Since it was an application with text as the main content, I considered that the flat design would easily cause visual fatigue when reading on PC, so I referred to some designs of Google Trends and Chrome browser. Material Design is adopted.

The mobile terminal removes the shadow of block-level elements, mainly because I have read a design paper before, which tells that people watching programs in front of TV or computer will have corresponding changes in adaptability to program content due to the viewing distance.

Watching variety shows on TV, which does not require much attention, is better than watching a movie on a computer, but watching a movie on a computer is much better than watching a movie in front of the TV, because watching a movie requires most of our attention.

Similarly, based on my Design experience in the past few years, I find that Material Design (which I translate as “texture Design”) works better on PC than mobile devices, while flat Design style looks more comfortable on mobile devices (see Wechat Design).

After the design style was determined, I started coding. Originally, I wanted to finish writing in a week, but due to the lack of early requirement design, I always stopped to design requirements in the coding process. Until the first version was released, I added CSS for beautification because of the poor display effect of Markdown form.

My professional experience, has been independent responsible for the front part of my job, I will have the opportunity to do design volunteered to do some design scheme, never oneself a person is responsible for all products, until this time, my own products, I didn’t realize, why must carry on the division of labor cooperation, because a person won a product all is so tired, In the past, when you were in charge of the front end, all you had to do was get the front end right, and maybe think about the back end and design, but you wouldn’t get the opportunity to do it all.

In the past half month, I made a product out of nothing by myself. I finally understand how difficult it is to go from zero to one, and how difficult it is to multiply from zero to one hundred.

In terms of technology, it is actually very simple, but it takes a lot of time to find a solution when there is a problem. I can’t help it. As a person who likes to “eat crab”, the technology stack I use is basically, if not the most advanced, at least the latest.

Here’s the technology stack I used:

  • React, umi3+ ANTd4
  • Typescript works with VS Code
  • IndexedDB, with dexiejs

Plug-in:

  • React-markdown, which provides markdown rendering
  • React-syntax-highlighter, which provides code block highlighting
  • React – Virtualized provides virtual rolling
  • React-bottom-scroll-listener: Provides the scroll loading function
  • Recharts, which provides graphic rendering capabilities
  • Offline-plugin Webpack plugin that provides the function of registering service workers
  • Webpack-pwa-manifest webpack plug-in, providing the function of generating the MANIFEST
  • Antd-theme -webpack-plugin Webpack plugin, which provides theme switching function

What are the difficulties encountered

The difficulty is, of course, a lot of:

  • How does UMI3 support PWA? The workbox configuration is too complicated. After a period of exploration and a Google search, I found that the basic functions of PWA can be realized through offline-plugin+ webpack-pWA-manifest. But offline caching poses another problem.

  • When dexiejs uses pWA, __dbnames are sometimes not generated, no __dbnames? Without knowing the name of the database, I could not get the data in the database. I raised an issue on Github. A day later, the founder of DexieJS sent back a message asking me to go to StackOverflow to ask the problem, but by this time, I had found a solution. When the application is initially loaded, a library is created to store the names of the databases that are added later.

  • Umi3 Setting the theme field causes the modifyVars option of less-loader to be invalid. How can I resolve this problem? ModifyVars (antD-theme-webpack-plugin) is used because the antD-theme-webpack-plugin gives an error that a less function cannot be found because I did not import antD’s less file. I used less-vars-to-js to configure the less variable to umi’s theme field, so I didn’t need to apply antD’s full less file at all. Instead, I used the simplest and most direct method, introducing what was missing. Copy and paste antD less functions files into the project folder and import the antD less functions files into the project folder.

  • React-markdown renders the markdown badly. What should I do? F12 open the console, find the style of the corresponding element, copy it, and apply it to your project. Hey ~, improve the style, it should look better than Github Markdown rendering.

  • The React – Virtualized document is in English. How do I do? But then we just kind of beat ourselves on and then we just kind of beat ourselves on and then we just kind of beat ourselves on and then we just kind of beat ourselves on and then we just kind of beat ourselves on and then we just kind of beat ourselves on and then we just kind of beat ourselves on and then we just kind of beat ourselves on.

The vision of the front boundary

Let me talk about my views on the front end. As I said before, I have never put myself in the front end. Maybe I am in the front end, but AS long as I have the chance, I will always do more things.

serverless

When I was in Beijing, the boss of the company worked in Sina to make SAE. Many people may not know what SAE is. Sae is called Sina App Engine in its whole course, and I also used it in university. The current serverless.

There was Serverless a decade ago, not only SAE, but ALSO GAE, which SAE modeled after. I have to say, some of Google’s things are really advanced, but Google is an engineering culture, it’s so simple, it’s got a lot of good stuff, but it doesn’t want to brag about it. Serverless and Docker are technologies that have been in use at Google for years.

Gae and SAE didn’t get off the ground, and most users just used them as a cheap tool, until Zeit’s Now, with Nextjs, took off and Now has a lot of enterprise interest in light applications, including some of the open source projects in China.

The rise of Now is partly related to the current demand for light applications, but I think it also has a lot to do with Nextjs, which can be seen from Zeit’s development strategy. It started from Github, developed community projects, provided high-quality open source projects, attracted the attention of excellent engineers, and gained traffic. Then the traffic will be converted into purchasing power. It is very convenient and fast to deploy NextJS to Now Serverless. I think other enterprises can learn from this supporting development service mode.

In China, I don’t know whether UMI has considered the integration with Aliyun Serverless, but since UMI is learning NextJS, it should learn more about how to release UMI’s potential and transform programmer users into purchasing power. Of course, this should be done with special caution, because in some domestic enterprises, When it comes to money, it can lead to short-sighted practices that can be fatal to open source projects.

The front frame

Why bring it up when it’s already been talked about? Mainly, my view is a little different from most of the previous ones, and I think the front-end framework will probably change to a game engine framework in the future.

What does that mean? I’ve been reading a book called Game Engine Architecture, translated by Milo Yip. Why want to see the book, because I always dream of, one day, you can tear rolled out a 3 d game, like “civilization 6” that kind of image quality, but also run in the browser, from start to do this business, have been focus on webgl technology evolution, but to be honest, webgl couldn’t apply colours to a drawing gives the civilization 6 of that class of images, Therefore, at this time, we need to re-create a rendering engine from the bottom, which can fully and efficiently squeeze the processor performance to render the same level of picture as the client, while running in the browser, OpengL has Vulkan, D3D has D3D12, and Web, WebGL is basically based on the implementation of OpengL. But the current progress is very slow, mainly has not found the application scenario, do not tell me the page game, this kind of thing, collect some IQ tax on the line, not on the big table.

Apple ditchedOpengL and started Metal, but that’s not a big deal because apple has the biggest app platform in the world, and that’s where the money is.

Flutter has delivered its answer by writing a rendering engine, SKia, based on Canvas, but the question remains, where is the 3D solution?

Again, the answer is for later.

The last

Project address: github.com/MatrixAge/t…

Finally, here are some pictures of Testool in action: