{"id":12505,"date":"2019-09-19T10:45:36","date_gmt":"2019-09-19T15:45:36","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/blog\/?p=12505"},"modified":"2023-05-19T16:36:50","modified_gmt":"2023-05-19T21:36:50","slug":"7-principles-of-modern-web-application-development-2","status":"publish","type":"post","link":"https:\/\/www.mrc-productivity.com\/blog\/2019\/09\/7-principles-of-modern-web-application-development-2\/","title":{"rendered":"7 principles of modern web application development"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-725\" src=\"https:\/\/d4ey5ve3eb27c.cloudfront.net\/img\/icons\/development.png\" alt=\"development\" width=\"76\" height=\"100\" \/><span style=\"font-size: 14px;\"><em>Summary: Driven in part by recent trends, web application development has changed over the past few years. Development principles that applied in the past no longer make sense, while new ones have sprung up. In this article, we explore the principles that modern web developers must follow when building successful applications.<\/em><\/span><br \/>\n<a name=\"20180321\"><\/a><!--more--><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-9492 alignright\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2015\/09\/entrepreneur-696966_640-300x198.jpg\" alt=\"\" width=\"300\" height=\"198\" \/><\/p>\n<p>What makes a \u201cproductive developer?\u201d<\/p>\n<p>The answer isn\u2019t as obvious as it might seem. Generally speaking, productivity correlates directly with speed. With developers, however, it\u2019s different. Speed doesn\u2019t necessarily equal productivity.<\/p>\n<p>For instance, suppose a developer completes a project in half the time expected. Is that developer productive? It depends. Does the application meet the specs? Is it usable? Is it secure? Will it scale up with the company? Will it adapt to future needs? I could go on.<\/p>\n<p>As you see, the term \u201cproductive developer\u201d isn\u2019t clear cut. A \u201cfast\u201d developer that creates complex, unmaintainable applications isn\u2019t productive. Quite the opposite, in fact. I\u2019d argue that a \u201cproductive developer\u201d is one who builds applications the right way, in the most efficient manner possible. In other words, productivity = speed + quality.<\/p>\n<p>The next logical question: What makes a \u201cquality\u201d application? Is it one that delivers on the specifications? I believe it goes far beyond that. A quality application is one that\u2019s built for both the present and the future. It adapts to changing technology, solves the user\u2019s long-term needs, grows with the business, and is easily maintainable.<\/p>\n<p>So, how can developers build quality applications? It starts with an understanding of modern web development principles. These principles help developers create successful applications\u2013those that meet their user\u2019s present and future needs, and adapt to the ever-changing tech trends. While this isn\u2019t a comprehensive list by any means, here are 7 important principles of modern web application development:<\/p>\n<h3>Principle #1: It\u2019s all about the user<\/h3>\n<figure id=\"attachment_9616\" aria-describedby=\"caption-attachment-9616\" style=\"width: 300px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-9616\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2015\/10\/customer-563967_640-300x193.jpg\" alt=\"\" width=\"300\" height=\"193\" srcset=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2015\/10\/customer-563967_640-300x193.jpg 300w, https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2015\/10\/customer-563967_640.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-9616\" class=\"wp-caption-text\">photo credit: <a href=\"https:\/\/pixabay.com\/en\/customer-family-magnifying-glass-563967\/\">geralt<\/a> via <a href=\"http:\/\/pixabay.com\/\">pixabay<\/a> <a href=\"http:\/\/creativecommons.org\/publicdomain\/zero\/1.0\/deed.en\">cc<\/a><\/figcaption><\/figure>\n<p>Over the years, the web has evolved. Tools and methodologies have changed. New devices have emerged.<\/p>\n<p>However, one development principle has remained&#8211;and even become more important&#8211;throughout the years: It\u2019s all about the user.<\/p>\n<p>The problem is, this key principle is too often lost in the shuffle. Sometimes developers get wrapped up in the latest and greatest technology. Other times they\u2019re forced to meet a tight deadline and have to rush through the project.<\/p>\n<p>How can developers put the focus on the user? Before you start any development project, ask these two questions:<\/p>\n<p><strong>1. Who wants this?<\/strong><br \/>\nIt\u2019s an obvious question that\u2019s often overlooked. Who is asking for the web application? Is it a customer\/prospect? Or, is it someone who believes that users need it? As explained below, the answer to this question can be the difference between a failed project and a successful one.<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\u201cDevelop with the user in mind,\u201d says Shayne Sherman, CEO of <a href=\"https:\/\/techloris.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red; font-weight: bold;\">TechLoris<\/span><\/a>. \u201cThis may seem obvious but this doesn&#8217;t just mean think about what they want. Figure it out. I&#8217;ve been with companies where we spent months developing something the marketing team wanted only to deliver it to the customers and find out they don&#8217;t want it at all. Always show prospective features to a subset of customers and get their opinions before you invest time and resources into the development.\u201d<\/p><\/blockquote>\n<p><strong>2. How will it be used?<\/strong><br \/>\nIt\u2019s essential that you never lose sight of the main goal: Providing a great user experience. To provide a great experience, you must approach development from the user\u2019s perspective. Ask questions like: Who is using it? What problems are they trying to solve? How will they use it?<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\u201cDevelopers and users think in different ways,\u201d says Tigran Nazaryan, Machine Learning Team Lead at <a href=\"https:\/\/10web.io\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red; font-weight: bold;\">10Web<\/span><\/a>. \u201cWhen building a web application, the customer\u2019s requests are the priority, neither technology, nor the developer\u2019s preferences. Thinking in terms of user stories helps a lot when defining tasks and to-dos. Who\u2019s in need of this product? How will they use it? What expectations do users have? What would be the most intuitive UX and behavior of the app?\u201d<\/p><\/blockquote>\n<h3>Principle #2: Security is not a feature<\/h3>\n<p>A recent <a href=\"https:\/\/securityintelligence.com\/news\/94-percent-of-web-applications-suffer-from-high-severity-vulnerabilities\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red; font-weight: bold;\">report<\/span><\/a> found that 94 percent of web applications suffer from high-severity vulnerabilities. Even worse still, the vast majority of web applications tested suffered from common vulnerabilities like Cross-Site Scripting, SQL Injection, and others.<\/p>\n<p>Consider that for a moment: Most business web applications suffer from widely known, yet preventable security vulnerabilities. We\u2019re not even talking about new threats. These are vulnerabilities listed as a top security threat for over 10 years running.<\/p>\n<p>Why does this happen? While the reasons vary, one issue is that many developers still take a cavalier approach to security. They treat it like a feature they can just add at the end. The fact is, that\u2019s not how modern web application security works. More than ever, security must be built into your web applications from the very start.<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\u201cSecurity is too important to neglect till right before release or even after release,\u201d says Nazaryan. \u201cThe design and architecture of the application should include all the security aspects according to the established requirements and standards. This way you\u2019ll avoid any financial and reputational costs associated with vulnerability discoveries, exploits, data losses, or downtime because of your sites getting hacked.\u201d<\/p><\/blockquote>\n<h3>Principle #3: Tools are your friend<\/h3>\n<figure id=\"attachment_8514\" aria-describedby=\"caption-attachment-8514\" style=\"width: 300px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-8514\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2014\/10\/tool-384740_640-300x199.jpg\" alt=\"tols\" width=\"300\" height=\"199\" srcset=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2014\/10\/tool-384740_640-300x199.jpg 300w, https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2014\/10\/tool-384740_640.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-8514\" class=\"wp-caption-text\">photo credit: <a href=\"http:\/\/pixabay.com\/en\/tool-work-bench-hammer-pliers-384740\/\">TiBine<\/a> via <a href=\"http:\/\/pixabay.com\/\">pixabay<\/a> <a href=\"http:\/\/creativecommons.org\/publicdomain\/zero\/1.0\/deed.en\">cc<\/a><\/figcaption><\/figure>\n<p>We\u2019ve seen major growth in development tools recently. Developers have access to libraries, frameworks, and templates. They can use GitHub, IDE\u2019s and low-code development platforms. Tools like these are quickly becoming a necessity to the modern developer.<\/p>\n<p>Why?<\/p>\n<p>We can boil it down to a couple of reasons:<\/p>\n<p><strong>Web application development is more complex<\/strong><br \/>\nIn the past, application development had more of a specialized focus. Programmers often focused on a single language for their development.<\/p>\n<p>Now, that\u2019s changing. The modern web developer is something of a \u201cjack-of-all-trades.\u201d They must understand programming languages, web vulnerabilities, API integration, responsive design, javascript, UX principles, modern architecture, and much more.<\/p>\n<p>In other words, web application development is quickly becoming more complex. It requires an ever-evolving skill-set. Tools let developers bridge this skills gap&#8211;helping them accomplish tasks they couldn\u2019t do on their own.<\/p>\n<p><strong>Developers are under more pressure to move quickly<\/strong><br \/>\nDevelopers are under more deadline pressure than ever. Businesses want their applications delivered quickly\u2013without sacrificing function or security.<\/p>\n<p>In many cases, these demands are physically impossible using manual coding methods. As a result, more businesses are adopting development tools to speed up the process.<\/p>\n<h3>Principle #4: Applications have a need for speed<\/h3>\n<p>Over the last few years, we\u2019ve seen the need for application speed increase&#8211;driven by two major factors.<\/p>\n<p><strong>First, web users have become increasingly less patient<\/strong>. According to these <a href=\"https:\/\/www.digitalinformationworld.com\/2018\/09\/the-human-attention-span-infographic.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red; font-weight: bold;\">statistics<\/span><\/a>, humans now have shorter attention spans than your average goldfish. In fact, from 2000 to 2015, attention spans dropped by nearly 4 seconds.<\/p>\n<p>The declining attention spans comes at a time of rapidly increasing data. Modern applications must handle more data from more data sources than ever before. If not properly optimized, this rise in data can lead to slower applications&#8211;which will drive away users.<\/p>\n<p><strong>Second, page speed is good for business<\/strong>. Google spearheaded this trend when they announced that they used page loading speed as a ranking factor. Slow pages get penalized in search results.<\/p>\n<p>What does this mean for developers? Web application performance optimization is quickly becoming an essential element of the development process.<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\u201cYour websites must be blazing fast,\u201d says Bryan Osima, CEO, <a href=\"https:\/\/www.uvietech.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red; font-weight: bold;\">Uvietech Software Solutions Inc<\/span><\/a>. \u201cThis ties in with the mobile-first context, again. Mobile data access is not always the most reliable, and sometimes can be expensive. As such, any modern web developer must highly optimize their websites for speed and reduced data consumption.\u201d<\/p><\/blockquote>\n<h3>Principle #5: When it comes to architecture, think long-term<\/h3>\n<figure id=\"attachment_9447\" aria-describedby=\"caption-attachment-9447\" style=\"width: 300px\" class=\"wp-caption alignright\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-9447\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2015\/08\/crane-821495_640-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" srcset=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2015\/08\/crane-821495_640-300x200.jpg 300w, https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2015\/08\/crane-821495_640.jpg 640w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-9447\" class=\"wp-caption-text\">photo credit: <a href=\"https:\/\/pixabay.com\/en\/crane-construction-isolated-821495\/\">fancycrave1<\/a> via <a href=\"http:\/\/pixabay.com\/\">pixabay<\/a> <a href=\"http:\/\/creativecommons.org\/publicdomain\/zero\/1.0\/deed.en\">cc<\/a><\/figcaption><\/figure>\n<p>The emphasis in development these days revolves around the user experience. As a developer, you must give the users well-designed and easy-to-use applications, or risk getting ignored.<\/p>\n<p>But, don\u2019t get so caught up in the interface that you forget the most important part of an application: The architecture. While application architecture might be invisible to the users, the impact that architecture has on your overall application is enormous.<\/p>\n<p>For instance, architecture impacts security, maintenance, flexibility, scalability, and more. Good architecture may take more time upfront, but it\u2019s an essential part of building long-lasting applications.<\/p>\n<p>How can you approach architecture from a long-term perspective? Here are a couple of ideas:<\/p>\n<p><strong>Stick with proven technology stacks<\/strong><br \/>\nDevelopers love trying the latest and greatest framework or tool. There\u2019s nothing wrong with this&#8230;as long as they\u2019re not using it for their next big project. While it may sound boring, stick with proven technology stacks when creating enterprise web applications.<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\u201cThere are thousands of web frameworks and tools out there,\u201d says Adham El Banhawy, React Developer at <a href=\"https:\/\/www.bestresponsemedia.co.uk\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red; font-weight: bold;\">Best Response Media<\/span><\/a>. \u201cHowever, many are poorly documented or not maintained well (i.e. they receive little to no periodic updates). When starting a project, instead of going for what\u2019s hot and new, go with what\u2019s well documented and has an active community of contributors or even big companies (like Google, Facebook, Adobe, etc.) providing official support and updates.\u201d<\/p><\/blockquote>\n<p><strong>Build for growth<\/strong><br \/>\nWhen planning your application architecture, look beyond the initial requirements. What happens if you need to add more features in later? What happens if you need to switch to a different database or server? What happens if you need to support more users than you think?<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\u201cThink ahead about any possible growth of the application or the number of its users,\u201d says Nazaryan. \u201cIs the product ready for that? What if suddenly a traffic surge floods the site or what if users exceed their storage resources? What if the web app needs to be deployed on the second server located on the other side of the globe? Making architecture scalable greatly reduces ongoing maintenance and development costs and does not make the app or service slower nor hinder its growth because of technical limitations.\u201d<\/p><\/blockquote>\n<h3>Principle #6: Separate concerns within your applications<\/h3>\n<p>I remember back in the day when developers used a monolithic approach, building every feature directly into their application. The big problem with this approach: Maintenance. A change to one area might break other areas. Over time, the applications became unmanageable.<\/p>\n<p>These days, modern architecture calls for a separation of concerns. For instance, we&#8217;re a big proponent of the n-Tier architecture approach, which separates the application into layers. The advantage with this approach: It lets you maintain and enhance each application layer separately.<\/p>\n<p>For instance, suppose you need to make your applications responsive for use on mobile devices. Or, suppose you want to update your application&#8217;s look and feel. n-Tier architecture lets you replace the presentation layer without touching the other layers. As explained below, this keeps your applications flexible and helps you adapt to changes as needed.<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\u201cPeople are fickle,\u201d says Sherman. \u201cTheir tastes change and what&#8217;s considered modern on the internet changes just as fast. You don&#8217;t want to have to rewrite your entire application whenever tastes change. If you keep your display logic and your business logic separate, you can whip up a new interface to keep up with the times while the underlying logic stays the same.\u201d<\/p><\/blockquote>\n<h3>Principle #7: The only constant is change<\/h3>\n<p>Technology is always evolving. As developers know, this is both a blessing and a curse.<\/p>\n<p>On one hand, application development is constantly advancing. New libraries, tools, techniques, and frameworks appear on a regular basis. These advancements lead to better application features and more efficient development.<\/p>\n<p>On the other hand, new security vulnerabilities are constantly emerging. A previously secure application may now have a glaring security hole. It&#8217;s the developer&#8217;s responsibility to keep their applications up to date with the latest security standards.<\/p>\n<p>In other words, modern web applications are never really &#8220;complete&#8221;. You can&#8217;t deploy an application and forget about it. As explained below, modern developers must constantly update their applications to adapt to changing trends and security standards.<\/p>\n<blockquote style=\"line-height: 1.7em; background-image: none; margin-left: 0; padding-left: 18px; height: auto;\"><p>\u201cWeb applications, in particular, are prone to external changes in the internet ecosystem affecting it, particularly evolving security standards,\u201d says El Banhawy. \u201cTo ensure that your web application remains functional, secure, and competitive in the future, you must always try to improve it and adapt to external changes affecting your app quickly.\u201d<\/p><\/blockquote>\n<h3>Summary<\/h3>\n<p>These are just 7 principles of modern web application development, but the list could certainly be longer. Would you add anything to this list? If you would like to add anything to this list, I\u2019d love to hear it. Feel free to share in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Summary: Driven in part by recent trends, web application development has changed over the past few years. Development principles that applied in the past no longer make sense, while new ones have sprung up. In this article, we explore the principles that modern web developers must follow when building successful applications.<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","slim_seo":{"title":"7 principles of modern web application development - mrc&#039;s Cup of Joe Blog","description":"Summary: Driven in part by recent trends, web application development has changed over the past few years. Development principles that applied in the past no lo"},"footnotes":""},"categories":[4],"tags":[36,15],"class_list":["post-12505","post","type-post","status-publish","format-standard","hentry","category-productivity","tag-web-applications","tag-web-development"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/12505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/comments?post=12505"}],"version-history":[{"count":7,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/12505\/revisions"}],"predecessor-version":[{"id":14898,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/12505\/revisions\/14898"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/media?parent=12505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/categories?post=12505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/tags?post=12505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}