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

What's hot

Similar to Walking front end

Walking front end

• 1.
  Front-endの歩き方20160726_G'sNight Session HirataTomoko
• 2.
  About MeFrontend jQuery,ES6AngularJS,TypeScriptBackend ASP.NET(VB.NET/C#) Ruby on Rails Node.js PHPGithub https://github.com/tomoko523blog http://tomoko-tsubasa.hateblo.jp/Qiita http://qiita.com/tomoko523vb.net開発経験後webアプリケーション開発を学ぶ。JavaScriptとサーバサイド寄りでごりごりロジックを作るのが好き。最近は関数型プログラミングに手を出し始めた。一番好きなJSライブラリはKnockout.js中小SIer5年目 SEG'sAcademy 4thDEV平田智子(hirata tomoko)
• 3.
  What's WEB Engineer？front-endEngineer?back-end Engineer?mark-up Engineer?full-stack Engineer?
• 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.
  HTMLCSSClient-Sideprogramming≒ JavaScriptServer-Sideprogrammingインフラ構築full-stack Engineerfront-endEngineermark-up Engineer back-end Engineer
• 6.
  How to walkfromFront-end to Back-end ?
• 7.
  Step.1 静的サイト開発• HTML/CSS-HTML5- CSS3
• 8.
  Step.2 動的サイト開発• HTML5/CSS3/JavaScript•css/jsライブラリの活用- bootstrap- jQuery• レスポンシブデザイン,UI/UX
• 9.
  Step.3 中規模のWebアプリケーション開発• 複数ページのサイト作成•Webプリケーションアーキテクチャ- MV*- JSON- 通信 Ajax• JSフレームワークの活用- Knockout.js,Backbone.js,AngularJS,Vue.js- ReactJS,Riot.js
• 10.
  • HTML/CSS/JS +サーバサイド• WebAPI(REST API)• データベース- MySQL,PostgreSQL,NoSQLStep.4 フロントエンド＋サーバサイド開発
• 11.
  • altjs- TypeScript,coffeeScript,Babel•CSSプリプロセッサ- Sass/LESS• 各種ツール活用- Package Manager : nuget,npm,bower- Task runnner : grunt,gulp- scaffolding : Yeoman- Test framework : Mocha Jasmin QUnitStep.5 効率化を考えた開発
• 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- WebSocketStep.6 大規模な開発
• 13.
  What Engineerdo youwant to be ?
• 14.
  組み合わせいろいろWEB Engineer× セキュリティSEO ECサイト× リアルタイム通信 Chat SNS 広告配信× ゲーム WEBGL/VR Unity× ハードウェア IoT ドローン× 統計分析 機械学習 Deep learning× …etc
• 15.
  WEB Engineer ×Your Interest = ∞なりたいエンジニアになろう！Icon提供：http://raindropmemory.deviantart.com/art/Legendora-Icon-Set-118999011