Fork me on GitHub

2015-07-21 JS: TypeScript 1.5, Web Components 개요, 브라우저 공식 사이트 모음

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #237 - TypeScript 1.5가 릴리즈 됐습니다.

새로운 기능에 대한 소개는 What's new in TypeScript에 정리돼 있습니다. 간단히 말해 이번 버전에서 ES6와 관련한 modules, destructuring, spread, for/of, symbols, computed properties, let, const 등의 구문을 지원합니다.

또 TypeScript의 기능으로는 --module umd--module system으로 지원하는 모듈의 종류 추가, --inlineSourceMap으로 인라인 SourceMap 지원, --experimentalDecorators의 플래그로 Decorator의 지원 등이 추가 됐습니다.

기존의 구문이나 Compiler API의 대대적인 변경 내용은 아래에 정리돼 있습니다.

TypeScript 1.5.3 변경 사항 - Qiita(일본어)에도 변경 사항이 자세히 작성돼 있으므로 함께 읽어보면 좋을 것 같습니다.


Bringing componentization to the web: An overview of Web Components | Microsoft Edge Dev Blog에 Web Components에 의해 무엇이 달라지는지 자세히 작성돼 있습니다.

Web Components가 어떤 문제를 해결해주는지, 이미 있었던 유사한 구현 등 역사에 대해, 기존의 구현에서는 무엇을 해결 못했었는지, 현재 Web Components의 상황 등에 관해 작성돼 있습니다.

또, Microsoft Edge and Web Components | Microsoft Edge Dev Blog에는 MSEdge에서의 Web Components 구현 방침에 관해서 작성돼 있습니다.


위의 MSEdge의 이야기가 그렇듯이 최근에 브라우저 벤더들이 다양한 정보를 공개하고 있습니다.

공식 정보만 취하려고 하더라도 여러 사이트에 작성돼 있기 때문에 정보를 찾아 보기가 꽤 어렵습니다.

그런 공식 사이트 정보를 azu/browser-javascript-resource에 정리했습니다.

변화를 만드는 사람이 모이는 장소에는 자연스럽게 정보가 모이므로 브라우저 벤더가 공개하는 정보만 봐도 꽤 폭넓은 정보를 얻을 수 있다고 생각합니다.


헤드라인


V8 JavaScript Engine: V8 4.5 release

v8project.blogspot.com/2015/07/v8-45-release.html

JavaScript V8 ReleaseNote

V8 4.5(Chrome 45)가 릴리즈 됐습니다.
Arrow Function, Array/TypedArray의 메소드 및 Object.assign가 추가됐고 새로운 최적화 컴파일러로 TurboFan을 도입했습니다. 또, V8 API 등이 변경됐습니다.


ESLint 1.0.0-rc-1 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2015/07/eslint-1.0.0-rc-1-released

JavaScript Tools ReleaseNote

ESLint 1.0.0-rc-1이 릴리즈 됐습니다.
--reset이 기본(default)으로 변경됐으며, ES6의 지원을 개선, 새로운 규칙이 추가 되는 등 다양한 변경 사항이 있습니다.


Announcing TypeScript 1.5 - TypeScript - Site Home - MSDN Blogs

blogs.msdn.com/b/typescript/archive/2015/07/20/announcing-typescript-1-5.aspx

TypeScript ReleaseNote

TypeScript 1.5가 릴리즈 됐습니다.
modules나 destructuring 등 ES6 지원을 개선했고 tsconfig.json를 이용해 프로젝트를 설정할 수 있습니다. 또한 --experimentalDecorators 플러그로 Decorator를 시험적으로 지원합니다.


node-browserify/changelog.markdown at master · substack/node-browserify

github.com/substack/node-browserify/blob/master/changelog.markdown#1100

browserify ReleaseNote

Browserify 11.0.0이 릴리즈됐습니다.
브라우저용 stream으로 사용하는 readable-stream을 업데이트하고 Stream3 기반으로 변경했습니다.
브라우저용 http 모듈을 Fetch API를 기반으로한 stream-http로 변경하고 stream을 지원할 수 있도록 했습니다.


아티클


Bringing componentization to the web: An overview of Web Components | Microsoft Edge Dev Blog

blogs.windows.com/msedgedev/2015/07/14/bringing-componentization-to-the-web-an-overview-of-web-components/

WebComponents MSEdge browser

Web Components에 관해 자세히 설명하고 있습니다.
어떤 목적이 있는지, 관련된 컴포넌트 구현의 역사 등을 소개합니다.
CSS 스타일의 isolation, 스타일의 스코프, Global object isolation, iframe에 부족한 부분 등을 설명합니다.


Socket.IO — Socket.IO P2P

socket.io/blog/socket.io-p2p/#

p2p node.js library

Socket.IO에서 WebRTC를 이용한 P2P 통신 방법이 작성돼 있습니다.


Comprehensive Beginner's Guide To ReactJS - AntJanus

antjanus.com/blog/web-development-tutorials/front-end-development/comprehensive-beginners-guide-to-reactjs/

AngularJS React

AngularJS 사용자를 위한 React.js 입문 가이드입니다.


How to Debug JavaScript Remotely With Vorlon.js - Tuts+ Code Tutorial

code.tutsplus.com/tutorials/how-to-debug-javascript-remotely-with-vorlonjs--cms-24343

JavaScript debug tutorial

Vorlon.js를 사용한 JavaScript 원격 디버깅을 소개합니다.


ES6 In Depth: Proxies ✩ Mozilla Hacks – the Web developer blog

hacks.mozilla.org/2015/07/es6-in-depth-proxies-and-reflect/

JavaScript ECMAScript

Proxy API에 관해 설명합니다.
Proxy로 다루는 14개의 인터널 메서드, Proxy를 사용하는 곳, Revocable proxyies 등이 작성돼 있습니다.
"객체는 프로퍼티의 집합이다"라고 말할 수 있는지 이야기합니다.


StrongLoop | An Introduction to JavaScript ES6 Iterators

strongloop.com/strongblog/introduction-to-es6-iterators/

JavaScript ECMAScript

ES6 Iterator에 관해 설명합니다.
for-of와 for-in의 차이, Symbol.iterator로 정의하고 사용하는 방법을 소개합니다.


azu/browser-javascript-resource

github.com/azu/browser-javascript-resource

browser JavaScript blog まとめ

IE나 Firefox 등의 브라우저별 릴리즈 노트나 변경 몇 구현 상황, 버그 리포트의 방법 등을 어느 사이트에서 보면 좋은지 정리했습니다.


모르면 손해보는 Sass의 내장 함수 완벽 해부 | Yuhiisk(일본어)

blog.yuhiisk.com/archive/2015/07/14/sass-built-in-functions.html

Sass リファレンス

Sass의 함수가 정리돼 있습니다.


Flux in Depth. Store and Network Communication. – Minko Gechev's blog

blog.mgechev.com/2015/07/18/flux-in-depth-store-network-communication-services

Flux JavaScript

Flux 아키텍체에서의 객체 네트워크를 포함한 데이터 흐름에 관해 설명합니다.
Store -> View, View -> Store 까지의 흐름, 모델과 State의 분리,
Network -> UI 또는 UI -> Network의 패턴에 관해 소개합니다.


슬라이드, 영상


An Introduction to Browser Rendering - YouTube

www.youtube.com/watch?v=n1cKlKM3jYI

browser 영상

브라우저 랜더링 흐름을 설명하는 스크린 캐스트입니다.


소프트웨어, 툴, 라이브러리


nikgraf/belle

github.com/nikgraf/belle/

React UI library

React Component로 개발된 UI Kit
JavaScript 리터럴 객체를 이용해 스타일을 커스텀할 수 있습니다.


ipselon/react-ui-builder

github.com/ipselon/react-ui-builder

React UI Tools

React Component를 GUI로 일정한 자리에 알맞게 두거나, 지정한 UI 형태로 React.js의 코드를 얻고 GUI에서 코드를 편집하고 프리뷰 등이 가능한 도구입니다.
도구 자체가 React.js와 Proxy로 개발돼 있어 재미있습니다.


도서


DrBoolean/mostly-adequate-guide

github.com/DrBoolean/mostly-adequate-guide

JavaScript 함수형 프로그래밍

JavaScript의 함수형 프로그래밍에 관한 무료 서적입니다.


JavaScript Regular Expressions - O'Reilly Media

shop.oreilly.com/product/9781783282258.do

JavaScript 정규표현식 book

JavaScript의 정규표현식에 관한 도서입니다.


Pull Request to this article
JSer.info Slackに参加する