简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  2017년에는 프론트엔드를 작성하고 싶다고 들었는데?

2017년에는 프론트엔드를 작성하고 싶다고 들었는데?

大家讲道理
大家讲道理원래의
2017-01-23 14:32:421538검색

먼저 대략적인 미리보기를 해보자:

  • 프로젝트 엔지니어링

  • 개발 방향

  • 전문 환경

  • 숙달해야 할 프레임워크/기술 요약

요약은 다음과 같습니다. 1위 :

  • 2017년의 프론트엔드는 잔혹하기보다는 표준화되어 지난 2년 동안 몇 달간 다양한 훈련을 거쳐 나왔습니다. 수만 명의 초보자가 자연스럽게 제공되면 시장에서 제거됩니다.

  • 프론트엔드 개발 도구/컴파일 도구는 object-c, java, 그리고 C+도 그렇습니다. 엔지니어링 모듈화의 개념은 요즘 사람들의 마음 속에 뿌리내리기 시작했습니다. 요즘 원본 HTML CSS Javascript 코드를 작성하는 사람들은 소규모 프로젝트이거나 초보자입니다.

  • 프런트엔드 작업이 더 힘들고 방향도 다양해요

WEB의 나락으로 들어가고 싶다고 올해의 프론트엔드 개발

여기서 웹 프론트엔드가 강조되는 이유는 이제 많은 iOS 및 Android 개발자가 "빅 프론트엔드"라는 용어를 사용하기 때문입니다. 주로 React isomorphism의 출현으로 인해 많은 것들이 혼합되기 시작했습니다.

먼저 우리 옛 동창들의 인상으로 프론트엔드를 복습해보자:

  • 오래된 골동품: PS 컷 이미지 내보내기

  • 초보자: Adobe Dreamweaver로 코드 작성

  • 게으른 사람: UltraEdit, notepad++ …

아마도 능숙해지면 입력하고 시작할 수 있는 것을 찾을 수도 있을 것입니다. 코드를 작성하는데, 오랜 경험을 가진 노련한 프론트엔드 베테랑을 만났는데, 에디터를 열기가 너무 귀찮아서 확인도 하지 않고 그냥 손으로 코드를 작성하다가 실수로 직접 입력을 하더군요. 잘못된 캐릭터로 인해 전체 프로젝트가 거의 종료되었습니다. 정말 강력한 사람들은 항상 매우 조심해야 합니다. IDE의 오류 확인 및 수정 기능을 잘 활용하시기 바랍니다.

과거와 다르게 올해 웹 프론트엔드(이하 프론트엔드) 개발을 시작하고 싶다면 적어도 브라우저 호환성을 너무 걱정할 필요는 없지만, 전혀 신경 쓸 필요가 없다는 뜻은 아니고, 단지 다양한 컴파일러의 등장으로 인해 개발 환경이 예전만큼 번거롭지 않다는 뜻이다.

중국 프런트엔드가 직면한 가장 심각한 문제는

브라우저 버전 반복 지연입니다.
국내 휴대폰 상위 500개사 중 한 곳에서 휴대폰을 받았는데, 그것이 웹킷 커널과 함께 제공되는 것을 보고 그 당시에는 웹킷의 2003년 릴리스 버전이라는 것이 밝혀졌습니다. 결국 Android 커널도 4.x입니다. 어떻게 그런 오래된 브라우저 커널을 상대적으로 새로운 Android 시스템에 집어넣었는지도 모르고, 물론 그게 무슨 뜻인지도 모르겠습니다. Qualcomm SOC 베이스밴드를 사용해도 다른 SoC 베이스밴드는 말할 것도 없고 시스템 업그레이드가 매우 어렵습니다.

마감 전 위챗의 안드로이드 버전은 대략 크롬 35(최신은 크롬 55)였으며 안정성을 위해 1년 동안 변함없이 유지되었다고 합니다.

UC, Baidu 및 기타 쉘 브라우저는 매우 인기가 있지만 시스템의 브라우저 커널만 호출합니다. 로딩 속도는 네트워크에 따라 결정됩니다. 상태 및 시스템 하드웨어가 쉘 브라우저와 관련이 있습니까? 그래서 그 수십 메가바이트의 용량에 무슨 내용이 적혀 있는지도 모르고, 생각만 해도 무섭습니다.

요컨대 데스크톱 시대에는 IE6, 7, 8의 암에 직면하고 있습니다. 모바일 시대에는 안드로이드의 암에 직면하고 있습니다(국내 한정)

두 가지 에디터 추천:

  • ATOM 현재 가장 인기 있는 에디터

  • Sublime text 성실한 편집자, 유료이지만 필수는 아니고 가끔 알림

  • vscode 기본 플러그인은 완벽하지만 업데이트 타사 플러그인이 느립니다

작업자가 업무를 잘 수행하려면 먼저 도구를 연마해야 합니다.

프런트 엔드 프레임워크의 급속한 발전은 다양한 플러그인의 지속적이고 빠른 반복을 의미합니다. Dreamweaver와 같은 대규모 반 폐쇄형 도구는 어떤 측면에서는 매우 강력하지만, 업데이트 속도가 커뮤니티를 따라가지 못하네요. 최신 2017버전을 설치해서 체험해봐도 아직은 이 시대에 걸맞지 않다는 느낌이 듭니다

프로젝트 엔지니어링

의미없는 오류 보고는 삼가하세요

솔직히 엔지니어링 프론트엔드 개발이라는 개념이 드디어 대중화되기 시작한 것은 좋은 일이지만, 사실 아직 초기 단계이고 친숙하지 않습니다. 초보자. xcode와 같은 프로젝트를 직접 생성하고 구성한 다음 원스톱으로 코드를 작성하는 것은 불가능합니다. macOS 플랫폼에는 매우 잘 수행된 CodeKit이 있지만 업데이트 강도는 다양한 프레임워크의 개발 속도를 따라잡을 수 없습니다. . , 참고용으로만 사용할 수 있습니다.

이제 프론트엔드를 작성할 때 최소한 로컬 운영 환경(localhost)이나 그와 비슷한 것을 구축해야 합니다. 이것은 아주 아주 기본적인 것입니다. 하지 마세요 이전에 작성한 코드를 미리 보려면 HTML을 두 번 클릭하세요. 일부 그룹에서는 초보자를 위해 수백 번 답변한 질문이 있습니다. 🎜>XXXXX는 Access-Control-Allow-Origin에서 허용되지 않습니다. 기본적으로 그 중 99%는 HTML을 직접 두 번 클릭하여 발생합니다(나머지 1%는 http 교차 도메인 등에 의해 발생함). .)

localhost를 설정해야 하기 때문에 IIS, OS 서버 등을 배포하는 것이 매우 번거로운 일이라고 생각합니다. 그리고 일부 유료 소프트웨어 등도 포함되어 비용이 많이 증가했습니다.

nodejs의 개발 덕분에 이제 Browsersync 및 webpack 개발 서버는 노드가 설치되어 있는 경우 프로젝트 디렉터리를 빠르게 배포할 수 있습니다.

프론트엔드는 더 이상 CSS, HTML, JS를 직접 작성하지 않습니다

이 자막은 조금 과장되었지만 대세입니다.
브라우저는 Iron Triangle: css, html, js와 같은 필수 파일을 실행합니다. 기존 브라우저가 변경되지 않은 경우 미래의 엔지니어는 이러한 파일을 직접 작성하고 대신 컴파일 도구를 선택할 가능성이 점점 줄어들 것입니다. 좋아하는 신흥 언어로 작성한 다음 브라우저가 인식할 수 있는 铁三角 파일로 컴파일할 수 있습니다. 물론 브라우저가 less, scss, ts 및 기타 파일을 다음에서 직접 실행할 수 있다는 점을 배제할 수는 없습니다. 미래에는 이것이 모두 가능합니다.

가장 유명한 예는 jQuery의 구문이 ES2015와 기본 지원이 내장된 새로운 시대의 브라우저에 흡수되었다는 것입니다(브라우저에 jQuery가 내장되어 있다는 보고도 있었습니다).

CSS :

이제 대부분은 less, scss, sass 등을 통해 일반 CSS 파일로 컴파일됩니다.
그 다음에는 유명한 postCSS 플러그인을 사용하여 다양한 브라우저 접두어를 완성합니다.
예:

less 파일에 다음과 같이 작성합니다. 

.foo {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .bar {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: auto;
        &:hover {
            color:red;
        }
    }
}

컴파일된 CSS는 다음과 같습니다. 

.foo {
  display: -webkit-box;    
  display: -webkit-flex;    
  display: -moz-box;    
  display: -ms-flexbox;    
  display: flex;    
  -webkit-box-pack: center;    
  -webkit-justify-content: center;    
  -moz-box-pack: center;    
  -ms-flex-pack: center;    
  justify-content: center;    
  -webkit-box-orient: vertical;    
  -webkit-box-direction: normal;    
  -webkit-flex-direction: column;    
  -moz-box-orient: vertical;    
  -moz-box-direction: normal;    
  -ms-flex-direction: column;    
  flex-direction: column;
}

.foo .bar {    
  -webkit-box-flex: 0;    
  -webkit-flex-grow: 0;    
  -moz-box-flex: 0;    
  -ms-flex-positive: 0;    
  flex-grow: 0;    
  -webkit-flex-shrink: 0;    
  -ms-flex-negative: 0;    
  flex-shrink: 0;    
  -webkit-flex-basis: auto;    
  -ms-flex-preferred-size: auto;    
  flex-basis: auto;
}

.foo .bar:hover {    
  color: red;
}

이 효율성, 이 완성, 어떻게 손으로 쓰는데 시간이 오래 걸리나요? 아마 나는 그것을 놓칠 것이다. 그러므로 상사가 주는 월급을 당신이 책임지고, 부모님이 당신의 삶을 책임지고 있거나, 당신 자신이 당신의 몸을 책임지고 있든, 컴파일 도구를 사용하여 CSS, html, js를 작성하시기 바랍니다.

위는 CSS를 사용한 예입니다.

HTML용 pug(이전의 jade), HAML
JS용 typescript, CoffeeScript
하지만 여기서는 js에 대해 이야기하고 싶습니다. 특히 ES6과 ES7의 새 버전은 실제로 매우 완벽합니다.
유명한 Babel 컴파일러를 통해 널리 사용되는 브라우저와 호환되는 버전으로 컴파일할 수 있습니다. , 하지만 개인적인 취미가 아닌 이상 팀 학습 비용을 늘릴 필요는 없다고 개인적으로 생각합니다.

대규모 프로젝트에는 MV* 엔지니어링을 피할 수 없습니다

Ajax의 등장으로 새롭게 떠오르는 requirejs의 사고 방식과 일부 특수 용어는 더 이상 필요하지 않습니다
front- nodejs가 성숙해지기 위해서는 프론트엔드와 백엔드를 분리하는 것이 필수적입니다. 프론트엔드 프로젝트가 점점 더 복잡해짐에 따라 강력하고 명확한 모듈 시스템이 매우 중요합니다. 그렇지 않으면 언제든지 속게 될 것입니다. .

이제 인기 있는 MV* 프레임워크에는

  • Angular 2

  • Vue.js 2.0

  • React

  • React-Native

참고: MV* 프레임워크는 일반적으로 MVC, MVP, MVVM, 등 구체적으로 무엇을 의미하는지 이해하는 것은 실제로 의미가 없습니다.

저는 개인적으로 vue2와 해당 제품군 버킷에 대해 낙관적입니다.

이러한 프레임워크에는 필연적으로 컴파일러, 프로젝트 디렉토리 및 nodejs가 필요합니다.

Koa2, Express에 대해서는 이야기하지 않겠습니다. 관심 있는 분들은 직접 검색해 보시고 나중에 배우시면 됩니다.

그러므로 지금 시작하여 프로젝트를 설계하는 것이 중요합니다. 너무 번거롭게 생각하지 마세요. 물론 여기서는 경로만 지적하고 깊이 있는 소개는 하지 않습니다. 앞으로 별도의 글에서 프로젝트 엔지니어링을 시작하는 방법을 소개하겠습니다.

개발 방향

프런트 엔드에는 항상 두 가지 방향이 있었습니다.

  • 상호 작용 방향

  • 데이터 방향

검은 것도, 편파적이지도 않은, 서로 반대 방향으로 걷기에는 참으로 힘든 길이다. 그것도 많이 부족해요.
요컨대, 자신이 좋아하는 길을 선택하고 그 길을 고수하면 됩니다. 올해 이 두 가지 방향의 몇 가지 추세에 대해 이야기해 보겠습니다.

인터랙티브한 연출

2016년 가장 핫한 것은 역시 VR입니다. 2013년경 Google 엔지니어들이 webGL을 추진했지만 아직까지 다양한 성능 및 렌더링 문제가 완전히 해결되지 않았습니다. . (사실 아직은 이루어지지 않은 것 같아요)
하지만 어찌됐든 webGL은 분명 대중화될 겁니다.

현재로선 계속될 가능성이 높은 것은
Three.js과 Mozilla의 A-frame,
특히 aframe이 최근 많은 행보를 보이고 있으며 모두 협력하고 있습니다. webVR을 시작하려면 threejs를 사용하세요
그래도 webGL을 먼저 배우고 webVR을 플레이하는 것을 추천합니다.

왜 webGL을 시작하지 않는지 모르시는 분들이 많습니다. 사실 많은 3차원 행렬 알고리즘 고정 소수점 렌더링이 처음에는 어지러울 수 있지만 두려워하지 말고 블렌더를 사용해 보세요. 오픈 소스 모델링 소프트웨어인 threejs에는 소프트웨어용 내보내기 플러그인도 있습니다. blen4web은 수수료를 청구하지만 여전히 참조할 수 있습니다.

다른 도서관은 버려지거나 갑자기 더 이상 이용할 수 없게 되었습니다.

물론 뛰어난 실력과 금전적 자원이 있는 친구들은 unity3D를 사용해 볼 수 있습니다

팁: 현재 Retina 데스크톱 디스플레이에서는...webGL을 실제로 사용할 수 없습니다. , 웹은 물론이고 레티나 디스플레이에서는 네이티브 3D 렌더링이 어려운데, 1x 렌더링을 위해 매개변수를 설정할 수는 있지만 조금 보기 흉할 뿐입니다.

그런데, 인터랙티브하면 데이터 중심적인 것을 배울 필요가 없다고 생각하시나요? 순진하게 굴지 마세요. 배워야 할 것을 아직 배워야 하므로 길이 쉽지 않다고 말씀드립니다.

데이터 방향

이것이 모두가 동의해야 할 정통적인 길임에는 의심의 여지가 없으며, 또한 매우 포괄적으로 발전된 방향이기도 합니다. 전임자. 다양한 MV* 프레임워크, 다양한 서버측 노드 미들웨어, 대규모 프런트엔드가 갑자기 백엔드가 원래 수행해야 했던 대부분의 작업을 삼켜버렸습니다.
여담: 실력향상으로 공부할 수 있는

이라는 것이 있습니다.

실제로 시간이 된다면 실력 향상을 위한 방법으로 Chrome PWA 프로젝트를 살펴보실 수도 있습니다.

작가의 개인적인 의견: 할 일이 너무 많으면 홈화면에 추가 기능을 잘 만들어 두는 것이 좋습니다. 가끔 중국에서 크롬이 정말 인기가 없다는 생각이 들 때가 있어요.

전문적인 환경

현재 고용 환경은 실제로 초급 프론트엔드에 매우 적합하며, 마이크로소프트의 3대 암 브라우저를 없앴습니다(타오바오는 최초로 지원하지 않음) IE8, 잘 됐습니다) 모바일 웹킷 커널이 완벽하지 않더라도 원하는 웹 효과를 많이 작성할 수 있습니다. 어쨌든 이전 버전의 커널의 클라이언트 개체는 전혀 이익을 가져올 수 없습니다. 그러니 바로 포기하는 게 낫습니다. 왜냐하면 최신 기술만이 혜택과 성취감을 가져올 수 있기 때문입니다.

다양한 프론트엔드 도구들이 점차 프론트엔드 개발에 편리함을 가져다 주고 있습니다. 초기 배포가 참으로 번거롭기는 하지만, 이정도 인내심도 없으면 정말 어떨지 모르겠네요. 당신의 미래는.

그렇다면 우리가 직면해야 할 것도 불가항력적인 요인입니다. 때로는 일부 학습 자료가 실수로 차단되는 경우가 있습니다. 이를 포기하지 말고 돌파할 수 있는 방법을 찾아보시기 바랍니다.npm을 사용하여 노드 모듈을 설치한다고 가정해 보겠습니다. 그렇다면 우리가 직면한 첫 번째 문제는 불가항력적인 봉쇄와 운영자의 QoS 제한입니다.

여기서 npm을 사용할 수 있을 것 같습니다. npm을 포크해 주신 타오바오에 진심으로 감사드립니다. 이름은 cnpm입니다. 웹사이트 주소는 npm.taobao.org입니다. 사용 방법은 직접 확인하겠습니다.

그러나 명령줄에서의 일부 작업과 같이 이것이 우리의 요구 사항을 충족하지 못하는 경우도 있습니다.

假设你有 SS 这种梯子。
那么你可以在命令行下做一些临时的 proxy 设置：
MacOS 终端（假设你梯子的端口是1087）：

export http_proxy="http://127.0.0.1:1087"
export https_proxy="http://127.0.0.1:1087"

Windows 命令行（同样假设你的端口如下）：

set http_proxy=http://127.0.0.1:1080
set https_proxy=http://127.0.0.1:1080

然后就可以愉快地 $ npm xxxxx… 或者 ATOM 的升级 package 也能这么干。

题外话：ATOM升级package不顺利的话，用这个方法然后命令行

apm install [packagename]

总结:掌握的框架 / 技能

  • 要会部署nodejs环境

    • webpack

    • babel

    • gulp

    • postCSS的插件

  • CSS:Less, scss

  • HTML:pug, haml (可选)

  • Javascript: ES6, ES7

  • WebComponents (可选)

  • Vue.js / React (反正掌握一款MV* 框架是必要的)

对了还有即将大热的 hotfix， 代表作有：阿里热修复技术，据说饿了么，腾讯也出了。没去关注，但我个人觉得这个 apple 不会坐视不理的，毕竟你可以随时服务端修改APP绕过审核，这种外道招数我觉得可以学学但不要认真。

其它：

Angular 2 被小编你吃了？
Angular 3 开发组告诉我，你又得像 ng1 转 ng 2 一样， 从头学一次。 so…你们玩得开心就好，真的，我的项目连平滑升级都做不到，我真心没办法陪你们玩。

jQuery는 죽어가고 있나요? 그는 죽을거야! ?
형님, 잠깐만요. 죽지는 않을 것입니다. jQuery에서 네이티브로 전환하고 싶다면 제 삼촌이 배울 수 있는 웹사이트를 추천합니다.

합의된 상호 작용은 어디에 있나요? 위에서 언급한 내용은 모두 데이터 중심입니다.
AE + bodymovin ( https://github.com/bodymovin/bodymovin ) 가서 배우세요,

svg는 필수입니다,

sketch는 마법의 도구,

webGL 사람마다 의견은 다르지만, 2016년 2분기와 3분기부터 거대 기술 대기업들이 기술을 축적해왔죠. 그런데 사실 강요는 안 해요.

그럼 데이터도 배웠어요.

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：프론트엔드 인터뷰 FAQ다음 기사：프론트엔드 인터뷰 FAQ

관련 기사

더보기