Front-end Development Process - 어디까지 개선할 수 있나

Front-end Development Process

2014.11.30OutsiderAdieu 2014, 봄싹

어디까지 개선할 수 있나

! outsideris

" @outsideris

# [email protected]

$ http://blog.outsider.ne.kr

https://www.flickr.com/photos/frosted_peppercorn/2411572004

게으른 개발자

https://www.flickr.com/photos/loritingey/350043329

어려운 작업을 할 때 항상 게으른 사람을 선택합니다.

게으른 사람은 가장 쉬운 방법을 찾기 때문입니다.

- Bill Gates

https://www.flickr.com/photos/scottlynchnyc/10546981384

Automation

https://www.flickr.com/photos/oldpatterns/6252459830

서버사이드에 비해많이 뒤쳐져 있었다

의존성 관리

https://www.flickr.com/photos/ciat/4106461308

<!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> </head> <body> <h1>SpringSprout Demo</h1> </body> </html>

1 2 3 4 5 6 7 8 9

% 라이브러리사이트 검색

어떻게 사용하고 있나요?



프로젝트 폴더에다운로드&



HTML에코드 추가

프로젝트 폴더에다운로드' &

<!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <link href="./css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>SpringSprout Demo</h1>

<script src="/js/jquery.js"></script> <script src="/js/bootstrap.js"></script> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Package Manager

http://browserify.org/

http://bower.io/

$ bower install jquery bootstrap

jquery#2.1.1 components/jquery

bootstrap#3.3.1 components/bootstrap └── jquery#2.1.1

$ ls components/ bootstrap jquery

<!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <link href="./components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> </head> <body> <h1>SpringSprout Demo</h1>

<script src="./components/jquery/dist/jquery.js"> </script> <script src="./components/bootstrap/dist/js/bootstrap.js"> </script> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

( 라이브러리 파일을 형상관리도구에 넣지 않는다

CSS나 JS가 아닌 컴포넌트 단위로 관리한다

Pagage Manager를 쓸 때의 장점

버전만 관리하면서 필요에 따라 업데이트하기 쉽다.

보통은 min 버전이 함께 제공된다

(

(

(

https://www.flickr.com/photos/110751683@N02/13792583873/

웹서버 실행

) 로컬 파일을 브라우저에서 실행C:\Documents/Project/index.html




Apache, nginx*



Apache, nginx

+*

WAS 실행(Tomcat 등)



, python -m SimpleHTTPServer

Apache, nginx

+*

WAS 실행(Tomcat 등)

http://gruntjs.com

http://gulpjs.com

module.exports = function(grunt) { 'use strict';

// 프로젝트 설정 grunt.initConfig({ }); };

1 2 3 4 5 6 7 8 9

Gruntfile.js

grunt-contrib-connect

grunt-contrib-watch

grunt.initConfig({ connect: { server: { options: { port: 8000, base: '' } } }, watch: {} });

1 2 3 4 5 6 7 8 9 10 11 12

Gruntfile.js

$ grunt connect watch Running "connect:server" (connect) task Started connect web server on http://0.0.0.0:8000

Running "watch" task Waiting…

( 프로젝트 별로 필요한 환경을 자동화

프로젝트내에서 자동화된 환경을 공유

빌드도구를 쓸 때의 장점

다른 개발도구에 종속되지 않는다

CI서버 등에서 사용할 수 있다

(

(

(

https://www.flickr.com/photos/wiertz/10248755515

코드의 품질 관리

ESLintCSS LINT

https://github.com/yaniswang/HTMLHint

http://twitter.github.io/recess/

http://csslint.net

http://flowtype.org

http://eslint.org

http://www.jshint.com

.profile { height: 400px; }

.learn_more { -ms-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); -o-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); }

1 2 3 4 5 6 7 8 9 10 11

style.css

$ recess style.css

Analyzing the following files: style.css

FILE: style.css STATUS: Busted FAILURES: 2 failures

Underscores should not be used when naming selectors 8. .learn_more

Incorrect property order for rule ".learn_more"

Correct order below:

9. -webkit-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 10. -moz-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 11. -ms-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 12. -o-box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.5); 13. box-shadow: inset 5px 5px rgba(0, 0, 0, 0.5);

var temp;

function sum(a, b) { return a + b }

1 2 3 4 5

common.js

$ jshint util.js util.js: line 4, col 3, Missing "use strict" statement. util.js: line 4, col 15, Missing semicolon. util.js: line 1, col 5, 'temp' is defined but never used. util.js: line 3, col 10, 'sum' is defined but never used.

4 errors

/* @flow */

function foo(x) { return x*10; }

foo("Hello, world!");

1 2 3 4 5 6 7

hello.js

$ flow check hello.js

hello.js:7:5,19: string This type is incompatible with hello.js:4:10,13: number

Found 1 error

grunt.initConfig({ recess: { dev: { src: ['src/main.css'] } }, jshint: { dev: { src: ['js/**/*.js'], } }, flow: { dev: { } } });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

Gruntfile.js

grunt.initConfig({ recess: { dev: { … } }, jshint: { dev: { … } }, flow: { dev: { … } }, watch : { css: { files: ['css/**/*.css'], tasks: ['recess:dev'] },

js: { files: ['js/**/*.js'], tasks: ['jshint:dev', 'flow:dev'] } } });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Gruntfile.js

https://www.flickr.com/photos/photomonkey/5669185

pre-processor

http://sass-lang.com/

http://learnboost.github.io/stylus/

http://lesscss.org/

http://coffeescript.org/

grunt.initConfig({ less:{ dev: { files: { 'css/style.css': 'css/main.less' } } }, watch : { less: { files: ['css/**/*.less'], tasks: ['less:dev'] } } });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Gruntfile.js

' 코드 수정


' 코드 수정


브라우저로 이동-

' 코드 수정


F5로 새로 고침

브라우저로 이동

.

-

' 코드 수정


/ 변경 내용 확인

F5로 새로 고침

브라우저로 이동

.

-

grunt.initConfig({ connect: { server: { options: { port: 9999, base: '' } } }, watch: { less: { files: ['css/**/*.less'], tasks: [‘less:dev’], options: { livereload: true } }, js: { files: ['js/**/*.js'], tasks: ['jshint:dev', ‘flow:dev’], options: { livereload: true } } } });

1 2 3 4 5 6 7 8 9 10 11 12

Gruntfile.js

https://www.flickr.com/photos/photomonkey/5669185

유닛테스트

assert test framework test runner

expect(foo).to.be.a('string');

expect(foo).to.equal('bar');

expect(foo).to.have.length(3);

expect(beverages) .to.have.property('tea') .with.length(3);

1 2 3 4 5 6 7 8 9

describe('Array', function() { describe('#indexOf()', function() { it('should return -1', function() { // assert }) }) })

1 2 3 4 5 6 7 8

function plus(a, b) { return a + b; }

function minus(a, b) { return a - b; }

function times(a, b) { return a * b; }

function divide(a, b) { return a / b; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

util.js

describe('util', function() { describe('plus', function() { it('should return 3', function() { var result = plus(1, 2); expect(result).to.equal(3); }); });

describe('minus', function() { it('should return 2', function() { var result = minus(5, 3); expect(result).to.equal(2); }); }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

util.spec.js

( 필요한 파일 로딩

설정된 브라우저 실행 후 테스트

karma-runner

테스트 결과를 Socket.IO로 콘솔에 출력

파일 수정할 때마다 재 실행

(

(

(

작성한 자동화 스크립트는 최대한 써먹자

https://www.flickr.com/photos/bribri/8731091993

배포

<!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title> <link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="/css/common.css" rel="stylesheet"> <link href="/css/main.css" rel="stylesheet"> <link href="/css/page.css" rel="stylesheet"> <link href="/css/content.css" rel="stylesheet"> </head> <body> <script src="/components/jquery/dist/jquery.js"></script> <script src="/components/bootstrap/dist/js/bootstrap.js"> </script> <script src="/js/common.js"></script> <script src="/js/template.js"></script> <script src="/js/service.js"></script> <script src="/js/server.js"></script> <script src="/js/util.js"></script> </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

index.html

0 CSS/JS 병합


0 CSS/JS 병합


CSS/JS 압축1

0 CSS/JS 병합


HTML에서 링크 변경

CSS/JS 압축

'

1

grunt.initConfig({ useminPrepare: { html: 'index.html', options: { dest: '.' } }, usemin: { html: 'index.html' } });

grunt.registerTask('build', [ 'useminPrepare', 'concat:generated', 'cssmin:generated', 'uglify:generated', 'usemin' ]);

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Gruntfile.js

<!DOCTYPE html> <html> <head> <title>SpringSprout Demo</title>  <link href="/components/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <link href="/css/common.css" rel="stylesheet"> <link href="/css/main.css" rel="stylesheet"> <link href="/css/page.css" rel="stylesheet"> <link href="/css/content.css" rel=“stylesheet">  </head> <body>  <script src="/components/jquery/dist/jquery.js"></script> <script src="/components/bootstrap/dist/js/bootstrap.js"> </script> <script src="/js/common.js"></script> <script src="/js/template.js"></script> <script src="/js/service.js"></script> <script src="/js/server.js"></script> <script src=“/js/util.js"></script>  </body> </html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

index.html

예제: https://github.com/outsideris/presentations/tree/master/14-11-30-adieu-springsprout2Thank you!

Technology

Front-end Development Process - 어디까지 개선할 수 있나