#WAT-Up9.0

/topic Each week, the Web Applications Team (WAT) at WillowTree uses Slack to post interesting articles, share development tricks, and discuss technologies used in our world. Here’s a breakdown of what we talked about this week.

@vue: Vue 2.0 Has Arrived!

Now one of the fastest frameworks available, Vue has made significant improvements including adding a Virtual DOM implementation and smart optimizations in the compiler. 2.0 and its helper libraries, like vue-router and vuex, support server-side rendering (SSR) and use universal routing and client-side state hydration. This demo shows an example of all three working together in an application.

@spring-tidying: Clean Up Your React Application Architecture

Scalability for applications, avoiding band-aid patches and minimizing code debt are primary focuses at WillowTree. Naturally, I was intrigued by an article that suggests an alternative way to organize React applications. The goal is to distinguish global components (with no component dependencies) from nested components (component with dependencies) within the architecture. The result is very intuitive.

Global components are under the root directory of /components. Any nested components, such as ButtonDismiss, can only be used by the parent component. Components cannot define ‘scenes’. I love this structure because it clearly defines what is globally reusable vs. what can only be used by certain components. Often times that particular nuance is lost in a giant component directory which isn’t clearly organized.

/scenes are pages of the application. You can define components that are specific to that scene as a nested component and you can nest services (utility functions) as well. If your application is multi-page, this should feel like home for your developing process.

Finally, /services are meant to be utility functions that are not application dependent. Develop services as if you were using those functions in multiple applications, similar to a node module. This keeps your code clean and application-specific functions nested with their appropriate scene.

This structure allows for your application to grow while also removing features where applicable. Since it clearly shows dependencies, feature work is focused within one or two directories, rather than vaguely spread out throughout your application.

@dry: Do[n’t] Repeat Yourself

“Don’t Repeat Yourself” has commonly been taught in software engineering classes, but how applicable is it in web development? @quirksmode-blog claims that it’s actually the opposite: “repeating yourself is fundamental to web development.” Browser compatibility issues are unique to web development, therefore web developers must have a unique set of practices. @quirksmode-blog proposes an interesting thesis topic at the conclusion of the article — how does web development vary from general software engineering? How should academia adapt for web development?