Introduction to. Net Core application Framework util (i)

Distance from the last posting, has passed 3.5, the technical update rhythm in recent years unusually fast. NET into the cross-platform era, the front-end is also revolutionary subversion.

Review

In 2015, when I was addicted to jquery + Easyui's package, I suddenly realized that technology was obsolete.

jquery is struggling to cope with more complex UI needs, although the Easyui components are more sophisticated, but the interface style is old, slow response, and is a charge of commercial products, in a commercial product put energy encapsulation is not cost-effective, so I decisively abandoned the pit.

Then I started to encapsulate jquery + Bootstrap and exposed a lot of problems in a spa (single page app) project, so I realized that jquery wasn't the right spa, and I started looking for new solutions.

AngularJs (ng 1.x) is Google produced the JS framework, several books under the belly, I began to ponder how to encapsulate the AngularJs operation, in order to encapsulate the chain call, or even changed its source to support the service locator mode.

Just as I was going to encapsulate the Angularjs-based UI component, I found it obsolete. Because of the huge workload of the UI package, and the front-end environment is very chaotic, no longer dare to move, until the front three frames surfaced.

In 2016, with the rise of. NET Core, Alexinea (Liu Yi) launched the. NET Core Learning Group, Kiler (Thumbelina), Lemon (Liu Haoyang) and I joined the group as the first members of the team to facilitate learning communication.

Microsoft had not yet provided the. NET core Chinese documentation, and in order to facilitate the learning and promotion of domestic. NET core, the. NET Core Learning group organized a group of. NET enthusiasts to translate until the official Chinese documentation was available.

In 2017, the. NET Core Learning group decided to launch an open source project to drive the development of. NET core, and the. NET Core Learning Group was formally renamed. NET Core Community (. NET core China community), or NCC.

The project that was originally joined has the Lemon AOP framework Aspectcore,savorboard (Yang Xiaodong) 's Distributed Transaction Solution Cap Framework, and my application framework util. Subsequently, some excellent open source projects were added to NCC, including the crawler solution Dotnetspider, distributed micro-service framework surging and so on.

util the background of the production

I have long been in small software companies, small companies have limited resources, people less things, level is uneven, how to reduce the team's learning costs, how to improve the project development progress, how to reduce the bug rate, is my main concern.

The Util application Framework is a powerful tool that I have accumulated over many years of project practice to solve the above problems, and it has proven to play a key role in a number of small teams and several small and medium-sized projects, including some projects on the verge of miscarriage.

What are the bottlenecks in small and medium projects?

For small and medium-sized projects, simple crud (increase and deletion) occupies a large amount of space, the core module contains complex business logic, the report contains complex queries, but also need permission control, Process Control, no matter how many modules, not the scope of this.　　

The front-end UI experience is becoming more and more important and the workload is getting bigger. A simple crud, server-side API development for half an hour, the UI may need to toss a day.

How to break the bottleneck

If you can quickly take crud down and effectively mitigate front-end development tasks, you'll be able to put more effort into your core business and improve your project delivery capabilities.

For server-side crud, it can be solved by encapsulating the base class and cooperating with code generation, how to improve the efficiency of front-end development?

correct understanding of "separation before and after"

Some people advocate the " separation " principle, the front-end interface to the professional front-end staff, the back-end staff only responsible for providing the API, it seems to improve the front-end development efficiency of the panacea.

The problem is that small companies have limited capital budgets, and professional front-end personnel pay a high demand for low-cost recruitment of the front-end staff, often only HTML + CSS,JS play does not slip, and finally have to serve the programmer to play.

On the other hand, front-end also has the front desk and backstage points, the front desk is facing the end user's website, for example the portal website, the Mall class, the front desk emphasizes the display, the regularity is not strong, the backstage is the user or the administrator's form system, the emphasis function, the regularity is stronger. Most of the company's front-end staff mainly develop the front office site, and management background or server programmer development, front-end personnel at most to help interface layout, function or back-end personnel to complete.

"Separation before and after" is not necessarily the separation of personnel, but also can not reduce the workload, mainly refers to the separation of the front-end dependencies, if the frontend technology or back-end technology can be arbitrarily replaced, rather than tied together, it is considered successful separation, which improves the maintainability of the project.

the choice of JS frame

In order to reduce the front-end development difficulty, choosing a good JS frame is particularly important.

jquery can also accomplish tasks for a complex interface operation, but the way jquery operates the DOM is more complex, inefficient, and difficult to maintain than the modern mainstream JS framework.

The three main JS frames of the modern front end are Angular(NG), Vue and react. Through learning, found that angular more in line with my pursuit of development efficiency.

The most critical feature to improve development efficiency is code hinting . Do not believe?? Try writing a few sentences in C # on your Notepad.

Angular is Google's development of the JS framework, the default use of Typescript(Ts) language development, Typescript is Microsoft developed a strongly typed scripting language, it is a superset of JS, with code hints on vs or vscode.

You may say, JS does not have code hints? This is not the same, TS has a strong type of code hints, you can see only the well-defined members of the object, providing very precise hints, and JS code hints that the scrollbar is several meters long, and the current object-independent information is also displayed, which seriously reduces the role of code hints.

In addition to code hints, TS also filled out some of the design flaws inherent in JS.

Many developers do not choose angular because the need to learn a scripting language, the cost is high, this is actually a misunderstanding.

TS syntax is a bit like JS + C # + Java mix, for C # or Java programmers, the cost of getting started is very low, developed to keep you cool.

As a Microsoft department. NET programmers, we should strongly support.

Declarative programming

Now that we have code hints for developing the server and front-end scripts, is productivity improved and can we take it a step further?

Modern, Popular front-end frameworks have the concept of components or directives that support declarative programming by invoking JS by extending HTML custom tags or custom attributes.

In this way, JS is hidden inside, and JS is transformed into HTML, resulting in better encapsulation. There is no doubt that the use of HTML-written pages, more than the use of JS has a stronger expressiveness.

If the text box requires non-null validation, just add a property on the label, just like this, you don't need to call any JS to complete the validation work, which is pretty cool.

<input required= "true" >

However, I find that many teams do not use declarative programming and prefer to use JS because HTML is a weakly typed tag, and custom attributes do not have code hints, which is a big problem.

Taghelper-a lifeline for writing HTML

When I learned DWZ this front-end framework in 2012, the notion of being exposed to declarative programming was also plagued by HTML-silent problems, and I later found that the HtmlHelper provided by ASP could encapsulate HTML and provide strongly typed code hints, which is exactly what I need.

2015 with HtmlHelper encapsulated Easyui, although only a few of the basic work, but the use of people think it is a significant increase in development efficiency, it is even still some of the company's flagship technology.

HtmlHelper is also flawed, and it looks like a C # code, not a label, such as a htmlhelper encapsulated text box.

If you need a front-end classmate to help you adjust the interface, this is not very friendly.

In addition, HtmlHelper is mixed with HTML to make the code look less intuitive.

Microsoft has discovered the problem, with the introduction of ASP. Taghelper,taghelper and HtmlHelper, which is a strong type tool for encapsulating HTML, but it's a label, and if you don't notice, it doesn't look like HTML, Or Taghelper, this is of great significance for front and rear staff to work with HTML pages.

now the Taghelper encapsulated text box has grown like this.

the difficult road of combining taghelper and angular

With the angular or vue framework, you won't normally start working from 0, and finding a library of ready-made UI components is a smarter option, such as angular can choose angular material or ng-zorro.

These libraries provide a number of components and properties, if you write directly using HTML, no code hints, you must always open the official website, turn around to look for the properties you need, even if you have used it, if you remember not very accurate, copy and paste from the official website will be with you at all times.

Now, you know Taghelper is a life-saving straw, may have been forced to try to package, not just HTML splicing out to the page, how hard can this be? Don't worry, lad. Encapsulating angular components into taghelper is not as simple as you think.

If you have followed the ASP. NET Core angular project, you will find that this template uses HTML instead of Taghelper, which is why? Do you not promote such a good technology in your home?

With the experience accumulated in the previous package HtmlHelper, I transformed the ASP. 2.0 angular This template project into a support taghelper, which was done using the JIT compilation feature provided by Angular. JIT is a real-time compilation, will be in the runtime to dynamically obtain HTML pages and compiled into internal JS, I also found on GitHub, some people abroad are using this method, but all at the demo level.

I encapsulated the angular Material component library with Taghelper and applied it to the project.

A serious performance problem soon erupted, and the pages on the project were hundreds.

It takes about half a minute to start to see the login page, and the F5 refresh takes so long that this speed is unacceptable.

I observed that the system would request all pages when it was started, although I used the angular module, but did not use lazy loading, the main module directly referred to the submodule, causing the full page to load at startup.

Using lazy loading to alleviate this problem, the boot can be completed in about three seconds, the sub-module will take a few seconds, although it can be used reluctantly, but performance and AOT compilation Far from.

AOT compilation is a pre-compilation provided by angular, which compiles HTML files directly into JS during the release phase, so that HTML pages are no longer accessed at run time, which can greatly improve performance.

After using Taghelper, there is no HTML file, AOT compilation cannot access the server-side URL, so there is no way to use it.

Both the fish and the bear paw both want to have, if can get taghelper compile-time check and code hint function, and can get AOT compile run time performance, this is how good.

I was hoping that the ASP would provide a bit of support, and after GitHub had issue, the ASP. NET core team said that the JS framework of taghelper and angular was incompatible with the problem of mechanism. After I think about it, it is true, taghelper mainly for the service-side MVC support, and using the angular such a JS framework, the route after the client, through the AOT compiled, the service side in addition to provide Web API, it really does not matter.

As Taghelper improved my team's development efficiency, delayed loading allowed this mechanism to be used, and I stuck with it. Until one day brainwave, with Taghelper generated HTML file is not good, He Xuanbing classmate Toss a day, finally solved the problem. Now, Taghelper acts as a code generator, and the service-side MVC-related features are all discarded.

Summary

The background and motivations of Util are described earlier, and explain why I spend a lot of time in the UI package.

To be continued, the next introduction to Util contains the main features, as well as let you put Taghelper + Angular material package demo run up.

The Util application framework is: Github.com/dotnetcore/util

Write the text need power, please support, point out the recommendation, GitHub point under the stars.

Util application Framework AC Group: 24791014