왜 제가 Sapper JS를 제 사이트로 선택했는지, 그리고 지금까지 이 프레임워크에 대한 이해를 얻었습니다.

와, 얼마나 좋은 틀인가!
이 글에서 저는 제 사고 과정을 설명할 것입니다. 저는 어떻게 기술 창고를 골라서 제가 구조가 좋은 사이트를 구축하는 데 필요한 모든 기준을 만족시킬 수 있는지 설명할 것입니다.
  • 민첩하고 번개 같은 성능
  • 검색 엔진 최적화, 인터넷에서 볼 수 있도록
  • 효율적인 해커 공격의 개발자 우호성
  • 사이트 도구 분야의 혁신
  • 개발자가 신기술을 시도하는 자연적 호기심
  • 저는 현대JAMStack를 바탕으로 설정된 사이트를 구축하고 싶어서 다음과 같은 프레임워크 유행도와 성숙도를 바탕으로 선택했습니다.
  • 다음.js
  • 개츠비
  • 우과
  • Nuxt.js
  • 및maaanymore
  • Netlify가 제공하는 정적 사이트 생성기의 전체 목록을 StaticGen 에서 볼 수 있습니다. 경쟁자가 많습니다!

    다음회사 명


    저는 약 2년간의 React 전문 경력을 가지고 있기 때문에 Next를 선택하는 것이 매우 의미가 있습니다.js는 나의 첫 번째 선택 프레임워크이지만, 그것은 너무 쉽다. 그렇지?
    다른 JavaScript 프레임워크에 더 잘 적응하기 위해 Next와 같은 React 기반 프레임워크를 사용하지 않기로 했습니다.js.

    개츠비


    나는 개츠비를 더 이상 뽑고 싶지 않다. 왜냐하면 나는 이미 그것으로 내가 최근에 시작한 또 다른 프로젝트 DAW Comparison 를 하고 있기 때문이다.
    다른 도구를 시도하고 싶은 것 외에 나는 게이츠비를 사용하는 개발자 체험을 완전히 누리지 못했다. 왜냐하면 나는 성능 문제에 부딪혔기 때문에 gatsby-image 내가 원하는 방식으로 일을 할 수 있는 방법을 생각하기 어려웠고 유지보수/중복되지 않은 플러그인에 대해 낙담했다.
    그럼에도 불구하고 나는 게이츠비가 계속 존재하고 우수한 틀로 발전할 것이라고 확신한다. 특히 게이츠비는 이미 매우 인기가 있고 2020년 5월에 인정받았기 때문이다$28M in Series B Funding.

    우과


    Go 언어로 백엔드 프로젝트를 작성하는 데 관심이 있지만 Hugo 관심 범위에 있지 않고 혼란스러워 보이는 템플릿 문법 때문에 흥미가 없습니다. 예를 들어
    {{ define "main" }}
    <main aria-role="main">
      <header class="homepage-header">
        <h1>{{.Title}}</h1>
        {{ with .Params.subtitle }}
        <span class="subtitle">{{.}}</span>
        {{ end }}
      </header>
      <div class="homepage-content">{{.Content}}</div>
      <div>{{ range first 10 .Site.RegularPages }} {{ .Render "summary"}} {{ end }}</div>
    </main>
    {{ end }}
    
    이것은 아마도 매우 강력한 사이트 생성기일 것이다. 그러나 나의 목표는 나의 사이트 프로젝트를 간소화하는 것이다.

    Nuxt。회사 명


    Nuxt.js를 사용하여 사이트를 구축하는 것은 매우 의미가 있다. 왜냐하면 나는 모든 세 가지 주요 자바스크립트 프레임워크(React, Angular와 Vue.js)를 사용하는 실제 경험을 얻을 수 있기 때문이다.
    Vue.js는 GitHub와 전체 js 장면에서 인기가 많습니다. 왜냐하면 이것은 거의 React와Angular의 가장 좋은 기능을 결합시켰기 때문입니다. 그러나 당신이 아래에서 더 읽을 것처럼, 저는 최종적으로 낙후자를 선택하기로 결정했습니다.

    작은 우회


    얼마 전에 Svelte를 발견했고 새로운 사용자 인터페이스 구축 방법으로서의 약속에 호기심과 반감을 느꼈다.
    그들의 사이트에서 보듯이 "Svelte는 보통 브라우저에서 이루어지는 대부분의 작업을 컴파일 절차로 옮깁니다. 컴파일 절차는 응용 프로그램을 구축할 때 발생합니다."야, 이것은 성능 문제를 해결하는 좋은 방법으로 들린다!
    전체 작업Svelte tutorial을 끝낸 후에 나는 WTF의 순간(가장 적극적인 의미에서 말하자면)이 있었다. WTF의 절대적인 단순성과 유창한 개발 체험은 나에게 깊은 인상을 남겼다.
    그럼에도 불구하고 너무 지하적이라는 것을 인정하면 조만간'다른 자바스크립트 프레임워크'의 무서운 죽음으로 죽을 수도 있고, 현실 세계에서 사용할 수 있는 프로젝트가 부족한 후에 나는 그것을 포기하고 다시 Svelte를 잊어버렸다.

    Sapper JS 회사


    이 사이트의 잠재적 JAMstack 설정에 대한 초보적인 연구로 들어가세요.
    나는 공교롭게도 SapperJS를 만났는데 그것이 "Svelte가 동력을 제공한다"는 것을 깨닫고 같은 핵심 팀에서 개발했다.
    짧은 승리 후에 나는 그들의 서류에서 이 통지를 보았다.

    이것은 위험한 선택이 될 것이다초기 개발 알림
    Sapper documentation
    오, 탁!이것은 잠재적인 두통 문제처럼 들린다. 나는 여전히 Angular2에서 4, Webpack3에서 4로 업그레이드된 것을 기억한다.
    그래서 제 선택은
  • 안정적이고 성숙한 Nuxt를 선택합니다.js, 취업 시장과 관련하여 대형 지역사회에서 이익을 얻고 내가 곤경에 빠지지 않도록 창고 넘침에 의존해야 한다
  • 초기 개발을 선택한 Sapper JS는 아직 주요 버전에 이르지 못했고 개발 과정에서 돌파적인 변화를 겪을 수 있다
  • 만약 의문이 있으면 두 번째 의견을 얻으십시오


    이것은 쉬운 선택이 아니지, 그렇지?나는 이전의 동료에게 가르침을 청하기로 결정했다. 그는 내가 영원히 믿을 수 있는 좋은 정보와 건의이다.
    그는 매우 똑똑해서 자바스크립트 생태계에서 약 20년의 경험을 가지고 있기 때문에 이런 상황에서 이것은 매우 도움이 된다.
    나는 물었다. "헤이, 피터, 나는 내 사이트에서 Sapper JS를 사용하고 싶지만, 그것은 여전히 초기 개발 단계에 있다. 이것은 어리석은 생각이다. 그렇지?"
    그는 "이 점은 어리석지 않다. 단지 코드를 재구성하거나 재구성해야 할 수도 있다는 것을 알아야 한다. 그러나 특히 개인 프로젝트에서는 새로운 도구를 시도하고 경험에서 성장하는 것이 좋다"고 대답했다.
    좀 놀란 것은 그가 바로 이 생각을 거절하지 않을 것이다. 그는 심지어 나에게 한번 시도해 보라고 격려했다. 나는 동력이 있다고 느꼈고 즉시 그 안에 뛰어들었다.
    낙후된 프레임워크부터 플러그인과 해결 방안이 부족한 생태계를 의미한다. 그러나 나는 이 점을 깨닫고 처음부터 사이트를 구축하는 일부분으로 받아들여 좋은 학습 체험으로 여긴다.

    Sapper를 사용하여 빠르게 이동


    나는 sapper-template-rollup부터 빠르게 앞의 몇 페이지를 설정했다.
    현재 저는 사이트에서 약 한 달 동안 끊임없이 일한 후에 이러한 목표를 자랑스럽게 실현했습니다.
  • 빠르고 고성능 및 완벽한 응답 사이트
  • 범주/레이블이 있는 필터링 옵션과 하위 페이지
  • 가 있는 블로그 사이트
  • GDPR이 자신의 쿠키 알림을 준수하고 구글 분석 가입 선택
  • ReplyBox가 포함된 주석 시스템
  • 사용Tailwind CSS 레이아웃 스타일 빠른 설정
  • 페이지당 300kb 미만의 자원과 약 20개의 요청
  • 보내기
  • 로드 지연 및 이미지 최적화svelte-image
  • 구축 용이성 Netlify
  • 등대 감사 100% 육박
  • Sapper는 라우팅 프리페치, 서버 측 렌더링, 자동 코드 분리, 오프라인 지원 등 고급 기능과 최적화를 갖추고 있기 때문에 사이트 성능을 걱정하지 않고 이러한 목표에 전념할 수 있습니다.

    나의 현재 경험


    만약 당신이 Sapper JS부터 계발적이라고 생각한다면, 다음은 제가 지금까지 어떤 일을 잘했는지, 어떤 나쁜 생각과 경험에 관한 것입니다.
    찬성 의견
  • 최적화된 다양한 옵션을 제공하는 우수한 시작 템플릿
  • 조기 개발 단계에 있어도 순조롭게 작동할 수 있고 트림이나 이상한 오류가 없다
  • 당신은 간결한 문법, 내장된 linting, a11y, 사용하지 않은 CSS 표기 등 정교한 기능에 자동으로 이익을 얻을 수 있습니다
  • 서버의 빠른 부팅 및 핫 모듈 다시 로드
  • 개발
  • 프레임에 지정된 <Link> 구성 요소가 없고 프리페치를 지원하는 태그
  • 개만 있음
  • Rollup의 순조로운 통합을 보장했고 후자도 날씬
  • 의 창시자인 리치 해리스가 창립한 것이다
  • Discord 채널, 모든 잠재적인 문제에 대한 우호적인 커뮤니티 제공
  • 속이다
  • Sapper 문서는 좋으나 개발 과정에서 발생하는 각종 변두리 상황은 포함되지 않았다
  • 많은 필요한 검색엔진 최적화 속성이 기본적으로 설정되지 않았습니다. 예를 들어 메타 설명
  • 생태계와 구성 요소 라이브러리가 부족하거나 존재하지 않거나 초기 개발, 예를 들어 Svelma(Bulma components for Svelte)
  • 한마디로 본고를 작성할 때 저는 심각한 결점을 만나지 못했습니다. 저는 SvelteJS를 둘러싼 모든 투기에 따라 생태계가 성숙하고 존중받는 웹 응용 프로그램 구조로 안정적으로 성장하는 것을 낙관적으로 생각합니다.
    만약 당신이 JAMstack으로 사이트를 구축하는 것에 흥미가 없다면, 당신은 나의 또 다른 Wix, WordPress, JAMStack- Oh My!에 관한 게시물을 보고 좋은 선택을 찾을 수 있습니다.
    읽어주셔서 감사합니다!

    좋은 웹페이지 즐겨찾기