Walking front end

338 views

Published on

20160726 GsNight登壇資料です。 
https://atnd.org/events/78168

Published in: Engineering
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
338
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Walking front end

  1. 1. Front-endの歩き方 20160726_G'sNight Session Hirata Tomoko
  2. 2. 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年目 SE G'sAcademy 4thDEV 平田智子 (hirata tomoko)
  3. 3. What's WEB Engineer? front-end Engineer? back-end Engineer? mark-up Engineer? full-stack Engineer?
  4. 4. フロントエンドとは、(略)、ユーザや他のシステム、ソフトウェアなどと直接デ ータなどのやり取りを行う要素のこと。 ユーザからの操作の受付や画面表示などを担当する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 】
  5. 5. HTML CSS Client-Side programming ≒ JavaScript Server-Side programming インフラ 構築 full-stack Engineer front-end Engineermark-up Engineer back-end Engineer
  6. 6. How to walk from Front-end to Back-end ?
  7. 7. Step.1 静的サイト開発 • HTML/CSS - HTML5 - CSS3
  8. 8. Step.2 動的サイト開発 • HTML5/CSS3/JavaScript • css/jsライブラリの活用 - bootstrap - jQuery • レスポンシブデザイン,UI/UX
  9. 9. Step.3 中規模のWebアプリケーション開発 • 複数ページのサイト作成 • Webプリケーションアーキテクチャ - MV* - JSON - 通信 Ajax • JSフレームワークの活用 - Knockout.js,Backbone.js,AngularJS,Vue.js - ReactJS,Riot.js
  10. 10. • HTML/CSS/JS + サーバサイド • WebAPI(REST API) • データベース - MySQL,PostgreSQL,NoSQL Step.4 フロントエンド+サーバサイド開発
  11. 11. • 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 効率化を考えた開発
  12. 12. • 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 大規模な開発
  13. 13. What Engineer do you want to be ?
  14. 14. 組み合わせいろいろ WEB Engineer × セキュリティ SEO ECサイト × リアルタイム通信 Chat SNS 広告配信 × ゲーム WEBGL/VR Unity × ハードウェア IoT ドローン × 統計分析 機械学習 Deep learning × …etc
  15. 15. WEB Engineer × Your Interest = ∞ なりたいエンジニアになろう! Icon提供:http://raindropmemory.deviantart.com/art/Legendora-Icon-Set-118999011

×