General Front End Development Process

32
Hürriyet IT Takımı ile Teknolojide Atılım

Transcript of General Front End Development Process

Page 1: General Front End Development Process

Hürriyet IT Takımı ile Teknolojide Atılım

Page 2: General Front End Development Process

Hello!I am Murat Do anğDigital Dream Developer @ Hurriyet

2

Page 3: General Front End Development Process

What are our topics?

3

● Responsibility

● Tools

● Learning

● Q & A

Page 4: General Front End Development Process

ResponsibilityWhat is the process of the development

1

Page 5: General Front End Development Process

5

Designers

Page 6: General Front End Development Process

“ We’ve decided to use larger and blue buttons

according to our user research

reports

6

Page 7: General Front End Development Process

7

Backend Developers

Page 8: General Front End Development Process

“ We’re rebuilding our architecture using new micro

services technology

8

Page 9: General Front End Development Process

9

Front End Developers

Page 10: General Front End Development Process

“Lorem ipsum dolor

sit amet !

10

Page 11: General Front End Development Process

Front End WorldLet’s start with the history

11

Page 12: General Front End Development Process

2007’s Front EndConcerns

12

IE6 Problem

Tables vs Divs

W3C

Ajax

PSD2HTML

xslt

Page 13: General Front End Development Process

13

2017’s Front EndConcerns?

Page 14: General Front End Development Process

“ Front end development is not

just converting design to html

anymore.

14

Page 15: General Front End Development Process

15

Page 16: General Front End Development Process

Front End Development is :

● Real time● Incremental● Asynchronous● Reactive

16

Page 17: General Front End Development Process

17

Tools

Page 18: General Front End Development Process

Let’s split our goals

18

Page 19: General Front End Development Process

19

Page 20: General Front End Development Process

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

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

And…

22

Page 23: General Front End Development Process

JavaScriptan object-oriented computer programming language commonly used to create interactive effects within web browsers.

23

Page 24: General Front End Development Process

JavaScript Frameworks

24

● Angular

● React

● Vue

Page 25: General Front End Development Process

Angular

25

● Backed by Google

● Since 2009

● Current Version : 4

Page 26: General Front End Development Process

React

26

● Backed by Facebook

● Since 2011 / Facebook feed

● Current Version : 16

● Bonus: React Native

Page 27: General Front End Development Process

Vue

27

● Created by Evan You

● Since 2014

● Current Version : 2.5

Page 28: General Front End Development Process

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

Read!There are lots of blog posts, feeds to follow.

29

● Medium

● Twitter

● Stackoverflow

● Mailing lists

● Facebook Groups

● Quora

● Blogs

● Bonus: Panda

Page 30: General Front End Development Process

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

PracticeThere are lots of blog posts, feeds to follow.

31

● Localhost

● HackerRank

● Github

● StackOverflow

Page 32: General Front End Development Process

32

Thanks!Any questions?Github: @muratdogan17/Linkedin: @muratdogan17/Twitter : @murat_dogan17Medium: @muratdogan