Kottans WeatherWebApp supplements

Kottans-WeatherWebApp-supplements.md

Supplemental materials for Weather Web App task

Extends https://github.com/kottans/frontend

The task.

Intro from mentor @zonzujiro

Table of Contents

• Workflow
• Great Sources of Relevant Knowledge
  • Object Oriented Approach
  • Application Architecture
  • Code Style
  • Irrelevant Extras

Workflow

Warning! A very opinionated approach!

Important note: you will most likely iterate between Planning and Implementing force and back.

• Planning and App Specifications example (under construction )
  • User Stories (a good point to start at)
  • Key technical requirements and constraints
  • Key features
  • Research on API
  • Required 3rd party helpers/libs
  • App Components and Components Relations
  • View design (mockup)
• Implementation
  • View (HTML and CSS)
  • App config
  • App Components as modules/classes
  • App Bootstrapping
  • Code validation and review
  • Bugfixes
• Closing the project
  • Final code review and approval
  • Champagne and oysters for everyone!

table of contents

Great Sources of Relevant Knowledge

Object Oriented Approach

• SOLID - pay special attention to Single Responsibility and Interface Segregation principles
• DRY - you might have already employed it creating small or tiny helper functions/methods
• The four principles of OOP - see how it matches SOLID and DRY
• Refreshment on Object Oriented JS from task 6
• ES6 classes
• ES2015/ES6 classes cheat snippet

table of contents

Application Architecture

• Refreshment on Scalable JS app Architecture from task 10
• MVC as an intro to app architectural patterns by example
• MVCS Paradigm - a set of MVCS based patterns for a broader view on the topic

table of contents

Code Style

• Javascript
  • airbnb JS code style guide
  • styling tool
  • or just try googling for javascript code formatting for <your-favourite-IDE>
• HTML
  • Google HTML style rules
  • w3schools HTML5 style guide
• CSS/SASS
  • airbnb CSS/Sass style guide
  • Google CSS style rules

table of contents

Irrelevant Extras

• You might not need a CSS preprocessor
• Markdown (github flavour)

table of contents

Composition & Aggregation - for the sake of completeness.

One another interesting style guide - Code Guide by @mdo, recommended earlier by viktor-yakubiv.