Wang Qiu: Progressive enhancement applied in mobile development

At the Baidu Developer Conference Xi'an in June 2012, Qiu Wang (@Sheldon-Qiu ), a front-end engineer from ThoughtWorks, gave a talk titled "Progressive Enhancement in Mobile Web Development". Later in the OpenSpace session, he also served as a topic panel leader for a discussion with attendees, and the author interviewed him about progressive enhancement, details of which are below.

InfoQ: Please tell us briefly about yourself and the work you currently do?

Qiu Wang: Hi everyone, I'm Qiu Wang, a front-end engineer at ThoughtWorks, a JavaScript language enthusiast, usually like to study technology to find breakthroughs, good at sharing experience. Recently been focusing on testing techniques for front-end development. Currently the development work involves some WebApp work, the platform used by the customer is mostly iOS Safari browser, in order to better solve the compatibility problem, we started to use the development idea of Progressive Enhancement (Progressive Enhancement), and gradually have a deeper understanding of it.

InfoQ: What is the core of PE and talk about your understanding of progressive enhancement?

Qiu Wang: PE is a development idea where content is the core and on top of that we add styles and scripts to make it look and behave. I think that for the user, BA, UX, content can be the content and functionality that the site brings to the user who visits, specifically the text in the site, but also the interactive features that the site brings to the user, such as sending emails, filling out forms, and maybe even the visuals, color scheme, typography, reading experience, etc. that it brings to the user. But, for us developers, the core content of PE is our HTML code, the clean and easy to understand markup guys. HTML is the basis for the Web to deliver content, for developers to make pages functional, and for almost all browsers to render pages functional, and for developers to add CSS styles and JavaScript code to make content work better on better browsers and enhance the user experience. The development of television is a good example of this. The TV sets in the house were changed from black and white in the early 90's to CRT color TVs around 00, and as technology has evolved, to now having LED HD TVs and even 3D TVs. For users, TV sets bring them TV shows, and after watching CCTV for so many years, advanced TV sets bring users a new viewing experience, bringing not only color, but also HD picture quality and a rich viewing experience. On the flip side, the same content TV shows can be broadcast on older TV sets and the content is just as accessible to users, it's all backwards compatible and therein lies the benefit that PE brings to the table. The development of browsers, from Netscape to the current Chrome is a similar process of development, from browsers that do not support image display, only simple text and links, to support images and grid layout, to the current WebGL graphics technology, gradually provide a better experience to the user. Our websites should give users the same experience as possible, not the exact same. You also can't expect a Kindle's silk browser to perform as well as Chrome. We need to take a fresh look at solving the problem of browser compatibility. Our development needs to shift from compatibility-oriented development to usability-oriented development, meaning that the functionality brought to the user by the website is cross-browser from the beginning, which is a different point of concern from elegant degradation.

InfoQ: From a current perspective, what progress has PE made and what are the main problems encountered?

Qiu Wang: Web technology is changing rapidly, due to the differences in browsers and platforms, PE development has become more complex, from the beginning of the three-layer structure to the current multi-layer structure, we can use CSS directly for enhancement, or JavaScript for enhancement, but also mixed together for enhancement, in addition to the dependencies between enhancements. For example, JavaScript support has an enhancement, and WebGL support has another enhancement attached, the latter dependent on the former. Although the model of PE becomes complex, we should control the complexity of the program by designing to control the layers of enhancements and the number of enhancements in each layer.

InfoQ: Please talk about what are the main concerns in mobile development?

Qiu Wang: I think the process of mobile web development and desktop web development is the same, so there is no need to deliberately separate them. The main points to note when developing web applications using the PE approach are the following components.

• UX designs will contain many complex styles and interactions, but development needs to start with the most basic semantic tags, because simple semantic tags make it easier for developers to create interactions, and all good design starts with simplicity. And, when we develop we should be thinking about what kind of native controls we need to collect valid information from the user, not just focus on the look. Especially in WebApp development, UX is often designed to look similar to Native App, aiming most to give the user the same experience as Native App. In this case, the more developers should start with basic HTML.
• The popularity of WebApp and the widespread use of advanced mobile browsers are closely linked, and these browsers often support HTML5 and CSS3 technologies well. These two technologies give us more semantic labels, the ability to store locally, more style support, powerful DOM APIs, and more. While we can expand on these platforms, if advanced technology forgets the nature of PE, your website can only be restricted to those platforms. If your customers are using browsers that don't support these technologies, or have JavaScript or CSS disabled, or visit your site when the network is slow, you have nothing to offer them and no value without users visiting. In other words, we should choose advanced technology that will give users a better and more accessible experience of using the core content. For example, for an image view, on a normal browser, you can use a separate page to open the image and use the browser features to zoom in and out, whereas on a mobile browser that supports touch, I can then support zooming directly by gesture where the image is displayed.
• When we use PE, we don't enhance it for a particular platform, but rather determine whether the platform we are currently running on supports a certain capability, such as whether it supports multi-touch, Canvas, etc. If you insist on determining whether the browser is IE, then when IE is updated, the user still won't be able to use the advanced features either. And some browsers are capable of emulating UA, so if a user uses a low-level browser to emulate a high-level browser to access it, your site will be a mess.
• PE development has become more than just three layers of HTML + CSS + JS. In a complex environment, the model of PE has changed to a multi-layered structure. With the base functionality intact, enhancements are made using CSS, then JavaScript, and even on top of multiple layers, enhancement dependencies are created, such as to detect another browser capability to support a particular feature based on the presence of a particular enhancement. In complex cases, we make use of libraries like Modernizr to help with development, and you can even use it for Responsive Design development.

InfoQ: How do you do PE testing?

Qiu Wang: The testing of PE can be boiled down to one phrase, which is to test individual enhancements based on ensuring that the most basic functions are sound. This way we can ensure that we can provide users with a fully working version of the script, whether they are on a slow network, or accessing the site with a browser that does not support enhancements, or even if they disable the script for security reasons. To achieve this, we can start with these points.

• Object-oriented development of individual enhancements, each of which can be switched on and off. The advantage of this is that enhancements can be easily managed to ensure that each individual enhancement does not affect previous functionality; by switching enhancements on and off, not only can you test whether the version before and after the enhancement works, but you can also test whether enhancements at the same level can be combined with each other to see if they affect each other; if you manage enhancements objectively, you can easily develop features like "back to base version" to allow users to actively switch versions in low bandwidth situations, like the Gmail mobile web version. Some people have questioned whether this brings more development costs, and my answer is no, good structure brings robustness and scalability to programs, just like object-oriented development does. In addition, modular front-end development does not clutter the code but makes it easier to manage the front-end code.
• Choose the appropriate driver to facilitate doing automated testing. Some tests that are not related to specific browser capabilities can be tested on the same browser, and tests that are related to specific capabilities will require the selection of an appropriate automated browser driver. For example, if you need to test features specific to mobile safari, then you can choose to drive the mobile safari browser directly, but general link jumps, form submissions, and other features can be tested on Chrome.
• If you are testing the gesture function on Mobile, you can also test it on Chrome or Firefox, because the Touch enhancement in Mobile is essentially bound to touchstart, touchmove, touchend events, then these events are considered custom events on browsers that do not support touch, and you can test them by setting off custom events.

InfoQ: As incremental enhancements are developed, the experience can even form a chain from bottom to top, so what should be done with all the enhancements built on top of it if the bottom layer of content changes?

Qiu Wang: This situation is one of the worse ones; whenever development encounters a change in the underlying program, it tends to lead to extensive changes and is inevitable. Our concern should be what we need to modify and the quality assurance of the modification. We develop each enhancement through object-oriented development, all enhancement points are managed, and when the underlying code is modified, it is easy to analyze which enhancements need to be changed, plus automated PE testing ensures that our changes do not affect the functionality before and after the enhancement. In PE development, the number of layers of this chain structure and the number of enhancements per layer should be controlled, as the complexity of testing will increase exponentially with each extension of an enhancement. As of yet, PE development is not as complex as this.

InfoQ: How do you choose the right enhancement during the enhancement process?

Wang Qiu: Web development has a principle that prioritizes the use of CSS to solve problems before considering JavaScript solutions. In PE development, it becomes especially important to be modular in order to have styles and scripts that are dynamically loaded on, and also to use a Library like Modernizr to help with development. If the enhancement is more complex and involves a lot of View manipulation, then some front-end templating techniques can also be used.

InfoQ: Since the features are incrementally enhanced, there are more points to cover for testing, and the enhanced part may be good but not necessarily good before the enhancement, even if no one used the version before the enhancement. Is all this extra effort worth doing?

Qiu Wang: I think it's worth doing, the benefits of PE on cross-platform are obvious to us because we don't pursue it so deliberately, the compatibility issues are solved at the moment we start development. Also, PE being content-focused allows us to always keep our focus on the content we should be providing to our users, because content is where the business is top of mind and generates value. Using the payment feature as an example, if the site doesn't provide the most basic version of HTML for users to complete the payment, losing even just 5% of users over the course of a year is a huge loss. Also, PE development in terms of usability, we even need to consider whether the content of the site works in the reader, whether it displays well enough in print mode, etc. I guess that's one aspect of the quest for excellence in software. For development, PE also brings robustness and expansiveness to our programs, making our front-end code more manageable and compatibility testing more comprehensive.

InfoQ: During your discussions with developers at the Baidu Developer Conference, what topics were the developers more concerned about?

Qiu Wang: I'm very happy to talk to the developers on site. The main topics mentioned are about dynamic loading CSS and JavaScript in progressive enhancement, about how to choose between WebApp and NativeApp, and talking about web development trends, such as games, 3D development. Some developers are also interested in hiring for the front end of our company. The whole process was fun and I learned a lot from interacting with them.

InfoQ: Are there resources recommended for learning (articles, projects or books, etc.)?

Qiu Wang: Here you can recommend a book on Progressive Enhancement, Designing with Progressive Enhancement, also, you can find many articles on Progressive Enhancement on http://www.alistapart.com/. For development, check out the official websites of Modernizr and jQuery Mobile to see how to use them. Also, there will be articles related to progressive enhancement in my blog, so feel free to subscribe.

Recommended>>
1、Natural Language Processing Explaining the principles and basics of natural language processing based on NLTK
2、Translation Swift 22Optional chains
3、Applying FriendlyId in Rails
4、Stanford develops cluster robots that perform ILOVEYOU as a group
5、Python implementation metaalgorithm AdaBoost

已发送

发送中