general front end development process
TRANSCRIPT
![Page 1: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/1.jpg)
Hürriyet IT Takımı ile Teknolojide Atılım
![Page 2: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/2.jpg)
Hello!I am Murat Do anğDigital Dream Developer @ Hurriyet
2
![Page 3: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/3.jpg)
What are our topics?
3
● Responsibility
● Tools
● Learning
● Q & A
![Page 4: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/4.jpg)
ResponsibilityWhat is the process of the development
1
![Page 5: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/5.jpg)
5
Designers
![Page 6: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/6.jpg)
“ We’ve decided to use larger and blue buttons
according to our user research
reports
6
![Page 7: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/7.jpg)
7
Backend Developers
![Page 8: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/8.jpg)
“ We’re rebuilding our architecture using new micro
services technology
8
![Page 9: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/9.jpg)
9
Front End Developers
![Page 10: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/10.jpg)
“Lorem ipsum dolor
sit amet !
10
![Page 11: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/11.jpg)
Front End WorldLet’s start with the history
11
![Page 12: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/12.jpg)
2007’s Front EndConcerns
12
IE6 Problem
Tables vs Divs
W3C
Ajax
PSD2HTML
xslt
![Page 13: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/13.jpg)
13
2017’s Front EndConcerns?
![Page 14: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/14.jpg)
“ Front end development is not
just converting design to html
anymore.
14
![Page 15: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/15.jpg)
15
![Page 16: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/16.jpg)
Front End Development is :
● Real time● Incremental● Asynchronous● Reactive
16
![Page 17: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/17.jpg)
17
Tools
![Page 18: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/18.jpg)
Let’s split our goals
18
![Page 19: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/19.jpg)
19
![Page 20: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/20.jpg)
HTML 5Hypertext Markup Language revision 5 (HTML5) is markup language for the structure and presentation of World Wide Web contents. HTML5 supports the traditional HTML and XHTML-style syntax and other new features in its markup, New APIs, XHTML and error handling.
20
![Page 21: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/21.jpg)
CSS 3A cascading style sheet (CSS) is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict.
21
![Page 22: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/22.jpg)
And…
22
![Page 23: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/23.jpg)
JavaScriptan object-oriented computer programming language commonly used to create interactive effects within web browsers.
23
![Page 24: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/24.jpg)
JavaScript Frameworks
24
● Angular
● React
● Vue
![Page 25: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/25.jpg)
Angular
25
● Backed by Google
● Since 2009
● Current Version : 4
![Page 26: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/26.jpg)
React
26
● Backed by Facebook
● Since 2011 / Facebook feed
● Current Version : 16
● Bonus: React Native
![Page 27: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/27.jpg)
Vue
27
● Created by Evan You
● Since 2014
● Current Version : 2.5
![Page 28: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/28.jpg)
How to catch up new trends?The most important thing is staying updated. You should split up your learning methodologies. Here are the list:
28
● Read
● Watch
● Practice
![Page 29: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/29.jpg)
Read!There are lots of blog posts, feeds to follow.
29
● Medium
● Stackoverflow
● Mailing lists
● Facebook Groups
● Quora
● Blogs
● Bonus: Panda
![Page 30: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/30.jpg)
WatchThere are lots of blog posts, feeds to follow.
30
● Youtube
● PluralSight
● Egghead.io
● Udemy
● Lynda
● Coursera
● Udacity
● Khan Academy
![Page 31: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/31.jpg)
PracticeThere are lots of blog posts, feeds to follow.
31
● Localhost
● HackerRank
● Github
● StackOverflow
![Page 32: General Front End Development Process](https://reader033.vdocuments.net/reader033/viewer/2022052606/5a65c1177f8b9ab3488b4f1f/html5/thumbnails/32.jpg)
32
Thanks!Any questions?Github: @muratdogan17/Linkedin: @muratdogan17/Twitter : @murat_dogan17Medium: @muratdogan