Things you must know to develop a Web App in 2015_html/css_WEB-ITnose

Over the past year, I have been developing my first major web application from scratch. Experience teaches a lot that was not known before, especially in terms of security and user experience.

It's worth mentioning that the last time I attempted a build of any reasonable complexity was in 2005. Therefore, in terms of security defense, I still have a lot to add.

Even outside of the things I already know or have encountered, here is a list of details that are very easy to forget when developing web applications, especially when you are just starting out.

This list may not be exhaustive in some respects, and if you are an experienced developer I doubt there will be anything here that will surprise you. However, I hope it helps someone who may be missing something.

Security

Confirmation Email: When a user signs up, you should send them an email with a confirmation link, and then the user has to click on the link to confirm . If the user changes their email address at some point, the same action flow should be triggered.

Identity Management: When storing passwords, first encrypt them with a widely used encryption library. If you can't manage passwords, then identity management can be managed by Facebook/Github/Twitter, just using an authentication interface.

Encryption: For all certificate issues on the Web, there is no better technology than SSL, use it, or use HSTS.

Certificates: Never check any form of server certificate (API key, data block password) into the source control repository.

Project: Animation

For the love of it all, don’t animate every element in your app, as most CSS animations will trigger Layout redraw. You'd better limit it and use transformations and opacity where possible.

Avoid lazy transition calculation, if you must use it, make sure to use specific properties (eg: "transition: opacity 250ms ease-in" instead of "transition: all 250ms ease-in").

User Experience

Form: When submitting a form, the user should get some feedback about the submission. If the page does not jump to other pages after submission, then there should be a pop-up type reminder to let the user know whether their submission was successful or failed.

Login redirection: If a user wants to access a page on your website, but he is not logged in, then the user should first be directed to the login page, and then the user will be directed to the login page after logging in. Jump to the page he was trying to access before. If they enter the wrong password when logging in, they should be prompted to give them the option to reset a new password if they forget it.

Email

Subscription Settings: The email you send to each user must contain at least a link to a page in your app where the user Their email settings can be modified; there should also be a separate link for users to unsubscribe. Don’t let them email you to unsubscribe.

Mobile

You don’t have to develop a mobile client for your app. But, to develop or not to develop, you must understand that it is a very important decision. Because this will have a significant impact on the designers and engineers developing your app.

The following assumes that you have selected a specific mobile version as one of your platforms. I happen to use Grunt as my build tool, so I already have some Grunt plugins available. However, there may be something similar to the JavaScript tool you are using.

Engineering

Single Page Application: Recently Single Page Application (SPA) is mainstream, its main advantage: SPA only requires less loading, only you need to load resources required without having to load them over and over again. If you are just about to build a new web application, you should choose SPA.

User Interface

Resolution: When you develop your MVP, you may not need to ensure that your UI works gracefully across all devices, however, But you should make sure it works within the basic range of phone and tablet resolutions.

User experience: Bandwidth

Mobile bandwidth is more valuable than desktop bandwidth, which is also a big topic in mobile applications. Therefore, you should look for every opportunity to reduce the number of requests, use asynchronous whenever possible, and reduce the size of the resources being requested.

JS and CSS: You should put application-specific JavaScript and CSS into one file (one for JS and one for CSS) and try to keep their sizes as small as possible. Your friends here are Grunt-contrib-concat, Grunt-contrib-cssmin and Grunt-contrib-uglify.

Use CDN for all resources: There are two main benefits of using CDN. The first one that applies to all hosted resources is positioning. CDN can ensure that your resources are in a certain area, and then users can access the resources nearby when they visit, which reduces resource loading time.

The second one is the dependency files that apply to your web application (e.g. non-application-specific styles and JS code). Using a CDN for files that web applications depend on can greatly reduce load times through user caching. For example, many websites rely on Angular.js, and using a CDN to link to the core Angular code will trigger a cache hit, and the mobile device user will receive it from the cache instead of making another HTTP request.

CSS-Reduce script size: Most developers may use some kind of UI framework (such as Bootstrap, Foundation, etc.) when they first start. These frameworks can be very large, and they are usually available in stripped-down styles on most CDNs, and you may not need to use all the styles they contain. Often, tools like uncss (often paired with tools like processhtml ) are incredibly useful in helping you remove styles that you no longer need.

It should be noted that the uncss parser cannot parse dynamic styles. So you have to be careful when checking to make sure you don't delete the wrong styles that are actually used in your application.

CSS - Place key code in the head: Key styles should be available before the app is loaded, and they should be placed in the Head. Secondary styles can be loaded later.

JS - Reduce Script Size: Since the JavaScript code in your product does not require any internal variables to be understandable to people, it might be helpful to rename the variable user.email to u.e To reduce the size of your script files. Fortunately, there is a tool that can help you do this job - the aforementioned uglify, which can make your JS code difficult to read, but the JS file will be smaller.

User Experience: Forms

Make sure your forms and workflows are simple, overall this is a good tip. This is especially important if you choose to deploy for mobile as well, no one wants to fill out a 5-page form on their phone.

I hope this list can be helpful to those who are preparing to develop your first web app, or those who have already started development, or are not familiar with front-end design optimization techniques. If you start developing and discover some other forgotten technique or trick, please note it and let me know and I will consider adding it to this list.

Original address (English): http://blog.venanti.us/web-app-2015/