2012-04-20 2 views
2

저는 최근에 클라이언트 측 템플릿 용으로 "동일한"구문을 사용하는 템플릿 시스템과 Twig와의 통합에 대해 궁금해했습니다. 발견 Swig, "꼬마 요정"에 대한 것 같습니다.백엔드 및 프론트 엔드 템플릿에 동일한 나뭇 가지 구문 사용하기

  • 또 다른 문법을 배울 필요없이,
  • 휴대용 템플릿 : 여러 가지 혜택을 수있는 동일한 구문을 사용

    은 같은 블록은 프론트 엔드 및/또는 백엔드 템플릿에 모두 사용에 따라 수 건축물. 당신이 그것을 이름을

  • ...

그러나, 몇 가지 문제가 발생할 것입니다 :

  • 내가 태그/블록/템플릿에서 부품을 구문 분석을 프론트 엔드 최선을 다하고 있습니다을 정의하는 메커니즘을 필요 . {% raw %} 태그는 작업을 수행하지만 ...
  • 휴대용 템플릿을 목표로하면 매우 세부적인 블록과 "원시로 포함"할 수 있습니다. 예를 들면 : 내 기본 HTML 파일의 프론트 엔드 템플릿 엔진에서 사용할 수있는 모든 블록을 모으고 싶습니다. 각 블록은 <script> 태그 안에 싸여 있습니다. 따라서이 블록을 "원시 포함"해야합니다.

누구나 Swig 또는 Twig의 구문과 다소 충돌하는 구문을 가진 다른 자바 스크립트 템플릿 시스템과 함께 Twig를 사용 했습니까? 프론트 엔드에서 템플릿을 쉽게 사용할 수 있도록 템플릿을 관리하고 구성하는 방법은 무엇입니까?

+0

나는 swig에 태그를 붙인 다른 질문의 대부분이 그 태그 wiki가 설명하는 것과 같은 swig가 아니라고 생각합니다. – Flexo

+0

원하는 정확한 목적은 아니지만 [twig.js] (https://github.com/schmittjoh/twig.js)를 확인하십시오. – Maerlyn

+0

@Maerlyn 감사합니다. –

답변

0

면책 조항 :이 질문에 대한 답변은 열려 있지 않으므로, 에 기재하십시오. 나는이 질문에 대답하는 단순하고 단 하나의 방법이 없기 때문에 나의 경험을 공유하고있다.

저는 심포니 친구들과 긴밀하게 협력하는 프론트 엔드 웹 개발자입니다. 당시 우리는 나뭇 가지와 콧수염을 함께 사용했습니다. 콧수염 템플릿은 아약스 호출이 필요한 곳이면 어디서든 중복 될 수 있습니다. 확실히 이것은 거대한 유지 관리 오버 헤드였습니다.

저는 두 가지 문제를 다루는 두 부분으로 제 대답을 나누었습니다. 프론트 엔드 가능하게 템플릿을 구조화하고, 나뭇 가지의 자바 스크립트 구현을 추가합니다.


템플릿 구조

우리가 논리적으로 구성하는 템플릿으로했다 첫 번째 단계는, 페이지 수준, 기능표상 템플릿로 분할되었다.

페이지 수준 템플릿은 앱 콘텐츠를위한 일반 컨테이너를 정의하는 템플릿입니다.의 생각한다

  • 사용자 권한이없는
  • 사용자는

기능 템플릿을 한 단계 더 깊은 이메일

  • 승인했다. 그것들은 전체 페이지를 만드는 데 사용되는 조립식입니다. 일반적으로 백엔드에서 데이터를 가져 오는 지점입니다. 예를 들어 컨테이너에있는 사용자 목록을 생각해보십시오. 기능 템플릿은 데이터를 전달하는 프리젠 테이션 템플릿을 포함하는 컨테이너입니다.

    프리젠 테이션 템플릿은 논리가없는 (데이터 변환 없음) 구성 요소이며 데이터가 제공됩니다. 이 구성 요소는 중첩 될 수 있습니다. (예 : 버튼제목은 모두 CTA 구성 요소에 포함됩니다. 프리젠 테이션 구성 요소는 우리 빌딩 블록 중 가장 좋은 곡물입니다.

    이 방법으로 코드를 구성하는 데는 시간이 많이 걸리지 만 프런트 엔드 렌더링이 가능한 구성 요소와 로직이 많이 필요한 구성 요소를 명확하게 구분할 수 있습니다.


    Twig.js twig.js (코멘트 중 하나에 제안) 다음 단계는 통합 된

    .

    나는 프론트 엔드 템플릿 엔진에서 사용할 수있는 모든 블록을 내 주 HTML 파일에 모으고 싶습니다. 각 블록은 태그 안에 싸여 있습니다. 따라서이 블록을 "원시 포함"해야합니다.

    twig.js를 사용하면 프런트 엔드에서 사용할 수 있도록 템플릿을 만들지 않아도됩니다. 당신은 URL을 제공 할 수 있으며, 템플릿이 다른 템플릿을 확장하거나 포함하면 비동기 적으로로드됩니다. 따라서 json 데이터가 제공되는 나뭇 가지 템플릿은 자바 스크립트로 렌더링되므로 추가적인 템플릿 엔진이 필요하지 않습니다.


    성능 테스트를 한 번도 해보지 않았습니다. twig.js가 콧수염보다 상당히 느리다고 상상할 수도 있지만, twig.js의 논리가없는 구성 요소 만 렌더링하면 성능이 크게 향상 될 수 있습니다.

    내가 아무 것도 언급하지 않았다면 알려 주시기 바랍니다. 나는이 주제에 대해 더 논의하기를 열망하고있다.

  • 관련 문제