Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Walking front end

500 views

Published on

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

Published in: Engineering
  • Be the first to comment

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

×