CNN Starter Tools
Matt Crutchfield
App Architect
@mtcrutch
bit.ly/2qoDBQY
What this talk IS
- What is it
- Why is it useful
- How do I get started
What this talk is NOT
- How to use React
- webpack, babel, eslint, etc
- How to write an application
WHAT
cnn-starter is...
a collection of tools that allows us to build applications with zero configuration
It doesn't dictate how you design, or structure, your application.
It's how you develop, test, and bundle your application.
initial set up (if new)
developer experience
dependency management
security concerns
coding standards
documentation
changelogs
releases
performance audits
testing
code coverage reports
...
writing actual code
It manages these technologies under the hood
Wait... another one?
Other starters
This is great, but...
WHY
Missing pieces
- A server
- Server-side rendering
- Automatic code generation
- Experimental syntax extensions
- CSS modules
- Interop with the CNN ecosystem
CONSISTENCY
Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization's communication structure.
CONWAY'S LAW
| TEMPLATING | INTERNAL | EXTERNAL |
|---|---|---|
| Dust.js | - cnn-michonne-app | |
| React | - cnn-elections-2018-cms - cnn-opfactors-fe - cnn-cep-meta-ui - cnn-odm-ui - cnn-live-stream-authority-ui - coredev-livestory-fe - cnn-interactive-story-builder |
- cnnmoney-web-fe - cnnmoney-switzerland - cnn-a-new-hope (speedy) - cnn-live-story - cnn-lite - cnn-underscored - cnn-elections-2016 - cnn-elections-2017 - cnn-elections-2018 - cnn-verticals-runner (travel & style) - cnn-stamp-app |
| AngularJS | - cnn-artemis-fe - cnn-interactive-story-builder |
- cnn-go-web - cnnmoney-mobile-web |
| Handlebars.js | - cnn-google-amp-service | |
| PHP | - cnn-arabic (drupal) - cnn-tours (drupal) - cnn-espanol (wordpress) |
|
| Freemarker | - cnnmoney | |
| Vue.js | - cnn-stamp-cms |
webpack 1 to 2 migration
(created in may 2016... still open)
"Our priorities can shift if we are in alignment on a consistent platform.
HOW
Installing cnn-starter
Run cnn-starter command
Choose a project type
Your application is ready
Project structure
package.json
{
"name": "my-test-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-register": "6.24.1",
"babel-resolver": "1.1.0",
"cnn-server": "git+https://github.com/cnnlabs/cnn-server.git#0.5.1",
"prop-types": "15.6.1",
"react": "16.3.1",
"react-dom": "16.3.1",
"react-helmet": "5.0.3",
"react-hot-loader": "3.0.0-beta.6",
"react-router-dom": "4.1.1"
},
"devDependencies": {
"cnn-starter-app": "git+https://github.com/cnnlabs/cnn-starter-app.git#0.8.1"
},
"scripts": {
"analyze": "cnn-starter-app analyze",
"build": "cnn-starter-app build",
"create": "cnn-starter-app create",
"start": "cnn-starter-app start",
"lint": "cnn-starter-app lint",
"test": "cnn-starter-app test"
}
}src directory structure
WHAT ABOUT EXISTING CODEBASES?
Underneath, cnn-starter-app is comprised of many other packages that can be installed independently.
We're going to be taking this a step further and breaking things out into a package called cnn-scripts
GOAL
cnn-starter-app
cnn-starter-app
business logic
cnn-starter-app
terms-of-service
breaking-news
analytics
ads
gallery
video
business logic
cnn-starter-app
terms-of-service
breaking-news
analytics
ads
gallery
video
cnn-data-api
business logic
Who is using it?
- Elections
- CNNMoney
- Speedy
- CNN Lite
- Live Story
- CNN Underscore
- CNNMoney Switzerland
- Others
Get involved
SLACK
#cnn-starter
GITHUB
github.com/turnercode/cnn-starter
github.com/turnercode/cnn-scripts
The End.