Front End Programmer
前端工程師除了要可以
有同理心 - 站在 user 的角度
拆解問題
與設計溝通
工作上要處理像:
Fast Loading speed
Responsive Design
拿Design mockups 套 Java. HTML
前端技術細項
1.HTML5 & CSS
- 無庸置疑前端需要先學這個,web application 開發的基本。你不需要知道每個 element,畢竟光基本知識就超多,包含了 3D graphics, multimedia, offline storage 和 connectivity 這些部分。
- 現在編輯的時候因為有 IDE (integrated development environment) 的幫忙,可以用一些 template,但你還是要知道原理,甚至從一個空白得 text 文件檔編寫程式。
- 關於怎麼使用 CSS 去 styling 你的 HTML,甚至是創造出像 Twitter Bootstrap 這樣方便的 framework,去做一個用戶介面的 guideline (user interface style guide),提供像按鈕、表格的設計樣式。
提供一些不錯的學習資源:
2. Browser Tools
- 在了解 HTML 和 CSS 之後接下來就是 browser tools。現在的 browser 都有豐富的工具幫助你監控網頁、網站、application。
以 Google Chrome 為例,用 command+option+j 開啟 debugger
Debugger
你可以監控你的 JavaScript,看每個時間點的執行狀況。
在 Elements 裡你可以看出畫面跟你預期的一不一樣,需不需要調整 elements, CSS styling, JavaScript。
點選 Network 可以知道哪些 Resource 被 loaded,會把 HTML content, frames, images, JavaScript, CSS files, cookies, fonts 等內容顯示出來,像是標示每一個程式 render 的時間、檔案大小。
更多資料請看這:
3. JavaScript
如果要讓網站動起來就需要 JavaScript,可以先從一些較簡單的功能開始,像是確認用的對話框,根據 user input 顯示或隱藏內容。
可以先從 Mozilla 的 Learning the Web series 的 JavaScript basics tutorial 課程開始學起。
接著就可以學 jQuery 和 Node.js documentation,朝向專業的 JavaScript developer 之路前進。由於 JavaScript 不斷在演進,你必須了解最新趨勢,可以訂閱 JavaScript Weekly 了解新知。
4. Testing
除了這些基本技術外,在進入進階的 feature 之前,必須先提到測試!!
什麼是軟體測試呢?主要可以分成五個類型:
- Unit Testing
- 主要 focus 在功能,verify the functionality of a specific section of code。
- These types of tests are usually written by developers as they work on code, to ensure that the specific function is working as expected.
- Unit testing alone cannot verify the functionality of a piece of software, but rather is used to ensure that the building blocks of the software work independently from each other.
- Unit testing aims to eliminate construction errors before code is promoted to QA
- Depending on the organization's expectations for software development, unit testing might include static code analysis, data-flow analysis, metrics analysis, peer code reviews, code coverage analysis and other software verification practices.
- Functional Testing
- Integration Testing
- System Testing
- Acceptance Testing
5. Version Control
除了上面那些必要技能外,我們需要了解版本控制(verson or source control),如果你聽過這個詞,那你可能知道一些常用的工具像 CVS, SVN, Git 和 Mercurial
What are important concepts Front-End programmers need to know:
Focus on parts of the web that users see and interact with.
Front-End developers access and present data from multiple sources on the internet through Application Program Interfaces (APIs).
多平台:A Front-End developer is someone who builds the interface on applications which run on a variety of devices. These interfaces should responsively transition from mobile to tablet to desktop.
Every web page and web app is created with HTML, CSS, and JavaScript. All of the images, buttons, transitions, animations, drop-down menus, contact forms, and styling elements are all controllable using these technologies.
要學的技術 (What are some Front-End Frameworks Front-End developers use? )
Applications are built on top of frameworks like Angular.js, Ember.js, Backbone.js, Knockout.js, React.js and Polymer.js. There are similarities and differences, however if you can pick up one, you can pick up all of them.
Front-End developers use frameworks like Angular.js and Ember.js to organize data using industry-standard design patterns which help synchronize user actions and data with a web server.
Javascript libraries like JQuery and to use CSS framworks like Bootstrap.
Java 和 Python 的比較
While Javascript and Python are different, they share similarities as well: functions, variables, data types, loops, and conditional statements find their way in both languages.
缺少影片說明
Java 要{} 和 分號, print 換成 console.log,兩邊的等號; city.visit