How to develop frontend application

{
title: 'Hitchhiker's guide to frontend development',
subTitle: 'How to develop an application together',
}

const tableOfContents = [
'who am I?',
'what is so called application',
'tell designers who you are!!',
'do you really know how to develop?',
]

console.info(tableOfContents[0]);
▸ "who am I?"

{
name: 'Seokjun Kim',
email: 'colus001@me.com',
job: 'frontend developer',
country: 82,
phone: 01092836686,
}

{
name: 'Seokjun Kim',
email: 'colus001@me.com',
job: 'frontend developer',
country: 82,
phone: 01092836686,
toBe: 'product developer',
}

const career = [{
companyName: 'Studio XID',
role: 'frontend developer',
products: [{
type: 'UI Prototype Tool for Hi-fi Interactions',
name: 'Protopie',
}],
}, {
companyName: 'Streami',
role: 'frontend developer',
products: [{
type: 'Cryptocurrency Exchange',
name: 'GOPAX',
}],
}, {
companyName: 'SOCAR',
role: 'web developer',
products: [{
type: 'Car Rental',
name: 'SOCAR',
}, {
type: 'Car Sharing',
name: 'ZEROCAR',
}],
}]

{
type: SKILL_TYPE.SOFT,
for: DEVELOPERS.JUNIOR,
topic: 'How to develop application',
comment: 'this is basic, no doubt!'
}

▸ "what's so called application?"

const construction = [
'standardized',
'well-structured',
'engineering-oriented',
'highly top-down approach',
]

const softwareDevelopment = [
'highly flexible',
'bottom-up approach',
'very free',
'customer-oriented',
]

const players = [
'designer',
'developer',
]

players.push('product manager');
players.push('project manager');
players.push('marketer');
players.push('sales');
players.push('dae pyo nim');
.
.
.

prompt('what is web application development?');

prompt('what is web application development?');
drawing a picture together with a few rules and no plan no sketch nothing ...

require('engineering');
require('art');
require('team/play');

▸ "tell designer who you are!!"

let theTruth = 'Designer knows nothing!';
theTruth += 'especially who you're working with...';
console.log(theTruth === STATUS.NORMAL);

▸ true

▸ true
theTruth += 'developer doesn't know too';

.font {
/*
a set of characters of the same style and size.
*/
}
.typography {
/*
art and technique of arranging type of written material
consisting of font, font-size, font-style and etc.
*/
}

Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text
ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a
type specimen book. It has survived not only ﬁve
centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop
publishing software like Aldus PageMaker
including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of
t h e p r i n t i n g a n d t y p e s e t t i n g
industry. Lorem Ipsum has been the
industry's standard dummy text ever
since the 1500s, when an unknown
printer took a galley of type and
scrambled it to make a type specimen
book. It has survived not only five
centuries, but also the leap into
electronic typesetting, remaining
essentially unchanged. It was
popularised in the 1960s with the
r e l e a s e o f L e t r a s e t s h e e t s
containing Lorem Ipsum passages, and
m o r e r e c e n t l y w i t h d e s k t o p
publishing software like Aldus
PageMaker including versions of
Lorem Ipsum.
.font {
font-size: 18px;
font-family: Helvetica;
// Flexible width
}
.typography {
font-size: 18px;
font-family: Dejavu Sans Mono;
// Fixed width
}

<head>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
html, body {
font-family: 'Noto Sans KR', sans-serif;
}
h1, h2, h3 {
font-family: 'Nanum Gothic',
}
</style>
</head>

while (true) {
performance -= FONT_DOWNLOAD_TIME;
visual -= UGLINESS.FLICKERING;
difficulty++; // FIXME: difficult to achieve integrity
}
// NOTE: woff, woff2 still heavy for korean fonts and IE, IE, IE...

<body>

<nav>
<ul>
<li>Home</li>
<li>Profile</li>
</ul>
</nav>
<h1>What is frontend development</h1>
<section>
<h3>Frontend development is difficult</h3>
<p>It is actually not that difficult.</p>
</section>
</body>

const symantic = (
<div className="home">
<h1>
Hello World
</h1>
</div>
)
const nonSymantic = (
<div className="home>
<span className="headline">
Hello World
</span>
</div>
)
human.log(symantic === nonSymantic);
▸ true
crawler.log(symantic === nonSymantic);
▸ false
.home { 
padding: 20px;
}
.headline, h1 {
font-size: 40px;
text-decoration: bold;
}

.color-management {
--red: #EE0000;
--very-important: var(--red);
color: var(--very-important);
}

.important {
color: #FF0000;
}

.important {
color: #FF0000;
color: #EE0000;
}
.moreImportant {
color: #FF0000;
}

.important {
color: #FF0000;
color: #EE0000;
color: #DD0000;
}
.moreImportant {
color: #FF0000;
color: #EE0000;
}
.mostImportant {
color: #FF0000;
}

$red: #FF0000;
$light-red: #EE0000;
$lighter-red: #DD0000;
.important {
color: $lighter-red;
}
.moreImportant {
color: $light-red;
}
.mostImportant {
color: $red;
}

$red: #FF0000;
$light-red: #EE0000;
$lighter-red: #DD0000;
$important: $lighter-red;
$more-important: $light-red;
$most-important: $red;
.important {
color: $important;
}
.moreImportant {
color: $more-important;
}
.mostImportant {
color: $most-important;
}

/* color variation */
--gray-0: #999999;
--gray-1: #AAAAAA;
--gray-2: #CCCCCC;
/* brand */
--brand-black: #111111;
--brand-red: #DD1111;
--brand-white: #EEFFFF;
/* status */
--status-danger: var(--brand-red);
--status-success: #00EE00;
/* type */
--common-background-color: var(--brand-white);
--common-padding-size: 10px;
--common-border-radius: 2px;

// with CSS preprocessor like sass
$red: #ff0000;
$dark-red: darken($red, 10%);
$darker-red: darken($red, 20%);
$footer-height: 10rem;
$navigation-margin: 5rem;
// mixins
@mixin unit-margin($unit, $direction: '') {
@if $direction == '' {
margin: $unit * 1.6rem;
} @else {
margin-#{$direction}: $unit * 1.6rem;
}
}
// extends
%container {
min-height: calc(100vh - #{$footer-height} - #{$navigation-margin});
padding: 1.6rem * 4 10rem;
@include mobile {
padding: 1.6rem * 2 2rem;
}
}

class Component extends BluePrint {
render() {
return (
<div className="Component">
Make Component <strong>not Page</strong>
</div>
)
}
}

const SomeForm = (
<form className="signin">
<input name="email" />
<button className="btn" type="submit">
SUBMIT
</button>
</form>
);
<style>
.btn {
background-color: blue;
color: white;
padding: 4px 2px;
}
</style>
const AnotherForm = (
<div className="account">
<button className="btn">
Login
</button>
</form>
);
<style>
.account .btn {
background-color: green;
color: white;
padding: 4px 2px;
}
</style>

const AnotherForm = (
<div className="home">
<div className="account">
<button className="btn">
Login
</button> 
</div>
</div>
);
<style>
.home .btn {
background-color: red;
color: white;
padding: 4px 2px;
}
</style>

human.log(buttonA === buttonB);
▸ true
developer.log(buttonA === buttonB);
▸ true

▸ true
▸ true
designer.log(buttonA === buttonB);
▸ false

▸ true
▸ true
designer.log(buttonA === buttonB);
▸ false
frontendDeveloper.log(buttonA === buttonB);
▸ false

$ npm run storybook
if (project.hasJustStarted()) {
console.log('you have time to play with component!!');
// Designer loves it
}

const anatomy: Component = `
SignupForm
ㄴ container
ㄴ input
ㄴ type: email
ㄴ input
ㄴ type: password
ㄴ button
ㄴ theme: primary
ㄴ text: 'SignUp'
`
interface Component = Component[] | DOM[]

const { isLoggedIn } = getUserState();
const Page = (
<Container>
<Navigator />
<ContentWrapper>
{isLoggedIn ? (
<Profile />
) : (
<Account>
<LoginForm />
<SignUpForm />
</Account>
)}
</ContentWrapper>
</Container>
)

import { Component } from 'interfaces';
interface Page = Component[];
interface Product = Page[];
const product = new Product();
product.integrity++;
product.completeness++;
product.performance++;
designer.sapjil--;
developer.movePixelJjogum--;
team.hapiness++;

> Unfortunately frontend developer has to tell UI designers
what to do for both of us, team and product
developer.order(designer) !== developer.help(designer)
typeof designer.create
▸ "function"
typeof developer.realize
▸ "function"

▸ "do you really know how to develop"

/**
* Represent application architecture with folder structure
* @param {Developer[]} developers - developers to work together
* @returns {view, data} Scaffolding of view and data
*/
function scaffolding(developers) {
if (developers.length === 1) return null;
return {
view: 'visual representation',
data: 'send, receive and manipulate information',
};
}

// NOTE: There's no standard but ...
class View {
constructor(type) {
if (this.codeLength > LENGTH.TOO_MANY) {
throw new Error('error: split code based on some rule');
}
if (type === 'presentational') {
this.createPresentational();
} else {
this.createControllable();
}
}
createPresentational(): PresentationalView {
this.rule = 'as neat and simple as possible';
}
createControllable(): ControllableView {
this.rule = 'life cycle should be simple enough to understand';
}
}
typeof this
▸ "view"

// NOTE: separate to component as small as possible
class Signup extends Component {
signUp(data) {
fetch('/signup', data);
}
render() {
return (
<div className="signup-form">
<Button onClick={this.signUp} label="Sign Up" />
<div>
)
}
}
const Button = (onClick, label) => (
<button onClick={onClick}>
{label}
</button>
)
typeof this
▸ "view"

// NOTE: make abstracted component when library is used
import swiper from 'swiper';
interface Carousel {
init(options: { infinite: boolean }): void;
hide(): void;
}
const abstract = (library) => {
wrap(library);
}
const Carousel = abstract(swiper);
export default Carousel;
typeof this
▸ "view"

// NOTE: functional programming applied here
import * as formatters from './formatters';
import * as calculators from './calculators';
import * as parsers from './parsers';
.
.
.
typeof this
▸ "view"

typeof this
▸ "data"
import developers from './developers/frontend';
describe('developers', () => {
you('should write test code for at least data handling', () => {
expect(developers).to.write.test.case();
const tests = developers.getTestCodes();
if (typeof tests === 'unit') {
expect(tests).not.to.be.null;
} else if (typeof tests === 'integration') {
expect(tests).to.be.null;
}
expect(test.length).to.at.least(1);
})
})

typeof this
▸ "data"
const STATUS = {
SUCCESS: 'success',
ERROR: 'error',
FAIL: 'fail',
}
const KEY_CODE = {
ESC: 27,
ENTER: 24,
BACKSPACE: 8,
}

typeof this
▸ "data"
// Do
const getMyProfile = async () => {
const result = await fetch('/me/profile');
return result;
}
// Don't
class Profile {
profile = null;
constructor() {
fetch('/me/profile')
.then(profile => {
this.profile = profile;
})
}
}

<div class="home">
<button class="button>
HOME
</button>
</div>
<style>
.home .button {
height: 30px;
}
</style>

<div class="home">
<button class="home-button>
HOME
</button>
</div>
<style>
.home-button {
height: 30px;
}
</style>

browser.shout('avoid global!!!');
'use strict';
'use closure';
'use component-like css';

const howToChooseLibrary = (library) => {
console.warn('you will be FIRED if you choose one for popularity!');
const points =
library.hasEnoughGithubStar()
+ library.easyToUnderstand()
+ library.isEssential()
+ library.takeTimeToBuildIdentical()
if (point > POINTS.HIGH_ENOUGH) {
return true;
}
return false; 
}

▸ "onesome more thing"

if (developer.care(['integrity', 'stability', 'performance'])) {
designer.care(['aesthetic', 'user experience', 'completeness']);
}
product.log(developer.care(designer) === developer.care(self));
▸ true
frontendDeveloper.log(1px.valueOf() === 10px.valueOf());
▸ true

const frontendDeveloper = developer.isAmong(designer, productOwner, client)
const importance = frontendDeveloper.getImportance(now);
console.log(getImportance(tomorrow) >= importance);
▸ true
developer('should good at communication', () => {
expect(frontendDeveloper).to.be.good.at(communication);
});

interface GateKeeper {
open(): void;
close(): void;
}
class FrontendDeveloper extends Developer implements GateKeeper {
constructor() {
this.character = CHARACTERS.THINGS_GET_DONE;
}
}
const frontendDeveloper = new FrontendDeveloper();
developer('should good at delivery', () => {
expect(frontendDeveloper).to.be.good.at(delivery);
})

class ObjectOrientedProgramming extends Classic {}
function functionalProgramming() {}
const ReactiveProgramming = observable.subscribe()
redux.store.dispatch({ type: 'LEARNING_EVERYDAY' })
developer('should good at learning', () => {
expect(frontendDeveloper).to.be.good.at(learning);
})

console.info('how to raise your value');

interface Virtue {
workSmart(): any;
thingsGetDone(args: any): true;
solveProblemsNotSymptoms: any;
}
class SeniorDeveloper implements Virtue {
predictable: boolean = true;
raiseSalary() {
this.workSmart();
this.thingsGetDone();
this.solveProblemsNotSymptoms();
} 
}

...
workSmart() {
if (this.keepYagun()) stop();
pipe(learn, write, rest, vacation, enjoy)();
}
thingsGetDone() {
if (this.keepWorkingUntilDead()) stop();
negotiate([specs, features, ...rest ]);
finish();
}
solveProblemsNotSymptoms() {
if (fix(symptom) === STATUS.NOT_ENOUGH) {
fix(problem);
}
}
...
}

raiseSalary() {
...
this.goTo(seaNotRiver);
console.warn('not major company nor startup');
this.meet(goodDevelopers);
this.build(career);
this.catch(luck); // If FE, you already did
} 
}

interface ProductManagement {
delivery(): true;
createRoadmap(): Roadmap;
createPlan(): Plan;
}
class ProductDeveloper extends FrontendDeveloper implements ProductManagement {
predictable: boolean = true;
communication: string = LEVEL.GOOD; // NOTE: including verbal & non-verbal
alsoAs: Person = new BusinessPerson(this);
}
const CPO: ProductManager = new ProductDeveloper(experience);

console.log('thanks');
describe('this talk', () => {
it('should share something valuable', () => {
expect(listeners).to.applause();
})
})

How to develop frontend application

More Related Content

What's hot

Similar to How to develop frontend application

Recently uploaded

How to develop frontend application