Creating a JavaScript Development Environment: Project Structure

coryWelcome to Part 11 of this review of the Pluralsight course “Creating a JavaScript Development Environment” by Cory House.

Cory is a Microsoft MVP in C#, founder of OutlierDeveloper.com, avid tech reader, and speaker.

He believes in clean code, pragmatic development, and responsive native UIs.

He has also created reactjsconsulting.com, and has the authored Pluralsight courses including Building Applications with React and Flux and Building Applications with React and Redux in ES6.

Also in this series:
Part 1 – You Need a Starter Kit
Part 2 – Editors and Configuration
Part 3 – Package Management
Part 4 – Development Web Server
Part 5 – Automation
Part 6 – Transpiling
Part 7 – Bundling
Part 8 – Linting
Part 9 – Testing and Continuous Integration
Part 10 – HTTP Calls
Part 11 – Project Structure
Part 12 – Production Build
Part 13 – Production Deploy

Project Structure

Why a Demo App?

Many learn best by example. This is why Cory believes a demo app is a critical piece of a starter kit. It includes examples of:

– Directory structure and file naming
– Framework usage
– Testing
– Mock API
– Automated deployment

Tip 1: JS Belongs in a .js file

Cory warns against the temptation of putting JS inside a script tag, describing the many downsides of this practice.

He mentions using the Configuration Object pattern here as a way to avoid dynamically generating JavaScript logic.

For more on this see Cory’s medium post 12 Rules for Professional JavaScript

Tip 2: Consider Organizing by Feature

If you are working on a large project, Cory recommends organizing by feature, rather than file type.

Tip 3: Extract Logic to POJOs

This tip is about minimizing our dependency on any specific framework and potentially making the code easier to read.

As an example of this see Cory’s React Slingshot project.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s