OleksiyRudenko/Kottans-WeatherWebApp-supplements.md

## Kottans-WeatherWebApp-supplements.md

      
    Raw
  

              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