Emerging technologies, Web development how to choice

By Herman Ford,2015-10-01 16:28
12 views 0
Emerging technologies, Web development how to choice

    Emerging technologies, Web development how to choice?

    The concept of applying Web as a platform, is an unprecedented popularity.But the tools that are used to create these so-called "Web application" there are still many often ignored or misunderstood by us trap.Single-page Web application framework has received great attention, we can use the framework to create some complex high performance applications, compared with the traditional site, these applications interaction more reliable and more rich.But all these benefits, and the resulting thinking mode and change the way of development, at the expense of the browser's basic skill for a price, Web developers sometimes it for granted.

    JavaScript can be very fragile

    As manufacturers constantly hype the heat, we may think when the user's browser can't execute JavaScript, does not need to provide a fallback plan for them.The user's browser cannot execute JavaScript must be for a reason, they manually choose to disable JavaScript is just one of many reasons.Maintain the UK government web site team service (GDS) - the government figures per 500 access GOV. Users in the UK, there are 5 people did not request JavaScript, only 1 person take the initiative to disable JavaScript, other 4 people may not request for the following reason: enterprise proxy server limit is too high;High latency in JavaScript request timeout;Or even a syntax error has not been noticed.

    In addition, the CSS and HTML can be graceful degradation, while JavaScript can't do.This means that if a developer using a single ES6 grammatical features, or even call a standard library function, there is no proven their JavaScript is likely to end in the process of execution or does not perform at all.If you use JavaScript to enhance site, these problems mentioned above still can live with, after all, the visitor can still access the link, can submit the form, you can use the Web can provide the most primitive function;But if JavaScript is part and parcel of the site, no matter who use slightly outdated browsers might get a blank page, there are also no man page to explain why a blank.

    The semantic structure is still very important

    Tim berners-lee design HTML since 1993, HTML for interrelated documents defines a general structure, is also known as the Web.Penetration in the general structure of semantic meaning provides the information contained in the Web page with the computer can process context.From the practical sense, this additional information to enhance the user experience when using a Web browser.For example, a Web browser can achieve a USES the time element is added to the user's calendar of events defined method;Screen reader can read through a list in a different way or a paragraph of text, in humans, the document list and paragraphs look markedly different, HTML provides generic framework for computer can clearly distinguish the list with the paragraphs.

    HTML implied semantic meaning make Web with native applications such as Cocoa, WPF and Qt environment have different development direction.Structured information is very important for the Web, because we need to access the Web information by different ways.When I create an iPhone application, I can safely assume that every person in the same way to use it.My App will present the information in the same way, and I was able to completely control information in the application of the final rendering.Even if some people through the VoiceOver (Apple for visually impaired people to provide assistive technologies) to interact with my App, they can still like sighted users: by clicking on the screen.The only difference is that they need to listen rather than to read the text.

    But it doesn't work this way on the Web.People except through a Web browser to access Web site, through the application of the similar Pocket, Instapaper to consume content, these applications attempt to use the structural information of a Web page to extract the site of the related content.Smart watches directly on the browser may ignore your layout, and then through the way of more suitable for an inch screen show you information.Equipment in the future may be able to directly to the web site provides information into thinking of the human brain, who knows?Looking back, the VoiceOver works in order to read the text of user's fingertips arrangement Web screen reader will read through all the documents, however, ignore the layout, and through the standardization of HTML tags semantic meaning to infer the document.For example, recently introduced the main elements (translator note: reference is used to define the main body part that the document Web screen reader can read and identify such labels.For a visual normal users, access your site via Google Chrome, whether you use the < main > or < div id = "main" > basic no difference.But for using other Web client, for example, using a screen reader or Instapaper, implied meaning of the main elements allows the software to help them navigate the document better.

    So, developing a Web application is not as easy as to native platform development.In five major browsers to ensure that the application can work according to our demand and timely release, for Web platform is not enough, we need to test our work in a screen reader, need to review our tags to ensure that the application can provide semantic metadata as possible, not only need to coordinate with the existing Web client, also want to prepare for all device that may occur in the future.

    Single-page Web application framework

    When using the similar presents and Ember "single-page Web application framework," the popular approach is to treat website like native applications, as a result, developers will rarely consider the Web platform.They make assumptions easily destroyed for the user does not meet the assumption of the user's real experience.This kind of thinking mode will lead to what the consequences?Let's look at an example, and carefully thinking I recently found in Patreon website a login button (later changes) :


    data-ng-click="triggerChangeWindow(navigation.login_url)">Log In

    Patreon the fairly standard login button act as a link, there is no need to special JavaScript.

    The link in my Safari can run normally, but in other environments, in addition to the major browsers can't use this button.Suppose we have a smart watch browser, called WatchBrowse list probably need it for the user to display a series of links to implement site navigation, because this special smart watch no cursor used to interact with the page.HTML defines a in a standard way of creating links on the Web page elements (a), is listed on the page every WatchBrowse theory a label and the href attribute and content of it, "unless there's a similar Patreon website, and the site decided to avoid Web standards and to achieve the basic functions of the browser.

    If a Patreon used a tag instead of span, WatchBrowse can probably find a link and display it on the list, you can simulate a click event for links, when a user select the link to jump.But if the browser know in advance whether links will guide where will be better?A browser extensions may through the label href attribute to find the links on a page, if you want to quickly find someone Twitter account link, then provide a href attribute can be traced back to be very practical.The href attribute when the link is no longer a static value, but on arbitrary JavaScript click on the handle, the useful function cannot be achieved.

    Patreon website is founded based on presents, presents itself is not wrong, the HTML as the view layer and use the framework to realize probably is a major cause of lead to Patreon bad decision.

    If we according to the framework developers in their document recommended method to create the same link?A more standard way to create links may seem like this: Log In

    When through the client-side JavaScript rendering to the DOM, the code above is converted into this:

    Log In

    Ember in the same way to deal with the problem.A link in the Ember in the template is defined like this:

    {{#link-to}}Log In{{/link-to}}

    When it is rendered to the DOM, it become like this:

    Log In

    Ember and presents will intercept link click event, so that you can not to render new content by reloading the page.It is essential that if the click event is triggered and the browser has never loaded the href value, for users to click on links that will only bring an additional pages overloaded, doesn't look would be any different, because the Ember and presents would not have been tried by default in accordance with the URL to define their own route to the wheel.

    However, under the current form, Ember and presents still need to load JavaScript to render their templates and create the connection in the first time.Use presents a 500 visit or Ember building site in four people will experience a completely white.

    Is there a solution?

    If the content of the dynamic Web page on the server side rendering, the rendering code simply support running on the server side.But to render a Web page on the client, the code needs to support each may visit the Web site of the client.Developers are now gradually abandoned rendering of a service, because they can't provide the client rendering of rich application experience.But I think in the client application in the new world, the service side rendering has a place.

    Currently, developers use single-page Web application framework need to make a trade-off for loading the JavaScript.But in my opinion, these are framework to solve the problem.As a Web developer, we had the opportunity to use one of the most generic programming language for the Web application code.If the framework developers can day and night (there is no denying that the task is very difficult) to make the application as is running in the Node in the browser, the server can complete the initial page rendering task, by the browser is responsible for handling all subsequent tasks., of course, if the server can be to paint the link in the form of a label, like Ember is implemented on the client, you can allow received no user JavaScript (no matter what kind of reason) browse the website.Can also through the server (rather than on the client) to run on all of the validation logic and subtasks, make the normal work of the form.If the framework maintainer toward this direction from the start, then each using the framework developers can immediately a can only work in the application of the latest Web browser into the experience of a kind of progressive enhancement, doing so can compatible with almost any Web client - past, present, and future.

    Progressive enhancement for Web developers already is important one annulus, it makes us realize the for Web experience content is vital part of any additional improvements in view of the user experience should not destroy any a client to access the content of the Web page contains.Now create a single page application methods tend to give up this rule, however progressive enhancement and single-page applications in essence could be compatible with each other.

    In fact, have a lot of progress in this field, for example, an Ember internal team is by implementing the rendering of a service to improve the Ember with search engine compatibility.But the single-page Web application problems solution does not only depend on the pure technical point of view: the way people look at the Web has become an increasingly serious problem.The practice of the Web as another application platform has been commonplace, but the Web can do much more than this.Whether visitors iMac by $2000 or $50 android tablet, even in the future we can't imagine, cost 5 dollars can buy Web client to access, Web has always been a common information platform.In fact, without sacrificing a small percentage of the user experience is very important for us, so that we can in the process to improve a little bit about the the rest of the universality is destroying Web experience

Report this document

For any questions or suggestions please email