Post on 07-Jan-2017
Front-end の歩き方20160726_G'sNight Session Hirata Tomoko
About Me
Frontend jQuery,ES6 AngularJS,TypeScript
Backend ASP.NET(VB.NET/C#) Ruby on Rails Node.js PHP
Github https://github.com/tomoko523 blog http://tomoko-tsubasa.hateblo.jp/ Qiita http://qiita.com/tomoko523
vb.net 開発経験後 web アプリケーション開発を学ぶ。JavaScript とサーバサイド寄りでごりごりロジックを作るのが好き。最近は関数型プログラミングに手を出し始めた。一番好きな JS ライブラリは Knockout.js
中小 SIer5 年目 SEG'sAcademy 4thDEV
平田智子 (hirata tomoko)
What's WEB Engineer ?front-end Engineer?
back-end Engineer?
mark-up Engineer?
full-stack Engineer?
フロントエンドとは、 ( 略 ) 、ユーザや他のシステム、ソフトウェアなどと直接データなどのやり取りを行う要素のこと。ユーザからの操作の受付や画面表示などを担当する GUI (グラフィカルユーザインタフェース)プログラムなどがこれに当たる。フロントエンドからのデータ入力や指示などを受けて、ユーザから直接見えないところでデータの処理や保存、処理結果の出力などを行う要素は「バックエンド」( back-end )という。http://e-words.jp/w/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89.html
フロントエンド 【 front-end 】
HTML
CSS
Client-Sideprogramming≒ JavaScript
Server-Sideprogramming
インフラ構築
full-stack Engineer
front-end Engineermark-up Engineer back-end Engineer
How to walkfrom Front-end to Back-end ?
Step.1 静的サイト開発• HTML/CSS
- HTML5- CSS3
Step.2 動的サイト開発• HTML5/CSS3/JavaScript• css/js ライブラリの活用
- bootstrap- jQuery
• レスポンシブデザイン ,UI/UX
Step.3 中規模の Web アプリケーション開発• 複数ページのサイト作成 • Web プリケーションアーキテクチャ
- MV*- JSON- 通信 Ajax
• JS フレームワークの活用- Knockout.js,Backbone.js,AngularJS,Vue.js- ReactJS,Riot.js
• HTML/CSS/JS + サーバサイド• WebAPI(REST API)• データベース
- MySQL,PostgreSQL,NoSQL
Step.4 フロントエンド+サーバサイド開発
• altjs- TypeScript,coffeeScript,Babel
• CSS プリプロセッサ- Sass/LESS
• 各種ツール活用- Package Manager : nuget,npm,bower- Task runnner : grunt,gulp- scaffolding : Yeoman- Test framework : Mocha Jasmin QUnit
Step.5 効率化を考えた開発
• Web アプリケーションフレームワーク- CakePHP,Larabel(PHP) - Ruby on Rails(Ruby) - Express(Node.js) …etc
• SPA(Single Page Application)- Meteor(Node.js)- Bakcbone.js,AngularJS,React.js- WebSocket
Step.6 大規模な開発
What Engineer do you want to be ?
組み合わせいろいろWEB Engineer × セキュリティ SEO EC サイト
× リアルタイム通信 Chat SNS 広告配信
× ゲーム WEBGL/VR Unity
× ハードウェア IoT ドローン
× 統計分析 機械学習 Deep learning × … etc
WEB Engineer × Your Interest = ∞なりたいエンジニアになろう!
Icon 提供: http://raindropmemory.deviantart.com/art/Legendora-Icon-Set-118999011