The State of Front-End Tooling - 2016

 

안녕하세요 쥬벨롶입니다. 

이전에 DJ.VUD님이 작성하셨던 The State of Front-End Tooling - 2015 (바로가기) [프론트 엔드 개발툴 현황]을 이어 2016년도에는 어떠한 개발툴들이 사용되었는지, 작년과 어떻게 달라졌는지, 비교해보면서 트렌드까지 함께 알아보려합니다.

위 차트는 webPonent Chart로 제작되었습니다

2016년도 설문에는 2015년도자 survey 보다 2.3배 더 많은 프론트앤드 개발자들이 설문에 참여하였는데요.

이제 어떠한 결과들이 나왔는지 함께 볼까요?

General Front-end Experience & Knowledge
(프론트-엔드 개발 경력 및 지식)

지식	CSS	JS
초심자	78명	197명
초급개발자	424명	553명
중급개발자	1,243명	1,555명
고급개발자	2,203명	1,684명
전문가	767명	726명

위 차트및 그리드는 webPonent Chart로 제작되었습니다

개발경력이 2-5년차, 5-10년차의 프론트-앤드 개발자들이 많이 참여해주셨으며, CSS와 JavaScript에 고급지식을 소유한 응답자들이 많이 참여해 주셨네요. 

CSS Processor
(어떤 CSS processor를 사용하는지)

위 차트및 그리드는 webPonent Chart로 제작되었습니다

작년과 마찬가지로 응답자 대다수의 사람이 CSS처리기를 사용하고 있었습니다.

여전히  Sass가 가장 큰 비중을 차지하고 있네요! 많은 응답자들이 Sass를 사용하기 편하다고 응답했으며 응답자 전원중 11.68%가 Sass에대해 한번도 들어본적이 없다고 하네요. 

Sass다음으로는 Less가 퍼센테이지가 높지만, 작년과 비교해보면 -5% 정도 줄어들었군요.

작년 설문과 비교해보면 PortCSS와 Rework css모듈러가 추가된것을 한눈에 볼수 있는데요. PortCSS도 한번 눈여겨봐야겠군요!

CSS Naming Schemes & Experience
(CSS Naming Convention 및 사용 경험)

이번엔 CSS Naming관련 부분입니다. 코드를 작성하다보면 표준도 따라야되고 명확해야하고 클래스 이름짓기 막막하실 때 있으시죠? 좀더 편리하게 클래스 네이밍을 하고자 여러가지 방법들이 제시되고 있습니다.

이번 설문의 질문은 'CSS작성에 있어 BEM이나  SUIT같은 네이밍 스키마를 사용한적이 있는가?'입니다.

 

위 차트및 그리드는 webPonent Chart로 제작되었습니다

많은 응답자들이 사용하고 있다고 하네요, 여러분은 BEM이나 SUIT 사용하고 계신가요?? 

이중에 BEM은 네이밍 스키마를 사용하는 응답자 (2,160) 중에서 대다수가(1,560) 편리하다고 응답했습니다,

BEM에 대해 좀더 궁금하시다면 이전에 올라왔던 블로그 게시글 중 관련된 글이 있으니 한번 읽어보시길..ㅎㅎ 

BEM관련 블로그게시글  [ CSS Naming Conventions BEM ] 바로가기

CSS & Javascript Linting
(CSS 및 Javascript Lint를 위한 툴사용 여부)

자! 다음은 코드 검사 툴을 사용하는지 질문했습니다.

위 차트및 그리드는 webPonent Chart로 제작되었습니다

CSS코드 검사의 경우 응답자의 절반정도만 CSS코드 검사 툴을 사용한다고 하네요. 자세히 보시면 CSS에 관해 높은 수준의 지식을 가진 응답자들이 초급수준의 지식을 가진 응답자보다 많이 사용한다고 하네요

사실 저도 CSS는 코드검사를 하는편은 아니였습니다. 그러다, 한번 돌려보고 난 뒤 비슷한 패턴에서 반복해서 발생하는 것들을 찾을 수 있었고 그 이후부터 코딩할 때 그부분을 더 조심하게 되더군요! 

JavaScript 를 검사하는 응답자는 전체중에 77.18%가 사용한다고 응했으며 사용하는 툴에 대해서는 오른쪽 차트와 같습니다. 검사를 시행하는 응답자 중 많은 사람들이 ESLint를 사용한다고 하네요. 

ESLint는 들어는봤지만 사용해본 적은 없습니다. 주로 JSLint 나 JSHint를 사용하지만, 한번 써보고 싶네요 ^0^

여러분은 어떠신가요? 

Task Runners
(프로젝트에 어떤 Task Runner를 사용하는지)

• ■ 2015년
• ■ 2016년

위 차트및 그리드는 webPonent Chart로 제작되었습니다

우와~ Grunt의 사용은 줄고 NPM이 급속도로 성장한것이 눈에 띕니다.

또한, 작년에 이어 여전히 Gulp가 많이 사용되어지구 있군요. 

이전 블로그에서 Gulp에 대해 간단한 설명과 설치 방법에 대해 설명한 글이 있습니다.

혹시 궁금하신 분들은 요기 간단한 빌드시스템 GULP ! [바로가기] 링크로 들어가시면됩니다... ㅎㅎ

Javascript Libraries and Frameworks
(project에 사용하는 library와 framework는?)

마지막으로 어떠한 라이브러리와 프레임워크가 응답자들의 프로젝트에서 쓰여졌는지 알아보겠습니다.

• ■ 2015년
• ■ 2016년

위 차트및 그리드는 webPonent Chart로 제작되었습니다

역시 jQuery가 16년도에도 가장 높은 비율을 차지하지만 React.와 Rodish가 빠르게 성장하였네요.

싱글 페이지 구현에도 좋은 React.js는 계속해서 화제가 되고 있는 프레임워크죠. 

그외에도 다양한 라이브러리와 프레임워크가 사용되어지고 있는것 같네요 ㅎㅎㅎ

저는 19개의 설문 중에 일부분에 대해 알아보았습니다. 

그외에도 패키지 및 업무관리에 사용되는 도구툴이라든지, 모듈 번들러 사용여부 등등 궁금하신 분들을 위해 

원글에서의 19개의 질문과 링크를 걸어드리겠습니다.

참고 페이지 : https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results#experience-general   1. General Front-end Experience   2. CSS Knowledge Levels   3. CSS Processor Usage   4. CSS Processor Experience   5. CSS Naming Schemes   6. CSS Linting   7. CSS Tool Experience   8. CSS Methodologies and Naming Scheme Experience   9. CSS Tool Usage   10. JavaScript Knowledge Levels   11. Task Runners   12. Knowledge of JavaScript Libraries and Frameworks   13. Most frequently used JS tools   14. Most essential JS tool   15. JavaScript Module Bundlers   16. JavaScript Transpilers   17. JavaScript Linting   18. JavaScript Testing   19. Miscellaneous Tools