{"id":22861,"date":"2014-01-14T12:00:16","date_gmt":"2014-01-14T19:00:16","guid":{"rendered":"http:\/\/www.eigene-homepage-erstellen.net\/?p=22367"},"modified":"2014-01-14T12:00:16","modified_gmt":"2014-01-14T19:00:16","slug":"a-front-end-workflow-for-the-evolving-web","status":"publish","type":"post","link":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm","title":{"rendered":"A Front-End Workflow For The Evolving Web"},"content":{"rendered":"\n

Our Workflow<\/figcaption><\/figure>\n

The Setup<\/h2>\n
Front End Development is a fairly new concept. Back when “Webmaster” was an actual job title there was no real “development” on the front end. Websites were structured using tables, CHSS and SSP were being joined together to make what eventually would be CSS. The web was still primarily a place for documents, real people were in chat rooms, and life was grand. Even as sites became more flashy (blink element anyone?) and CSS1 came of age, they were still fairly simple.<\/p>\n

The Situation<\/h2>\n
Fast-forward to today where we’re seeing an explosion of Internet usage on mobile and tablets. Web “pages” aren’t necessarily pages anymore, but fully-fledged applications. We’ve gone from humble documents<\/a> to Gmail and Google Maps. Javascript put on his big boy pants and joined the server side thanks to Node.js.<\/p>\n
Things are getting heavy, and I mean that literally. In 2013 page weight went up 32%<\/a>. That’s up from a 30%<\/a> increase in 2012! The web is getting bigger, more complex, and does more things. This is a good thing, but it presents some new challenges.<\/p>\n
As we’ve grown and expanded, we’ve been taking on larger and larger projects. It’s forced our development team to re-examine how we build things. We found ourselves needing a more modern workflow to deal with all of the complexities of the modern web. Software Engineering principles, REST API’s, and unit testing suddenly became relevant. Separation of concerns became more than just separating HTML and CSS.<\/p>\n

Our Evolving Solution<\/h2>\n
Have you ever tried to build a non-trivial AngularJS app? The learning curve is steep and usually requires digging around the source code. The fact that frameworks like AngularJS<\/a> and Ember.js<\/a> exist says a lot. Here’s how the dev team here at Portent modernized our workflow:<\/p>\n
\n
Github – We moved our projects from CVS to Github and adopted Github flow, a variation of Git-Flow outlined by Scott Chacon<\/a>. It’s simple, requires minimal setup (getting everyone on Github) and provides a nice interface for the less technically inclined (e.g. managers).<\/li>\n
Yeoman.io<\/a> – It combines generators, or scaffolds if you will, to build out a skeleton project (you can also write your own). It uses Grunt.js for task running and compiling assets (Sass\/LESS\/images) and Bower for package management. Seriously, this tool can save you a lot of time on both ends of the development cycle.<\/li>\n
Sass<\/a> and SMACSS<\/a> – Preprocessors are all the rage and for good reason. They can increase maintainability of your presentation layer. Many people use LESS but we chose Sass because it seemed to be more actively developed. There is a downside to preprocessors though, and that’s the ability to shoot yourself in the foot with bad\/extraneous styling. To combat that, we use Scalable and Modular Architecture for CSS. Out of the two, SMACSS is more important because clean code always wins.<\/li>\n
Atomic Design<\/a> – We’ve started to build things according to Atomic Design from Brad Frost. Basically you start at “atoms” (like colors, fonts, search bar) and move up the chain to “molecules”, “organisms” etc. Combined with SMACSS, this allows us to develop as we design, cutting down overall project time.<\/li>\n
Freedom – This one is very important. We’re lucky to work with managers and clients that want to stay ahead of the curve, that want tomorrow instead of today. This allows us to experiment with new technologies, languages, and frameworks.<\/li>\n<\/ul>\n
This list may change as we’re always experimenting with new workflows to make our lives easier and our projects better. Some things on our radar for the future are Docker and Google’s Go and Dart languages. I’ll keep you posted on our workflow and if you have a tool or a workflow that you think is great, we would love to hear about it.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
The Setup Front End Development is a fairly new concept. Back when “Webmaster” was an actual job title there was no real “development” on the front end. Websites were structured using tables, CHSS and SSP were being joined together to make what eventually would be CSS. The web was still primarily a place for documents, […]<\/p>\n","protected":false},"author":4,"featured_media":22896,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[102,454,455,456,30],"acf":[],"yoast_head":"\nA Front-End Workflow For The Evolving Web - Portent<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Front-End Workflow For The Evolving Web - Portent\" \/>\n<meta property=\"og:description\" content=\"The Setup Front End Development is a fairly new concept. Back when “Webmaster” was an actual job title there was no real “development” on the front end. Websites were structured using tables, CHSS and SSP were being joined together to make what eventually would be CSS. The web was still primarily a place for documents, […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm\" \/>\n<meta property=\"og:site_name\" content=\"Portent\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/portent.marketing\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-14T19:00:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.eigene-homepage-erstellen.net\/images\/2014\/01\/workflow1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@portent\" \/>\n<meta name=\"twitter:site\" content=\"@portent\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Portent Staff\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n","yoast_head_json":{"title":"A Front-End Workflow For The Evolving Web - Portent","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm","og_locale":"en_US","og_type":"article","og_title":"A Front-End Workflow For The Evolving Web - Portent","og_description":"The Setup Front End Development is a fairly new concept. Back when “Webmaster” was an actual job title there was no real “development” on the front end. Websites were structured using tables, CHSS and SSP were being joined together to make what eventually would be CSS. The web was still primarily a place for documents, […]","og_url":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm","og_site_name":"Portent","article_publisher":"https:\/\/www.facebook.com\/portent.marketing","article_published_time":"2014-01-14T19:00:16+00:00","og_image":[{"width":1000,"height":600,"url":"https:\/\/www.eigene-homepage-erstellen.net\/images\/2014\/01\/workflow1.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@portent","twitter_site":"@portent","twitter_misc":{"Written by":"Portent Staff","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Organization","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#organization","name":"Portent","url":"https:\/\/www.eigene-homepage-erstellen.net\/","sameAs":["https:\/\/www.linkedin.com\/company\/portent\/","https:\/\/www.facebook.com\/portent.marketing","https:\/\/twitter.com\/portent"],"logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/logo\/image\/","url":"https:\/\/www.eigene-homepage-erstellen.net\/images\/2018\/08\/logo-indigo.svg","contentUrl":"https:\/\/www.eigene-homepage-erstellen.net\/images\/2018\/08\/logo-indigo.svg","caption":"Portent"},"image":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/logo\/image\/"}},{"@type":"WebSite","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#website","url":"https:\/\/www.eigene-homepage-erstellen.net\/","name":"Portent","description":"Digital Marketing Agency - Seattle, WA","publisher":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.eigene-homepage-erstellen.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm#primaryimage","url":"https:\/\/www.eigene-homepage-erstellen.net\/images\/2014\/01\/workflow1.png","contentUrl":"https:\/\/www.eigene-homepage-erstellen.net\/images\/2014\/01\/workflow1.png","width":1000,"height":600,"caption":"front end workflow"},{"@type":"WebPage","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm#webpage","url":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm","name":"A Front-End Workflow For The Evolving Web - Portent","isPartOf":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm#primaryimage"},"datePublished":"2014-01-14T19:00:16+00:00","dateModified":"2014-01-14T19:00:16+00:00","breadcrumb":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.eigene-homepage-erstellen.net\/"},{"@type":"ListItem","position":2,"name":"A Front-End Workflow For The Evolving Web"}]},{"@type":"Article","@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm#article","isPartOf":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm#webpage"},"author":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/person\/18016e251958040df4cc3025be1098c7"},"headline":"A Front-End Workflow For The Evolving Web","datePublished":"2014-01-14T19:00:16+00:00","dateModified":"2014-01-14T19:00:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm#webpage"},"wordCount":662,"commentCount":0,"publisher":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/#organization"},"image":{"@id":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm#primaryimage"},"thumbnailUrl":"https:\/\/www.eigene-homepage-erstellen.net\/images\/2014\/01\/workflow1.png","keywords":["Development","front end","github","grunt","web development"],"articleSection":["Design & Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev\/a-front-end-workflow-for-the-evolving-web.htm#respond"]}]},{"@type":"Person","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/person\/18016e251958040df4cc3025be1098c7","name":"Portent Staff","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.eigene-homepage-erstellen.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b9f067dff4fd2b5db4a388710d263406?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b9f067dff4fd2b5db4a388710d263406?s=96&d=mm&r=g","caption":"Portent Staff"},"url":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/author\/portent-staff"}]}},"category_info":[{"taxonomy":"category","name":"Design & Dev","slug":"design-dev","permalink":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/design-dev","icon":"https:\/\/www.eigene-homepage-erstellen.net\/images\/2021\/08\/Dev-category-icon.png","theme":"creative"}],"author_info":{"first":"Portent Staff","last":"","url":"https:\/\/www.eigene-homepage-erstellen.net\/blog\/author\/portent-staff"},"_links":{"self":[{"href":"https:\/\/www.eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/posts\/22861"}],"collection":[{"href":"https:\/\/www.eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/comments?post=22861"}],"version-history":[{"count":0,"href":"https:\/\/www.eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/posts\/22861\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/media\/22896"}],"wp:attachment":[{"href":"https:\/\/www.eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/media?parent=22861"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/categories?post=22861"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.eigene-homepage-erstellen.net\/wp-json\/wp\/v2\/tags?post=22861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}