React.제이스가 아니라 리오야.js를 채용하면 활용 중인 서비스 "GAMY"업데이트

이번에는 게임 공략 커뮤니티 "Gamy"의 서비스로 리오를 진행한다.js를 채택했습니다.
내가 알기로는 리오야.나는 이것이 js가 실시하는 사이트 중 규모가 가장 큰 서비스라고 생각한다.

지금까지 jQuery와 jQuery 플러그인을 사용했지만, 디자인의 업데이트를 계기로 모두 다시 쓰기로 했습니다.
동시에 문서를 출력합니다.

Riot.js 소개

Riot.js는 현재 유행하는 React이다.js와 비슷한 구조가 있어 매우 가벼운 자바스크립트 총서.
최근 GiitHub의 창고가/muut/riotjs에서/riot/riot로 옮겨져 앞으로 더욱 주목할 총서입니다.
자세한 내용은 여기를 보시오↓
공식.
Riot.정보 요약
GitHub

버리는 것을 전제로 한 장서를 선택하다

애초 현재 유행하는 양대 프레임으로 자리 잡은'앵글JS'와'리액트'를 시도했으나 채택되지 않았다.
AnglarJS는 2.0의 걱정이 있는데, React는 Flex에 따라 다르다.
그리고 리액트에 관해서는 jQuery보다 더 커요. 스마트폰에 이걸 읽으라고요?그냥 뷰예요.
이런 느낌은 나로 하여금 본말이 뒤바뀌는 것 같아서 포기했다.
AnglarJS든 React이든 진정으로 원하는 기능은 일부일 뿐, 이번에는 그렇게 큰 것이 필요 없다.
반년이 지나면 또 다른 장서가 휩쓸릴 것 같아요.
어차피 그때가 되면 코드를 다 다시 쓰고 싶을 텐데.
그래서 우리는 언제든지 버릴 수 있도록 작은 부품을 조합했다.
GAMY 에 있습니다.js 외에 aax 통신용 슈퍼랜딩도 추가되었습니다.
riot.js - 12KB
superagent - 10KB
안녕 jQuery-84KB

사용하기 쉬운 어셈블리 설계

riot.js의 가장 큰 장점은div 탭을 쓰는 것입니다
출력을 마음대로 읽는 간단한 곳.
예를 들어, 이름이 articles인 어셈블리의 경우

<div riot-tag="articles"></div>

이 행을 HTML에 추가하면 구성 요소가 자동으로 읽힙니다.
이런 느낌으로 페이지가 분할되니까, 리오.js는 각각 표시한다.

덕분에 서버 측은 최소한의 코드만 있으면 전망이 좋아졌다.
또한 처음 읽은 내용이 줄어들면서 서버의 응답 시간은 약 6분의 1로 줄어들었다.
발행 후의 도표(16 시 발행)

MVC처럼 분할해서 만들기 쉬워요.

기본 어셈블리의 구조는 Ajax를 통해서만 데이터를 가져오고 출력하기 때문에 API의 JSON 모드를 모델로 간주합니다.
따라서'모델이란 서버 쪽에서 이루어져야 한다'는 생각이 든다.
riot.js에서 구성 요소를 구성하는 사용자 정의 태그의 내용은 일반 HTML처럼 스크립트 탭에 기술되어 있습니다.

<articles>
  <h3>{title}</h3>

  <ul>
    <li each={items}>
      <a href="{url}">{text}</a>
    </li>
  </ul>

  <script>
    this.title = "記事一覧"
    this.items = ajax.get(...)
  </script>
</articles>

따라서 HTML 부분인 View, script 부분을 Controller, Ajax 부분으로 나누어 모델로, 각 구성 요소는 MVC와 같은 모양으로 예쁘게 분할된다.

Riot.js의 결점

약한 애니메이션

리액트라고도 할 수 있지만 기본적으로 모든 구성 요소를 디자인해야 하기 때문에 애니메이션을 잘하지 못한다.
나는 전체 화면에 그린 애니메이션을 틀고 싶은 것은 적합하지 않다고 생각한다.

실수를 많이 했어요.

설치 과정에서 나는 여러 차례 오류를 밟았다.귀속 처리 중 오류가 발생했습니다. 업데이트를 추가할 때 반영되지 않았습니다.
하지만 다른 유사한 증상이 있는지 조사하면 대부분 보고가 돼 마스터에 합병됐다.
그래서 발전 중이지만, 잘 개발되어 버전 업그레이드로 고쳐졌기 때문이다.
그리고 그 안의 내용은 정규 표현식의 퍼스를 사용하기 때문에 이상한 코드를 쓰지 않는 것이 좋다.
요즘은 버그 밟을 일이 없어요!

문서가 적음

이것은 방법이 없지만 문서가 매우 적고 검색도 성공하지 못하기 때문에 실패할 것이다.이럴 땐 어쩔 수 없이 설치된 코드를 읽을 수밖에 없다.
총서의 코드는 어렵지만 코드 양도 적어 읽기 쉽다.
해설 기사도 카페 사장이 Qita에 썼는데, 나 같은 병아리 엔지니어도 쉽게 이해할 수 있었다.
Riot.전체 설명 js 소스 코드
뷰 주위의 테스트 코드도 적혀 있기 때문에 실장 방법을 알고 싶으면 저쪽을 추천합니다.

편집된 문법은 기본적으로 반응하지 않습니다

확장자.G니까.glup 힘내라고 해도 되는데 자꾸
확장자는 pug이 되어도 읽을 수 있습니다!

총결산

리액트, 앙글라 JS 같은 유행이 있긴 하지만 솔직히 지금까지 제이큐리만 만든 사이트라 그렇게 과장된 프레임이 필요 없고 새로운 기억이 많아서 힘들었겠죠
Riot.js라면 간단하면서도 예뻐요. 추천합니다.
리우 좀 더 주세요.js가 유행했으면 좋겠어요.
그렇다면