On Baidu f.i.s-from tools to solutions

1. Preface

Parade holiday three days, I did not go anywhere, Curtilage looked at some things: git command line, SVN command and the following protagonist--Baidu Fis. For a look at git and SVN commands, see: "Git Command Learning Notes" and "SVN command learning Notes"

In addition, I am the author of the Open source Rich Text editor Wangeditor , and you are welcome to follow my project. The following will also be combined with my experience in the development of the editor, to compare that Baidu FIS

Before looking at the following, I can first discuss the Baidu FIS, a summary of it-from the tool to the solution . I don't know how you understand the two words "tools" and "solutions", and the difference between them. If you are interested, may wish to follow my words, together to meet Baidu FIS.

　　PS: I just learned Baidu FIS, there is no understanding of the place, but also ask you to correct me!

　　This article is mainly for you web front-end developers, no interest in this please bypass

2. What the hell?

Do not know Baidu FIS classmate, estimated the first sentence is to ask: "What ghost?" ”

I don't know about FIS, but as a web front-end developer, you have to at least know the "engineering", "automation" of the current front-end comparison process, or the "industrialisation" of the big ones? At present, the more popular tools are grunt, gulp and so on. If this is not known, it is recommended to seize the time to repair the bad, it is not too late, this tool is very simple to get started, recommended tutorial "Building an automated web front-end development environment with Grunt"

As for why the Web front-end to use automation, engineering, what is the benefit of this article is not much to say, not the focus of this article. In short it is very important.

Baidu FIS is also a dedicated web front-end automation tool, and it is more than the usual tools to consider things, so in fact, it is a web front-end automation solutions.

Understand the basic content of the Baidu FIS, now although you still do not know anything, but you can still capture the following information:

• Baidu produced : Baidu is a very important technology company, FIS by the professional team to maintain, applied to a number of Baidu products, which is an attractive in itself;
• solution : Small projects can not be reflected, but once the large-scale projects, multi-person development, the advantages of the solution is reflected. So, you do large projects, you can consider Baidu FIS, you do not do large projects, see Baidu FIS at least to improve their horizons and height.

3. Tool VS Solutions

See here, excited you are not anxious to have a demo to see the truth? --Don't worry.

You're in a hurry to demo and get quick start because you think it's important to see what it looks like. And I think more important than this is that I want to use the image of the language to describe to you the strongest advantage of the Baidu FIS, that is, the difference between tools and solutions.

To give a chestnut: Excel is a powerful form of software that has various formulas in it, but can you use it to make a very complicated financial form? But some professional financial software can be configured to generate such a financial form. The same is true for Excel, which is also applied to those formulas. The former is the tool, and the latter is the solution.

Grunt and Gulp are very good platforms, under which there are more than N plug-ins, but so many plug-ins are what to use, your project should use which, you may not know in the beginning. If you want to know that you have to take the time cost to study, but not everyone has, or willing to take so much time to study.

And Baidu FIS happened to solve this problem, it is commonly used things are integrated, packaged up, any process and operations have become a key, fool, unified, take to use. And, you just need to do it according to the actions it prescribes, without thinking too much.

So describe, do you want to just say the relationship between Excel and financial software? Technology is the same, but the effect of the application is not the same.

　　Benefits of the solution:

• For managers: From the project management, reduce the cost of development and management, because do not need every developer to understand the plug-ins, configuration, etc., from the development perspective, to facilitate the integration of different technologies and groups, so that each member to professional direction, improve the overall team capacity.
• For developers: A driver who doesn't want to be a cook is not a good soldier, and if you're a conscious developer, contacting a framework like FIS can improve your understanding of the system architecture and development process.

4. Only three commands

　　Ps:fis Document page http://fex-team.github.io/fis-site/docs/beginning/getting-started.html

Baidu FIS Home page gives the advertising words: three orders to meet all front-end development needs. These three commands are:

　　FIS Install

This command installs some common components used in the project, such as jquery, Echarts, and so on, and can be found in the component repository, which is primarily used to deploy and initialize the project environment.

　　FIS Release

Publish the current project. Release is a very important process, we all know that the Web front-end development structure and the final release of the structure, in most cases is not the same. For example, there will be changes in file paths (img put together, CSS together, etc.), merging and compressing files, adding MD5 stamps for caching, and a lot of custom actions.

For these operations, FIS considers very detailed and is reflected in its documentation. You need to refer to the documentation to see what you need, and you can add it. Which you don't need, you block it off. Almost everything you can think of, there are documents, almost no need to check the data.

(This is the ability of the solution)

　　FIS Server

Run the publishing environment for testing purposes. Grunt and Gulp have no integrated server functionality, and I have been using a Nodejs-based Http-server plugin to provide static services when developing wangeditor.

Think about it, how could you not use the server in the development of the Web front end? FIS with the server function, this is a normal embodiment of a solution, grunt no server, which is a normal embodiment of a tool.

Not yet, FIS server can not only provide services to the front-end, through the configuration it can also support Java, PHP, Nodejs background, which is very convenient for daily operation and testing. And I use the http-server can not, but fortunately wangeditor use in the background language.

　　

At this point, you can think about, in the actual development process, in addition to the above mentioned install release and server, what do you think should have, and this does not include? The first time I saw these three commands, the first thing I thought about was this question, but unfortunately I didn't think about it. In fact, do not think, FIS these three commands since can be used in Baidu so many projects, why can not meet their own projects?

As for how these three commands are used, you can go to the documentation page and take a look at it, or spend a few minutes doing a demo, getting started is a little bit easier.

　　Ps:fis Document page http://fex-team.github.io/fis-site/docs/beginning/getting-started.html

5. Three language skills

As mentioned in the FIS release command above, FIS will analyze the project when it publishes a project, such as changes to the file directory, the compression and merging of files, and the results that should be mixed up with these operations.

Development, Index.html quoted A.css and B.css, when released, two CSS integration into the X.CSS, then index.html inside should be referenced x.css, this is necessary!

　　In fact, dealing with so many situations is a very complicated matter.

The FIS development team itself admits that there have been a lot of detours in the process, but in the end they have summed up three skills that are capable of coping with all of the above situations (they call it "three language abilities"):

　　First, resource positioning

When developing, we write static resources in general with relative paths, such as src = '. /a.js ', and the relative path is invalid if the static resource changes position at the time of release. Therefore, FIS requires itself to have the ability to locate a resource, no matter how it is changed, can be found, and according to the latest location, give the correct relative path.

　　Second, content embedding

The most common is the combination of CSS, JS and other static files, img merging (CSS sprite), and the conversion of IMG to 64-bit encoding on the Web page. In addition to these, you may want to have a separate CSS, JS file, directly embed its content into the HTML page, rather than the reference.

These, as long as the changes in the content of the file, is a resource embedding.

To do this, FIS with a number of mature plug-ins, such as Uglify;fis also defined some of their own writing rules, such as title="Baidu logo" src="images/logo.gif?__ When the inline "/> is released, the IMG becomes a 64-bit encoded form (with emphasis on the" __inline "logo).

　　Third, the Declaration of dependency

JavaScript modules are defined as AMD, CMD, Commonjs, and so on, and they all have dependencies on such a concept, typically described by the Require () function. The front-end module relies on the tools, generally are requirejs and seajs, everyone in the project is also more commonly used.

Does FIS, as a solution, transplant requirejs or Seajs in? --no--fis has his own thinking (there is also data showing that FIS's idea is to refer to the Facebook technology, which is not tangled here)

Requirejs or SEAJS can solve the front-end modularity, but there are some things they can't cope with-or Baidu's FIS (or Facebook) won't be able to reinvent the wheel. This is when the site structure becomes quite complex: Requirejs and Seajs have performance problems, and secondly, the front end is not the only solution to all the problems.

This paragraph is very interesting, the following another question continues.

6. Efficient static resource management combined with front and back end

First of all, we strongly recommend that you look at this article: http://fex-team.github.io/fis-site/docs/more/mapjson.html, below is the outline of this article. This article is very well understood and personal feeling is also very creative.

The general meaning of this article is that if we fully use the traditional front-end separation mode, the traditional Frontend performance optimization (compression, merging, reducing HTTP), etc., is not the best performance optimization. The root cause is two words- static -the management of static resources is static.

Explain, because we adopt the traditional front-end performance optimization mode, all the CSS, JS these static resources are compressed after the reference to the Web page. After compression is a hodgepodge, useful useless, even the obsolete code, all in this face. If only through the front-end optimization means, we can only do this. So how does FIS solve this problem?

FIS in the release project, will generate a Map.json file (code below), this file is not for the front end, but to the back end (such as PHP). After PHP gets this file, it will know that a Web page depends on which CSS, JS, it will load, do not rely on the fundamental ignore. Furthermore, this process does not affect the compression and merging of files (great!). ）

1 {2"Res" : {3"Demo.css" : {4"uri": "/static/css/demo_7defa41.css",5' Type ': ' CSS '6         },7"Demo.js" : {8"uri": "/static/js/demo_33c5143.js",9"Type": "JS",Ten"Deps": ["Demo.css" ] One         }, A"Index.html" : { -"uri": "/index.html", -' type ': ' HTML ', the"Deps": ["Demo.js", "Demo.css" ] -         } -     }, -"Pkg" : {} +}

Map.json Example

(Students who do not understand, need to see the link given above)

This process consumes very little background performance, but greatly improves front-end performance, and the more complex the project, the more obvious it is to improve.

7. Summary

First of all, the above does not finish all the FIS things, after all, this is not the FIS document. This is just what I think is the most important concept in FIS, the most impressive thing that FIS has left me.

From the above description, the reader should be able to find out that FIS has indeed reached the solution level, which includes project initialization, development, release, run tests, maximum performance optimizations, and components that we don't mention in this article, and so on, all of the things you use in small, large systems. By contrast, tools such as grunt and gulp are somewhat overshadowed, especially in large-scale projects.

In addition, based on FIS also expanded other solutions, such as pure front-end, Java-based Jello, PHP-based Fis-plus, based on Nodejs Yog2, based on Go Gois ...

As an ideal technical year, have you been attracted by FIS?

I am considering whether my own open source project Wangeditor should also switch to the FIS platform, although Wangeditor is a very small plugin, haha.

-------------------------------------------------------------------------------------------------------------

Please follow my tutorials:

"Using grunt to build a fully automated web front-end development environment" " from design to Mode" "Json2.js Source Interpretation video"

"In- depth understanding of JavaScript prototype and closure series " "CSS know how Much" "Microsoft petshop4.0 Source Interpretation Video"

------------------------------------------------------------------------------------------------------------

Also welcome to my open source project-wangeditor, lightweight web Rich Text editor

-------------------------------------------------------------------------------------------------------------

On Baidu f.i.s-from tools to solutions