@techstars/templates v0.8.1

@techstars/templates

A library of web application templates designed to be used within a Next.js framework. Couples with @techstars/boilerplate to create our new web properties.

Code Coverage

Core Concepts

This library is intended to be used as a front-end only attachment to a web framework, in our case Next.js. Think of it as a "views only" library. A few key concepts drive its construction:

• Our templates and views should be modular and independently tracked / tested
• Splitting our core views into a new library improves our ability to refactor them in the future
• Removing server-side logic from this library creates a focus on the front-end
• Changes made to either this library or @techstars/boilerplate impact only their own codebases
• Consuming our front-end as its own package enables us to better remove bloat

What Belongs Here

• Page templates that receive outside input as props (eg. From Contentful)
• Individual, hard-coded pages or static entities that do not require external input from the CMS
• Pages that require a simple useEffect() to obtain data from an endpoint, eg. a fetch or axios call

What Does Not Belong Here

• Routing logic
• Business logic for getters and setters
• Server-side data collection or manipulation

TL;DR

@techstars/templates is designed for representational views. Any number of calls to external endpoints is absolutely fine, but we don't want to build endpoints or critical business logic here.

"Removing server-side logic ... creates a focus on the front-end" means you can focus on props. If your view relies entirely on passed props for its final render, you can be confident defaults and best practices will create a perfect page every time.

File Structure

Alright, fun stuff out of the way! The rest is a pinch. To start developing new systems, here's everything you need to know:

• The src directory contains our sites, listed by subdirectory (/Talent, /Techstars, etc.). To add a new set of templates for a new web property, just add a fresh dir and get crackin!
• All templates should be exported under that site's namespace from the subdirectory index.js, then from the package's main index.js. To make this simpler, just look at how it's coded now. Techstars is exported as a namespace from /src/index.js. Techstars.Index (src/Techstars/index.js) returns the index page.
• The lib dir is intended for universal library utilities, things like a debouncer. For more site specific utilities, feel free to create a subdirectory lib or util.

You don't have to organize your project with any particular convention. However, a suggested file tree might look like:

• src
  • Site
    • /components
    • /layouts
    • /templates
    • index.js

Ideally, you'll only be exporting items from the templates directory, as these should map to specific pages, eg. applications.template.js -> Techstars.Applications

Using @techstars/templates

Using the library is incredibly simple. A sample use might look something like this:

import React from 'react'
...
import { Techstars } from '@techstars/templates'

const Index = ({
  baz, bar
}) => (
  <Techstars.Index
    bar={baz}
    foo={bar}
  />
)

export default Index

And that's it! 🚀