{"id":6313,"date":"2013-06-25T09:00:57","date_gmt":"2013-06-25T14:00:57","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/blog\/?p=6313"},"modified":"2022-11-22T13:20:32","modified_gmt":"2022-11-22T19:20:32","slug":"rules-for-modern-web-application-development","status":"publish","type":"post","link":"https:\/\/www.mrc-productivity.com\/blog\/2013\/06\/rules-for-modern-web-application-development\/","title":{"rendered":"Rules for modern web application development"},"content":{"rendered":"<p><a href=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2010\/11\/Education.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2010\/11\/Education.jpg\" alt=\"Education\" width=\"76\" height=\"100\" class=\"alignleft size-full wp-image-725\" \/><\/a>Web application development has experienced a fundamental shift over the last 5 years. Mobile devices have exploded. Consumer applications have largely surpassed business applications in both capabilities and overall simplicity. Development libraries, frameworks, languages, etc&#8230; have evolved. <\/p>\n<p>The fact is, development standards have changed, yet many companies are stuck developing applications based on outdated standards and technology. If they don\u2019t adapt, these companies will only fall further and further behind as technology rapidly evolves.<\/p>\n<p>The big questions: How has development changed? What rules must developers follow when building modern web applications? What current development principles will help ensure success?<\/p>\n<p>To help you answer those questions, here\u2019s a short list of guidelines that you must follow when developing modern web applications. Of course, if you\u2019d like to add anything to the list, please do so in the comments.<a name=\"20130624\"><\/a><!--more--><\/p>\n<h3>1. Build for usability<\/h3>\n<div class=\"alignleft\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/06\/small_2736773665.jpg\" alt=\"small_2736773665\" width=\"240\" height=\"160\" class=\"alignleft size-full wp-image-6328\" \/><\/p>\n<p><i>photo credit: <a href=\"http:\/\/www.flickr.com\/photos\/timdorr\/2736773665\/\">Tim Dorr<\/a> via <a href=\"http:\/\/photopin.com\">photopin<\/a> <a href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/2.0\/\">cc<\/a><\/i><\/div>\n<p>While always important, usability has now become an absolute necessity. After all, user expectations have changed. They expect the well-designed, intuitive interfaces they receive on their smartphones and consumer applications. These days, users have options. If the application confuses the user, they\u2019ll find something else.<\/p>\n<p>\u201cMy approach has really had to change since I am building a consumer-facing set of apps,\u201d says Alex Genadinik, founder and developer for <a href=\"http:\/\/problemio.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Problemio.com<\/span><\/a>. \u201cInstead of focusing on the server and database, and optimizing them to scale, I had to shift focus on first, observing user behavior as much as possible, and making sure all the buttons and screen elements are A\/B tested to ensure the best usability. So I had to shift focus from the backend technologies to focus very intensely and with great details on the front-end and usability. Because if there is no usability, the backend tech becomes useless.\u201d<\/p>\n<p>Now, usability is a vague term. What does it look like? More importantly: How can you build applications with good usability? Here are three steps to take that will help you improve application usability:<\/p>\n<ul>\n<li><strong>a. Talk to users early and often<\/strong><br \/>\nThe first step towards usability: Understand what the users want. Talk to them throughout the entire process, not just at the beginning. <\/p>\n<p>\u201cEven though the time to launch has decreased dramatically, the competition in the web space has increased even more dramatically so the need to be efficient with development time is more important than ever,\u201d says Michael Granados, Co-founder and the head of Product Design at <span style=\"color: red;font-weight: bold\">Medko<\/span>. \u201cTalking to your users early is a very important step; it helps you understand what they want so you know what to actually develop. And talking to them often throughout the initial development process is equally important so you understand if you are interpreting their &#8220;wants&#8221; correctly in your product.\u201d<\/li>\n<li><strong>b. Develop in small, agile cycles<\/strong><br \/>\nMiscommunication combined with long development cycles leads to disasters. Developers often spend months building what (they think) the users want, only to realize the users wanted something completely different. In short, it\u2019s a big waste of time.<\/p>\n<p>\u201cIn past decades, development cycles could be months, sometimes even years,\u201d explains Granados. \u201cToday, it&#8217;s not uncommon for new code to be pushed every couple of weeks. Quick development cycles help ensure that the team is focused on only the most important priorities so you can quickly begin testing features with your early adopters. Fast development cycles also prevent teams from wasting months developing a feature that nobody ends up using.\u201d<\/li>\n<li><strong>c. Measure Everything<\/strong><br \/>\nUsability goes beyond simply asking your users what they want. You must also understand how they use the completed app. In this way, you will understand how to improve and modify the app going forward.<\/p>\n<p>\u201cTalking to your users is a great place to start development but once you understand what they told you they want, you need to use analytics and cold hard numbers to see if their behavior matches their words,\u201d explains Granados. \u201cThere are many free and affordable analytics solutions available today and they can be configured into an app in just minutes. Measuring user behavior will give you indisputable data on whether or not your app is being successful.\u201d<\/li>\n<\/ul>\n<h3>2. Plan for platform fragmentation<\/h3>\n<div class=\"alignleft\">\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/06\/small_227904949.jpg\" alt=\"Fragmentation\" width=\"240\" height=\"176\" class=\"alignleft size-full wp-image-6330\" \/><\/p>\n<p><i>photo credit: <a href=\"http:\/\/www.flickr.com\/photos\/jurvetson\/227904949\/\">jurvetson<\/a> via <a href=\"http:\/\/photopin.com\">photopin<\/a> <a href=\"http:\/\/creativecommons.org\/licenses\/by\/2.0\/\">cc<\/a><\/i><\/div>\n<p>One of the biggest challenges facing developers today: Platform fragmentation. You no longer know how users will access your applications. Maybe they\u2019ll use a PC. Maybe they\u2019ll use a smartphone or tablet. You don\u2019t know, and you can\u2019t control it. <\/p>\n<p>&#8220;In the past, IT could control application delivery platforms,\u201d explains Tyler Wassell, Software Development Manager at <a href=\"https:\/\/www.mrc-productivity.com\/index.html\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">mrc<\/span><\/a>. \u201cThey could deploy one version of an application to a user&#8217;s desktop computer located in their network that ran an OS that they selected. Now, IT is faced with users who are working on remote networks, using their own PC, tablet, or smartphone running an OS that could possibly change tomorrow. To accomodate this dramatic shift and remain relevant, IT needs to adopt a web application development strategy that reasonably supports all of these devices, scales as the business grows, and prepares the business for inevitable change to both client devices and server architecture.&#8221;<\/p>\n<h3>3. Use APIs wisely<\/h3>\n<p>Application Programming Interfaces (APIs) are an important aspect of modern application development, as they let developers build applications that include data from other applications. However, APIs must be used wisely. Why? As any developer using the Twitter API over the last couple of years will tell you, API changes are often sudden and drastic, and can negatively impact your application.<\/p>\n<p>&#8220;As more and more presentation logic is being moved to the client side (with Single Page Apps being the extreme) &#8211; business logic and data is more and more being consumed via web APIs preferably adhering to REST principles and using JSON for the actual resource\/message format,\u201d explains Ole Lensmar, co-creator of <a href=\"http:\/\/www.soapui.org\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">SoapUI<\/span><\/a>, and Chief Architect at <a href=\"http:\/\/smartbear.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">SmartBear<\/span><\/a>. \u201cAs such, the same considerations and precautions must be in made in regard to these APIs being consumed from the client as from the server; error handling, timeouts, unexpected responses must all be handled pro-actively to ensure that the end user experience isn&#8217;t hampered by API changes or outages. This applies specifically to 3rd party APIs &#8211; which can change unexpectedly or not always work as expected; here it might make sense to hide them behind a facade API layer on the server which also allows for payload optimization and shared caching.&#8221;<\/p>\n<h3>4. Organize your code effectively<\/h3>\n<div class=\"alignleft\">\n<a href=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/06\/small_4734829999.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/blog\/wp-content\/uploads\/2013\/06\/small_4734829999.jpg\" alt=\"small_4734829999\" width=\"240\" height=\"135\" class=\"alignleft size-full wp-image-6320\" \/><\/a><\/p>\n<p><i>photo credit: <a href=\"http:\/\/www.flickr.com\/photos\/juhansonin\/4734829999\/\">juhansonin<\/a> via <a href=\"http:\/\/photopin.com\">photopin<\/a> <a href=\"http:\/\/creativecommons.org\/licenses\/by\/2.0\/\">cc<\/a><\/i><\/div>\n<p>In the past, old procedural programming methods often resulted in large, monolithic applications. They were independent of other applications, and every function of the application was programmed into the code itself. As you can imagine, this structure created maintenance nightmares. These days, modern web applications avoid these issues using a design principle known as \u201cSeparation of concerns.\u201d<\/p>\n<p>\u201cSeparation of concerns is always an important development principle in any project,\u201d explains Will Mitchell, Lead Developer at <a href=\"http:\/\/www.onsip.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">OnSIP<\/span><\/a>. \u201cWhether that means using a Model-View-Controller layout to separate business logic from display controls in a complex application, or just keeping styling in CSS, scripting in JS, and structure in HTML in more simple application, organization is key.\u201d<\/p>\n<h3>5. Stick with well-established technologies<\/h3>\n<p>Developers love trying new things. They love experimenting with new libraries, frameworks, languages, tools, etc&#8230; (and they certainly have plenty to choose from these days). There\u2019s nothing wrong with that. In fact, I think it\u2019s a good quality. <\/p>\n<p>However, it becomes a problem when developers carry that over into business application development. For instance, if you develop a new business application using a brand new language, you take a big risk. What if that language never takes off? Now you\u2019re stuck with an application built on an unpopular language that may or may not work well with existing technologies. While experimentation with the latest and greatest technology is fine, when building business applications, stick with established technologies. <\/p>\n<p>\u201cIn a nutshell, web application developers have to follow a technology which is widely implemented and not just \u2018popular\u2019 or \u2018up-and-coming\u2019,\u201d explains Jeffrey To, Marketing Manager, e-Commerce and Web Strategy at <a href=\"http:\/\/www.pureminutes.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">Pureminutes<\/span><\/a>. \u201cThis is because training, implementation and testing are all expensive and time-consuming processes and if you go with an &#8220;up-and-coming&#8221; code such as Django and Rails as opposed to the next &#8220;sure thing&#8221; in HTML5. The danger in choosing an unpopular code is that switching servers is problematic and troubleshooting requires more specialized sometimes non-existent expertise.\u201d<\/p>\n<h3>Bonus: Open architecture is more important than ever<\/h3>\n<p>The importance of open architecture in this day and age cannot be overstated. Open architecture doesn\u2019t lock your company into one vendor or product. It gives companies flexibility to choose the technology that best suits their needs. It integrates easily with other software and services. I could go on, but you can read all about the <a href=\"https:\/\/www.mrc-productivity.com\/blog\/2013\/03\/application-architecture-ignore-at-your-own-risk\/\" target=\"_blank\" rel=\"noopener\"><span style=\"color: red;font-weight: bold\">importance of architecture right here<\/span><\/a>.<\/p>\n<p>Simply put, closed applications and systems built on proprietary languages\/frameworks are on the way out. Modern development efforts must focus on open standards.<\/p>\n<h3>Wrap up<\/h3>\n<p>Over the last 5 years, technology has experienced some of the biggest changes in history, many of which affect web application development. Companies must follow the guidelines listed above with their web development, or risk falling out of touch with technology. Would you add anything to that list? If so, I\u2019d love to hear it in the comments.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web application development has experienced a fundamental shift over the last 5 years. Mobile devices have exploded. Consumer applications have largely surpassed business applications in both capabilities and overall simplicity. Development libraries, frameworks, languages, etc&#8230; have evolved. The fact is, development standards have changed, yet many companies are stuck developing applications based on outdated standards &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.mrc-productivity.com\/blog\/2013\/06\/rules-for-modern-web-application-development\/\"> <span class=\"screen-reader-text\">Rules for modern web application development<\/span> Read More &raquo;<\/a><\/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":"Rules for modern web application development - mrc&#039;s Cup of Joe Blog","description":"Web application development has experienced a fundamental shift over the last 5 years. Mobile devices have exploded. Consumer applications have largely surpasse"},"footnotes":""},"categories":[8],"tags":[13,15],"class_list":["post-6313","post","type-post","status-publish","format-standard","hentry","category-education","tag-application-development","tag-web-development"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/6313","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=6313"}],"version-history":[{"count":22,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/6313\/revisions"}],"predecessor-version":[{"id":14043,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/posts\/6313\/revisions\/14043"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/media?parent=6313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/categories?post=6313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/blog\/wp-json\/wp\/v2\/tags?post=6313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}