Preface
Today suddenly want to eat pork, and then ask the chef friend how to do, Chef buddies see you The good faith is quite high, so throw over two books:
Can you be a good friend? Your heart steeds, but still not waiting to spit out, chef buddies are very professional analysis: Meat is the key to taste, soy sauce is the guarantee of chemomorphosis, how can you make good pork?
standing on the shoulders of the predecessorsHTML, CSS, and JavaScript are the foundation of the front-end, and this is an undeniable fact. Just as a car, of course, is made up of a bunch of steel plates and screws, but is anyone still carrying a hammer and hammering to build a car? Li said, "The
car is just four wheels plus two sofas ", to a trip to the furniture city and tire shop, the car is not built? (Well, I admit that the exaggeration factor is a bit large)
The world of yards often mentions making wheels, that is, you take the wrench to make a car and knock a wheel out, and then use the wheel you made out of the seat you made out to assemble the car. It's absolutely private, but it's all a big team, and the small team and the independent developer are doing this to estimate that only one child's toy car can be built, or for children under 3:
The small team to do is to try to use the ready-made things to assemble, rather than all of their own development, as now sold online furniture, a set of components sent to assemble a piece of a beautiful table. Engineering for large-scale products, you must use the component of the thinking to develop, the project into a small component to the various groups to develop, independent of each group, and finally all components into a complete finished product. While many widgets are generic, there are many organizations or individuals that share their well-done components and directly use these ready-made components, which obviously can speed up the development process significantly.
In addition, the obvious fact is that with the development of technology, terminal equipment diversification, page visualization technology, the front-end technology has become more and more complex, no longer 3-year-old children's toy level. such as the enhancement of user interaction, such as the diversification of terminals, which greatly increased the complexity of the front-end development. This time from the bottom of the 0 began to develop, with the ready-made lighters do not need to drill wood to take fire, Yuanmou people laughed.
a set of web code, multi-platform ApplicationsAs we all know, mobile devices now have Android, Apple two camps, and the domestic terrorist share also let us have to develop the public version, that is, an app requires at least Android, IOS, Web app three version. 3 versions are developed using completely different technologies and cannot share code with each other, meaning that at least 3 shifts are needed to develop. Of course, we all want to use a set of code to run on 3 platforms, with this ability is only web App technology, because he is essentially a Web page, and the Web is not platform.
However, the pure web app has two problems, one is the weak operation ability of the hardware (native only HTML5 some hardware API), the second is the performance than the original poor. In order to improve the operational ability of hardware, you can use PhoneGap, titanium, the underlying middleware to invoke the underlying hardware, and can be extended through the form of plug-ins, it can be said in the ability to invoke hardware, this method is no different from the original. This development is no different from developing web apps, and most hybrid apps are being developed in this way. On the other hand, performance due to the development of HTML5 technology, combined with CSS3 words, performance has also been significantly improved. Here you might say that the Web app is very easy to stutter on the Android version. Here to science, web App is rendered through the Web view, if the Web view rendering ability does not work, there will be obvious lag phenomenon, and Android Web view with 10cent X5 core, domestic although good, still need to work! In contrast, the same web app can be put on the iOS version to see, the performance basically does not lose the original, because the iOS version with Safari the same Web view kernel! In Google Firefox and other mobile browsers, performance is also very high, and as technology development can be foreseen, in the near future, Web apps and native apps in the performance of the difference can basically be ignored.
front end Good livelyBecause of the rapid evolution of devices and the need for web development in many platforms, the front end has become more lively than ever before. Major internet giants have launched their own front-end framework, but the framework is many, the core of the idea is only one: component development.
What is modular development? Have you ever built bricks? Component is to talk about one page of the functional body to make a block of blocks, when the development of the various parts of the stitching out a page, as follows, each box is a component:
A Web site consists of multiple pages, a page consisting of multiple components, and then the large components can be composed of small pieces, the small pieces into large components, large components into large components, and then into the page module, which is the component development.
So easy? Too naive!
The component you see here is just a component of the UI presentation layer, and the complete component also includes interactive events, presentation styles, data interactions, which means that the component has its own properties, methods, and data interaction capabilities. such as the common search hint list, the user input information to the server, the server based on the user input Word lookup after the data back to the front, and then by the front-end display, the effect is as follows:
The common UI library, such as Bootstrap, implements the encapsulation of styles and animations, but it also handles data interactions on its own. It is also possible to write their own, the server will return the data, and then the front end with the character splicing or DOM template technology to synthesize HTML into the Web page, this step is commonly known as rendering. Of course, the rendering can be done on the front end or on the server side. Simple string concatenation is probably the case:
<input type= "text" id= "" value= "braised pork"/>
<input type= "button" id= "" value= "search"/>
<ul id= "Test-ul" > </ul>
<script type= "Text/javascript" >
var temp = ',
list = [' Canned pork meat ', ' braised pork sauce ', ' braised beef with bacon ', ' fried pork ', '
ListNode = document.getElementById (' Test-ul ');
for (Let n = 0, len = list.length; n < len; n++) {
Temp + = ' <li> ' + list[n] + ' </li> ';
}
listnode.innerhtml = temp;
</script>
Above is just an example, the actual project with more is the template technology, now a plethora of template technology, such as template dust.js, DOT.JS,MVVM frame-level Angularjs, Knockoutjs, and so on, all said their melon is the sweetest, Select patients with difficulty are you ready?
After the component is complete, a set of underlying frameworks are needed to organize the components organically and to implement the requirements according to the scenarios in which different components are dispatched. This is the routing module, where the previous routing module is placed on the server side, and now requires front-end routing for single-page applications. In the case of complex application, in addition to the need to use the routing module to implement the jump, but also need to load each scene according to the requirements of the resources required for each scenario, while ensuring the scheduling of each resource does not conflict, the resource loader is also a framework.
From the above, in order to implement the component development, we must use at least several frameworks to organize the code, if the business responsibility elasticity is large, such a set of underlying architecture can be not casually simple can be done. And if you make the UI, that workload at least several times, in the case of no increase in personnel, it means that the development cycle several times. Think about the speed of Internet development now, and so you spend a few weeks to make a fine set of UI, your original value of tens of billions of U.S. DAO idea may have been 10cent, 100du these companies have done, tears at the moment you finally think of the fire cloud Evil God said:
The World martial arts, only fast not broken.
Fast, is the internet industry's Sunflower Treasure Book (Sisters are assured that the program ape uncles do not look at the first page).
Choose a useful development environmentIn order to implement the component development, we usually use the UI library, the MVVM framework, the module loader, project management and configuration tools, such as a set of things, this time a good development environment is more important, the simple use of the editor to hit the code of the slash and burn era has become a history. In the front-end development environment, some companies will use chatty IDE, some companies will use a variety of lightweight tool combinations, this depends on the company's technical level and technology architecture settings. In addition, each company's development will more or less introduce some existing frameworks and class libraries, known as the wheel. It is not easy to find the framework that best suits your project in recent years, when the front-end boom is unprecedented, with various frameworks (Qun) out (MO) Luan Poor (WU). Now that the front-end frame is updated very quickly, a frame fires up to exit people's horizons, probably just two or three years away. Obviously, the risk of following the hot is quite large, especially the framework of individual contribution, because of limited energy, the follow-up technical support is actually very difficult to guarantee. To choose suitable for the company's business and stable mainstream framework technology, which requires considerable technical accumulation can be finalized, or with the development of the small partners to step on the pit, and so you fill the pit, suddenly found that the road has been out ...
On the development tool, the front-end boundary comparison fire is sublime text (this is just an encoder) and Webstorm, these two are very strong, in other words, you want to install a lot of plug-ins or with a lot of tools to use, such as good coding plug-in, debugging necessary chrome, exquisite UI component library , appropriate automated deployment tools, handy test tools, standardized engineering management plug-ins, and more. For beginners or developers with insufficient technical skills, the screening of these frameworks/tools is difficult, which requires Daniel to be able to set the technology selection. In addition, the following small partners 18 kinds of martial arts also have to be able to play, so, for the technical framework is not so complete team, this technology package is obviously not very wise.
So why not choose a chatty development environment? Eclipse, for example, does not introduce much about eclipse, which is to say the WeX5 based on Eclipse development. First, WEX5 is based on Eclipse, and Eclipse Needless to say, IBM produced the Java development of the preferred IDE, which means that WeX5 can be seamlessly combined back and forth. In addition, WeX5 selection of the framework are very stable popular bootstrap, jquery, PhoneGap, coupled with the start of technical support, no longer in the dead of night alone in the big hole silently tears.
Component, WeX5 integrates very many boostrap components, and uses the knockout framework to bind component properties and data, styling, user interaction, and data interaction in a complete package. After data binding, changes to the front-end data are automatically reflected in the database, the data changes in the database are automatically reflected in the front-end display, and there is no need to consider too much data and performance-related implementation issues. The method used is also very simple, directly in the property page settings, management is also very convenient.
And in addition to components, WeX5 more interesting is that he provides a lot of ready-made application templates, large to a site (e-commerce, tourism and other business), such as a landing page such as a template, this really not too intimate. Many of the components we develop can be applied directly from above, or add small changes to achieve the desired effect, make good use of these ready-made things, the energy spent on business logic, this is the fast development of the King AH.
visual development in the WeX5One hears the visual development, the students first reaction is C # WinForm interface or PS in the picture editing effect bar, mouse point, where the effect goes. However, not so, front-end development and desktop software development is different, that is, must conform to the standard. The simplest example: you select a button and then draw a button on the Design view, and the button does not appear at the location you specify, but instead follows the standard document flow to determine the location. You can't drag the component anywhere, either, and the layout and style of the component will still conform to the standard document flow requirements. Of course you can specify absolute positioning to get out of the flow of the document, so you can specify the location, which is a standard practice. Essentially WeX5 just provides an interface to easily add components and modify styles, and is not a cheat device that allows you to design the interface with no imagination. You want to implement a layout, in fact, directly in the editor to write code, but also to specify positioning, floating, margin these, but WeX5 can be more intuitive implementation. Of course, many students think of the visual design of Dreamweaver, DW Visual design made out of the code will have a lot of garbage code, can only do prototype development, and can not be directly used for online publishing, and WeX5 generated is in line with the standard code, which is two different concepts.
WeX5 on the development of the application is also called the bottom-level middleware, using the PhoneGap kernel Cordova Framework, the UI system is entirely based on the html5+css3+js of the world, the introduction of jquery and Bootstrap and the bottom of the mobile optimization, Efficiency and performance are close to native applications. Therefore, the application developed with WEX5 can be packaged cheer Android app or iOS app, can also run in the form of web app on the public number, of course, the PC is OK. Back to everyone's concern about performance and volume, as WeX5 is called the Cordova Framework in the form of plug-ins, the UI layer performs on-demand loading, so the code is streamlined and performance is good.
Disadvantages of WeX5Everything is two-sided, on the one hand WeX5 chatty can help us to build a good development environment, provide a large number of packaged components, but on the other hand increased the size of the platform itself, and now because of the platform update faster, the corresponding technical documentation update speed to keep up with the platform update speed. However, this shortcoming is acceptable compared to the merits. Still struggling to find a good component library, tangled in a variety of frame selection students may wish to try WeX5, experience a big wheel of pleasure!
: http://www.wex5.com/downloads/
Oh, my God, I just want some pork.
