What are your best practices for web app development?

I fully agree with the emphasis on planning and design for web app development. However, it's crucial to add that reverse engineering similar apps is equally vital. This approach helps you learn from existing successes and mistakes, gain a competitive edge, work more efficiently, and create a user-centered interface. Combining both planning and reverse engineering is the key to a successful web app.

The best Advice for a pre-plan is to make sure that the project fits into the market's supply-demand, is there really a need for the product? are there any competitors with a similar product? and finally, will the product really answer the specific needs of this demand?

Below are the points I would consider as best practices for web applications or any other development practice: 1. Plan Before You Start 2. Responsive Design 3. Performance Optimization 4. Security 5. Testing 6. Code Quality 7. User Experience 8. Continuous Integration/Continuous Deployment (CI/CD) 9. Version Control 10.Documentation

In my experience we should be aware of our human resource and thier skills and their seniority. This is critical for meeting our deadlines.

Planning is an important phase for a web application development, in this phase the entire scope of the system should be finalised so that both DB, UX and SRS can be finalised in following steps which defines the systems progress.

Choosing a technology stack is an important step and should be done carefully. You need to take the project needs in the account as well as your team's familiarity with the stack. It's always faster to develop using known technology than struggling with newer ones. What would be helpful for the team to capture alternative solutions and debate on technology choices. It should be a team's decision. Also a quick POC can be done before getting into a new technology to make decisions with confidence.

One of the main best practices is selecting and using the design patterns to address common problems so that it helps us a lot to design and develop a better solution with the expected qualities such as performance, and compatibility and also can address the other challenges throughout the development and maintenance phase.

In my experience we should have a vision in our project and it will help us in selecting the right technology. If we want to our project be scalable we should use the scale cube and it will help us in scaling our application. If we want to have more choices in recruiting programmers we should choose more popular stacks, eg: selecting PHP and Laravel as our backend.

Where possible choose tools and software that can be fully installed and configured programmatically, making continuous delivery and deployment automation easier. Investing in continuous integration and delivery early in the product life can offer significant productivity gains. Regularly deploying and testing in production-like environments also reduce the risks and stress at go-live.

Remember that there's no one-size-fits-all technology stack. Your choices should align with your project's specific needs and constraints. Regularly reassess your stack to incorporate new technologies and best practices as the web development landscape evolves.

For coding standards and code quality checkups are much better with the technology. Using technology in this type of stuff is the most convenient way to do quality code. One of the best examples is SonarQube, which integrates with your code editor and CI/CD pipeline. SonarQube provides suggestions and possible logical ideas to improve the quality. this tool also provides security hotspots and code smells, which is the best thing for your code at another quality level. Devs must follow this tool and its suggestions.

When thinking about a web app, it is paramount to consider the security aspect. Unfortunately coding standards and conventions will only take you so far, as they usually only cater for a subset of the issues you will experience. You won't have much control over the environments the users use to interact with your application for example, but you still need to be prepared to manage it appropriately. Proper planning and implementation are needed however to make sure that all the potential attack vectors are catered for. Ideally you want security to be an intrinsic part of your web app, not something you try to 'bolt-on' afterwards.

To guarantee code quality, the CI/D pipeline should include a static code analyzer, such as SonarQube. We are compelled to uphold code standards and conversions through this kind of technology. Otherwise, it will create build failure. This kind of static analyzer supports a wide range of languages and frameworks, which ensures avoiding typical security concerns as well as code smells.

Adhering to coding standards and conventions is essential for code quality and readability. This includes using clear and consistent naming, proper formatting, indentation, spacing, and adhering to language-specific best practices. I'm personally using SonarCloud is a Cloud-based platform that provides real-time code analysis and security testing for web applications. It offers features such as static code analysis, security vulnerability scanning, and Web application firewalls (WAFs). -- I configured it with my VS editor and help me before code commit share the code smell with me which i resolve and code duplication as well. Overall a best tool to use which is useful.

As Rejuan explained about SonarQube, that is good example of using technology to writeup a quality code. If you use VS, it by default provide many suggestion and inbuild tools like code analysis. Resharper is another one which can be configured as per your organization or project standards which every dev need to follow.

Testing and debugging are crucial processes in software development, not limited to web apps, essential for ensuring high-quality outcomes across various domains. These processes validate and enhance software performance, user experience, and security, involving techniques like unit testing, integration testing, functional testing, and debugging tools such as debuggers and loggers. Implementing these practices throughout the development lifecycle is imperative for delivering robust and reliable software.

Red, green, refactor - Test Driven Design has proven time and again to be a far superior methodology then writing tests after the fact. Keep the code clean, write meaningful tests, and only write the code necessary to complete the tasks.

Testing and debugging are paramount in the software development lifecycle. Your web app should be subjected to all types of testing. Testing your code reveals errors, bugs and vulnerabilities that can adversely affect your site performance, security or usability. After testing, you proceed to debug all errors and bugs. You can look at these steps like a loop that continues iterating until no error or bug is left in your code. Let me explain in detail. You start with unit testing and can only proceed to integration testing if no error is found. If a bug is found during the other testing stages, you debug and start from unit testing. You continue this throughout the development process and before deploying to the production environment.

Without a technical / information architecture this is a moot point. I don't need to provide an example because EVERYONE has run across an app that doesn't work, leaves you lost or in a loop, has no feedback, or worse even you don't trust. There's two words but they bear repeating - QA Department. One of those and constant testing will give you the best product you can provide, but it has to be part of the project scope/cost.

Automate as much as possible when it comes to testing. Having people test software is critically important, but they are expensive and unreliable when it comes to highly repetitive work. A good quality test suite should be run on every commit, reducing the feedback cycling and catching errors early. Leverage high-value QA skills to define testing requirements and perform manual exploratory and accessibility testing. Errors caught downstream by QA or customers should be reproduced and fixed within your automated tests, ideally unit tests, to prevent them from reoccurring. Test Driven Development is a way to promote a good test suite, and often improves the software design by forcing developer to separate concerns and decouple components.

Getting the balance right is super important. Optimizing a web app is kinda like adding salt to your food; it’s crucial, but timing is everything! Diving in too early – that’s what we call ‘premature optimization’ – can be like salting your food before tasting. It’s easy to miss what really needs fixing. The focus should be on building strong core features first. Once that’s solid, using tools to find and fix the real issues is the way to go. In short, it’s all about making sure the app works smoothly, without getting stuck on tweaking every little detail right from the start.

In my experience optimizing web app can be done by leveraging from CDNs like cloudflare because it will provide cache and security for your project.

Web app optimization is paramount for user experience. A key tactic I advocate is the Critical Rendering Path (CRP) prioritization, ensuring vital assets load swiftly, enhancing perceived speed. Utilizing bundlers like Webpack can automate tasks like minification and code splitting, streamlining app performance. Service Workers, when implemented, cache assets for quicker subsequent loads. Periodic audits, using tools such as Lighthouse, are crucial to pinpoint optimization areas. By incorporating these techniques and routinely evaluating app performance, developers can craft efficient, responsive, and user-friendly web applications, ensuring a balance between speed and functionality

A web application’s performance depends on its capacity to handle multiple requests and delivering proper response to appropriate user in time. It’s possible only by optimising the application by monitoring all its parameters like “Server response time”, “Initial rendering time”, “Cache retained time”.

In SPA application, if you can work some sizing checks into your repo pipelines, it's a great way to check that your team isn't adding any unnecessary bloat in imported libraries that will slow down the customer experience.

In my experience when you are using a framework for your application you should follow it's standards and then you can upgrade to newer versions by that framework's docs.

This is all great information, but you need to add in the customer experience. If issues arise they need to be taken seriously especially if your product is part of competitive web group. If one person has an issue maybe 100 do as well, but won't tell you.

Web apps often exist in a highly volatile ecosystem, compared to other types of software. Browsers are always evolving to improve performance, security, or user experience. Many of the tech stacks use scripting languages with other software that actually runs it. Most web applications are built using frameworks and 3rd-party modules. All of these mean that our web applications' behavior is always changing and will degrade over time if we do nothing. We should ensure all parts of the tech stack are current and supported throughout the life of the application. This includes our hosted services, OS and applications, language versions, and 3rd party frameworks and plugins. If the software lives long enough this might even mean replatforming.

Remember the Triple Constraint. On time, on budget and quality - you can have two out of three. Figure out which are the most important - for my 2 cents quality should come first.

Yesterdays, the infamous Iron Triad trade-off was Scope-Cost-Time. Beforehand, one was fixed and other was set as negotiable, while the third one would be considered to be malleable; that is, with no guarantees. Interestingly enough, quality was not discussed at this point. I guess it was because it was supposed to be a non-negotiable, intrinsic feature of the Software Development Life Cycle process / project.

Choose fresh looking layout colors and icons. Use title attribute where you think normal user will struggle to understand the interface. also provide alt texts and think of accessibility. Use local storage to save users progress where needed.