"Go" Modular Web Kingdom

This article is translated by Emger. without permission, no reprint!
English Source: Future Insights. Content Summary

The idea of building applications using many standalone components is not new. The advent of Web component is a good time to revisit the component-based application development model. We can benefit from this process, understand how to accomplish goals with existing technologies, and make our own front-end Web applications in the future.

What is a component?

Software development is a field that is semantically rich (terms usually have more than one meaning). Obviously, the "component" here is a very generic salutation, so it is necessary to indicate what we want to express in the context of the front-end Web application.

Components in a front-end Web application are software that is designed to be generic and used to build larger applications that have multiple representations. It can be either a UI (user interface) or a purely logical code that serves as a "service."

UI components are easier to understand because of visual representations. Simple examples of UI components include buttons, input boxes, and text fields. Whether a hamburger-like menu button (whether you like it or not), tabs, calendars, options menus or WYSIWYG Rich text editors are some of the more advanced examples.

Components that provide service types can be difficult to understand, and examples of this type include cross-browser Ajax support, logging, or the ability to provide some kind of data persistence.

Based on component development, the most important thing is that components can be used to make up other components, and a rich text editor is a good example. It is made up of buttons, drop-down menus, and some visual components. Another example is the video element on the HTML5. It also contains buttons and contains an element that can render content from a video stream.

Why Build Components?

Now that you understand the meaning of the component, look at the benefits of building a front-end application using the component's approach.

Module

You may have heard of the phrase "component is a natural module" . Well, thanks for it, we're going to explain the terminology here!

You might think that the term "component" is more appropriate to describe the UI, while a "module" is more appropriate to describe the functional logic that provides the service. And for me, modules and components are similar in meaning, and they all provide organization, focus, and encapsulation, which are related to a functional unit.

High cohesion

is also a software engineering high-frequency word! we organize some of the relevant functions together, encapsulating everything, and in the case of components, it may be related to functional logic and static resources: JavaScript, HTML, CSS, images, etc. This is what we call cohesion.

This approach will make the components easier to maintain, and the reliability of the components will increase after doing so. At the same time, it also can make the function of the component clear, increase the possibility of component reuse.

can be reused

The sample components you see, especially Web Component, are more concerned with reusable issues. Clear functionality, clear implementation, and easy to understand API. It is natural to facilitate component reuse. By building reusable components, we not only maintain the principle of DRY (do not reinvent wheels), but also get the corresponding benefits.

Here's a reminder: don't try to build reusable components too much. You should also focus on the specific parts of the application that you need. If the corresponding requirement arises later, or if the component is indeed reusable, take a little extra time to reuse the component. In fact, developers like to create reusable blocks of functionality (libraries, components, modules, plugins, etc.), too early to make you miserable later. So, draw on other benefits based on component development, and accept the fact that not all components can be reused.

Interchangeable

An API with a well-defined component makes it easy for people to change the functionality of their internal functions. If the components inside the program are loosely coupled, you can actually easily replace the other component with one component, as long as you follow the same api/interface/convention.

If you use the real-time feature service components provided by Goinstant, they will be affected by the news of their closing service this week. However, as long as you provide the same data synchronization API, you can also build on your own using a FirebaseComponent component or PubNubComponent component.

Can be combined

As discussed earlier, component-based architectures make it easier for component groups to synthesize new components. This design makes the components more focused, and makes it easier to use the features built and exposed in other components.

Whether it's adding functionality to a program or creating a complete program, more complex features can be used to do the same. This is the main benefit of this approach.

Whether it is necessary to convert everything into components is in fact up to you. There is no reason for your program to be composed 你自己 of components into you 最惊叹的功能 , even 最花哨的功能 . These components, in turn, form other components. If you get the benefit from this method, try to stick to it. It is important to note, however, that you do not use the same method to complicate things, and you do not need to focus too much on how to reuse components. Instead, focus on the functionality of the renderer.

Start building Components Now

I used several principles and practices when Caplin Systems built its own component-based applications. These principles are supported by the BLADERUNNERJS (BRJS) Open Source toolset. It is called "bladerunnerjs" because we encapsulate the program functionality in something called blades. Blade is a feature that can be reused in an app, but cannot be reused between programs. When the functionality really becomes more generic, we move the corresponding definition to the library file for use among the programs. The components in a particular application (blade) and the common components between our programs can be used, as long as we find any libraries and frameworks that best meet our needs.

So what libraries and frameworks can help us build components now?

When deciding which technology to use when building your app, just look at the popular TODOMVC site to see a large selection of front-end libraries and frameworks. You might think that any of these scenarios can be used to build component-based applications. However, some of these programs have built-in support for components. Among the more famous are Angularjs, Ember and React.

How do the components communicate with each other?

It is necessary to simply refer to the problem of inter-component communication before delving into the sample. If the components are "independent" and "modular", how do they communicate with each other?

The most obvious answer is to let the components cross-reference each other and interact with the API between them. The problem with this is that it makes components dependent on each other. It might be okay in the short term, and after a while, you're going to get out of control when you're modifying a program, and modifying one component can have a huge impact on another component. Deciding to remove a component that does not bring the expected value can cause your application to stop working because there are several components that depend on it.

At this point, the solution is to provide loosely coupled scenarios where the components are rarely or hardly known to each other. Components do not directly create other components, they pass through "interfaces/conventions" or " services "when they need to communicate. We took a lot of these things into consideration when building the BRJS program, and we used ServiceRegistry resources such as accessing services for inter-component communication or Web APIs. Angular and Ember use services and dependency injection to solve such problems.

Sample Component My-avatar

To show how we built the most basic components with these libraries and frameworks, we built a simple example with a UI for retrieving and displaying a user's avatar. If possible, the component will have a my-avatar label and will take the avatar from the following two properties:

• serviceAllows you to set up a service. For example, twitter orfacebook
• usernameUsed to retrieve the avatar corresponding to the user name

AngularJS

AngularJS is probably the most Popular front-end solution for building programs today. As the creator of Google, rethink HTML and consider how to reinvent it to meet today's web development needs.

You can use custom directives to define components in angular. After that, you can declare your custom components using HTML tags.

View Code Demo: Http://jsbin.com/lacog/2/edit

This example shows how simple it is to use the angular instruction. Values scope Define the attributes that are obtained from the element and are my-avatar then used to build the corresponding IMG tag and render it into the user's avatar.

Ember

The frame and library debate is protracted, and the general framework is to force you to do things in a certain way, so it's evil. Obviously, angular is a framework, and Ember's author, Yehuda Katz and Tom Dale, are also happy to think of Ember as a framework.

Ember has built-in support for what it calls a component. The idea behind Ember components is to be as consistent as possible to the Web components, which can be easily migrated to Web components when supported by the browser.

View Code Demo: Http://jsbin.com/nawuwi/4/edit

The above example uses handlebars as the template, so the definition of the element is not the same syntax.

React

React, though a newcomer, has a lot of followers. It was developed by Facebook and has been fully used in Instagram's UI and part of Facebook's UI.

The recommended way to build components using react is to define them using something called JSX. This is a "recommended JavaScript syntax translation for use on react". Please don't be distracted by it. They have pointed out in the documentation that the idea is to help you write HTML tags in javascript.

I'm not saying that you can't add tags directly to HTML, but you have to use JSX to create your own components. However, as long as you define a component, you can use this component to create other components.

View Code Demo: Http://jsbin.com/qigoz/5/edit

Therefore, the declaration syntax used by the component requires the corresponding HTML element and the call to the pair React.RenderComponent .

Future: Web component and other

Web component is the future! As the name indicates, they promise to bring browser-native support that encapsulates functionality into components.

I'll simply show the Web component and show how we can use it now. For more in-depth information, refer to the "External resources" section at the end of this article.

The features they provide include:

Custom elements

What we are looking at above are examples of angular, ember, and react constructs my-avatar . If possible, such a way would be represented as a custom element added on the page or on the template. Web Component includes native support through custom elements – absolutely an essential part of the Web Component standard.

Defines a new element, including some events that access the element's life cycle, such as when to create ( createdCallback ), when to add it on the DOM tree (), attachedCallback when to detach from the DOM tree ( detachedCallback ), and when the element attribute changes ( attributeChangedCallback(attrName, oldVal, newVal) ).

An important part of the custom element is the ability to extend from the original element, thus obtaining the corresponding function of the original element. In the example we expanded 元素 .

Finally, in the code we write, the custom element is and tends to do is to abstract complex things, let the user focus on the value generated by a single component, so as to build a richer function.

Shadow DOM

Do you remember the IFRAME? We are still using them because they can ensure that the JavaScript and CSS of the components and controls do not affect the page. The Shadow DOM also provides this protection without the burden of an IFRAME. The official statement is:

The Shadow Dom is designed to hide the DOM subtree under the Shadow root to provide encapsulation mechanisms. It provides the ability to create and secure functional boundaries between the DOM trees, as well as the functionality to interact with these trees, thus providing a better encapsulation of functionality on the DOM tree.

HTML Import

We've been able to import JavaScript and CSS for a long time. The HTML import feature provides the ability to import and reuse HTML documents from other HTML documents. This simplicity also means that it is convenient to build other components with some components.

Finally, the format is ideal for reusable components and can be published with your favorite package management solution (ex: Bower, NPM, or Component).

Template

Many of us already use a solution like handlebars, mustache, or underscore.js (as we did in the Ember example above). Web component template元素 provides native support for templates.

Native templates let you declare tagged fragments that are categorized as "hidden dom" but parsed into HTML. They are not useful when the page is loaded, but can be instantiated at run time. They can be retrieved, but no related resources are loaded until the active DOM tree is inserted.

Platform.js

However, like every time a new feature is mentioned, we are not sure whether the browser supports these features.

Web Component Browser Support as of June 27, 2014

Again, we can start using some of the features of the Web Component with some magical, compatible code.

Web Component support with a compatible library

The good news is that the two most advanced browser vendors Google and Mozilla are working to improve the compatibility library to help us use the Web Component.

The following example shows how we can define an MY-AVATAR element that is extended as an IMG element after using Platform.js. The best part is that it can use all the features of the native IMG element.

View Code Demo: Http://jsbin.com/pihuz/4/edit

Click HTML5 Rocks Custom Elements Tutorial to see more information on creating a custom element.

Note: If you are interested in platform.js, you can also look at bosonic.

The purpose of native technology support is to provide us with the appropriate building base. So Web Component is not the doomsday signal for libraries and frames.

Polymer

Polymer is a demonstration of the best example of building native Web-based component features. It provides a selection of mechanisms to create custom polymer elements, and provides a number of core UI components that allow you to create your own applications.

Below you can see my-avatar the simple creation process of the element, and we also get the desired tag.

View Code Demo: Http://jsbin.com/gukoku/2/edit

Google is aggressively pushing polymer. Please see polymer Getting Started Guide for more examples.

X-tag and Brick

Mozilla has developed its own custom element compatibility library, called X-tag. X-tag is a multi-compatible library for enabling Web Component and will soon provide full support for Web component.

The following is a my-avatar custom component that uses X-tag, similar to a standard document:

View Code Demo: Http://jsbin.com/wexiz/2/edit

Mozilla also created a library called Brick, which includes X-tag, which provides "a set of UI components for quick and easy building of Web applications", using a similar approach to Google's polymer.

Summarize

Building applications using component-based architectures has many benefits that you can learn from existing frameworks and from the recommended Web component when building front-end Web applications.

The journey of the modular Web Kingdom has allowed us to hesitate when faced with the choice of frameworks and tools. However, the Web component will be the last beacon!

Web Component provides a native, unified way to build your application . The existing framework is likely to switch to the Web component or explain how to work with it. Ember's strategy is to make migrating to the Web component more convenient, while Facebook's react is a good example of demonstrating integration, and there is already a reactiveelements demonstrating it. Because angular and polymer are both Google's projects, they are likely to come together.

External resources (US)

• Eric bidelman–google I/O 2014–polymer and Web Components change everything your know about Web development
• Ryan seddon–web Directions–web components, the future of the WEB development
• Addy Osmani–lxjs–componentize the Web:back to the browser!
• Webcomponents.org a place to discuss and evolve Web Component Best-practices

"Go" Modular Web Kingdom