웹 프론트엔드 HTML 튜토리얼 前端的认识和看法 - sunshinegirl_7

前端的认识和看法 - sunshinegirl_7

May 22, 2016 pm 05:19 PM

1. 什么是前端 ?

就像一场足球比赛,有人做前锋,有的是中场战将,有的是后卫,有的是候补等等,每个人在不同的位置上都做着不同的事,最终完成一场完美的比赛,前端在这里有点类似前锋,它需要将球最后临门一脚射到球门里。

前端它是一个工作,它的工作领域是浏览器,它即要跟美工、设计打交道又要懂点后台代码,知道ajax怎么从后台拿数据,接口怎么调用,最主要的是把美工的图合成完成的网页呈现在用户面前,需要实现网页的交互效果。

前端处于设计与后台的中间领域,起到承上启下的作用,这也要求前端工程师的知识面在横向上必须要广。服务器技术要懂,产品与交互也要懂。

它需要掌握三个基本的技能:HTML,CSS, javascript。另外还需要懂点PHP或者其他应用在Web上的编程语言。

前端工作师主要面向用户、浏览器、数据接口。

2. 前端工程师的价值主要体现在哪里?

(1)让用户更便捷的获取信息。拿到psd,产出线上的代码,中间有很多细节需要去认真对待。表单的各种交互,页面的不同元素(区域)间的信息交互,都需要依靠自己的技术能力和自己对用户的感知去完成。

(2)让前端更加规范和标准。不断看各种规范,比较不同版本的区别,并思考引入的新特性的意义(技术或商业)。关注这个行业的最新发展,找出创新点,把自己对问题或bug的解决思路或方案总结并分享,为自己的公司、同行以及整个行业贡献自己的力量,推动前端的发展。

深入学习前端,需要做很多,前端各类库与框架的架构设计,w3c各种标准的深入研究,对于javascript语言本身的研究,对浏览器的原理分析,对于网络传输协议的原理分析等等。

3. 需要掌握的技能?

(1)解决浏览器兼容问题。前端需要懂得至少三种浏览器内核的接口,还要面对各种莫名其妙的bug,前端的技术也是日新月异,css3的规范标准什么时候确定还是未知。

(2)横向技能面要广。懂交互设计,懂视觉设计,略懂后台技术,精通http协议,linux操作,shell, vim, git, svn;至少熟练一门后端语言(java, c++, php, python),至少使用过一个MVC开发框架,还有前端的各种开源项目(jquery, requirejs, seajs, bootstrap, yui…);要灵活运用“面向对象”,“面向过程”,“函数式”的编程方法;还要懂设计模式,富客户端应用的常用架构模式。

(3)纵向技能要深。js, css, html5, css3…

(4)关注用户体验,懂得交互设计。帮忙产品经理和交互设计师校验错误是前端工程师的义务和责任。作为页面的实现者,如果不能提前预测出可能存在的问题,后期的错误会越来越多。

4. 应该具备怎样的知识结构?

368e85f1a418d0ade07041dc13a2edb6_r

d96bcca74b4d4a010c3b17366685cc18_r

图片地址:http://www.zhihu.com/question/19588629

 

5. 前端在研发团队的位置?

比较理想的情况是,前端的输入依然是psd稿,如果产品和设计能力不够,还可能需要前端参与交互设计。输出则是一个可以工作的模块或页面。前端直接从服务器模板(php, jsp)开始工作,前后端同学在开始工作前写好页面应该用的变量以及ajax通信的接口,随后独立开发,最后连调测试。这种开始方式,前端可以根据接口和数据结构来设计页面的html结构和css结构,把冗余工作降到最低。这样会让前端发挥更大的主观能动性,也可以让后台更加关注底层算法与数据存储于通信的逻辑。

6. 前端工程师的未来?

前端工程师一般讲有三条路可走,一条向前走,一条向后走,一条一直做前端,深入下去。向前就是往用户体验与交互设计甚至产品设计师上走,这最能体验前端价值,即用户体验。向后走是做web开发,往数据库和后台开始方向走,不再区分前后端,大家深入产品的研发实现,这条路就是与软件工程师融合的路,这时的价值就体现在业务功能的实现上。最后就是一直深入做前端开发,对各种前端类库框架的架构设计,对浏览器原理的研究和js的研究,对网络传输协议原理分析等等,这条路因为要涉及很多原理与根本性的东西,走的人也不是很多。

前端的未来则是:有越来越多的软件开始在浏览器里运行,随着google和火狐的webos的发展,甚至在不久的将来,浏览器的api,会替代操作系统的sdk成为软件开发的标准。随着html5的发展,浏览器里运行的早已不是简单的页面,而是复杂的web应用。前端工程师也早已不是页面制作,而是web应用工程师。而未来究竟是web时代还是app时代仍是一个难以回答的问题。

 

参考:http://blog.tianya.cn/post-5620717-83777702-1.shtml

http://kingzs70.sinaapp.com/2013/05/11/my_view_on_the_career_development_of_web_front_end

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

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

See all articles