20131219 пацев

47

Upload: yandex

Post on 27-Jul-2015

378 views

Category:

Education


3 download

TRANSCRIPT

Page 1: 20131219 пацев

p��������|��|}���|^|��� k|��~, ����~������� �����|

@basvasilich

2013, h_o

Page 2: 20131219 пацев

m�~�������� ~�}

Page 3: 20131219 пацев

m�~�������� ~�}

● Client ÷ �������� ��� ��������|� �|��� ~�}-����������

● Server ÷ }����� ��� ���~���|� �|��� ~�}-����������

● RIA ÷ Rich Internet Application

● SPA ÷ Single-Page Application

● TSA ÷ Thin Server Architecture

04

Page 4: 20131219 пацев

j���~��� ����������

Page 5: 20131219 пацев
Page 6: 20131219 пацев

HTML5

HTML (HyperText Markup Language) ��~��|�� �| ����������

�����������~|��� �|���� ~ ~�}�.

^ ���������� � ����������� �|������ ��|��|�� HTML5 ~����|�� ~

��}� ��~�� API: �|��� �|� Canvas, Video/Audio API, LocalStorage,

Offline � �|� �|���.

07

Page 7: 20131219 пацев

CSS3

CSS (Cascading Style Sheets) ��~��|�� �| ���}�|����� �|���� ~ ~�}�.

n|��� ��������|������� CSS �|������� ������������� ÷

���|�����, ������� ������������� ~ CSS.

● SASS

● LESS

● Stylus

08

Page 8: 20131219 пацев

JavaScript

● Scripting language

● k���������� �|�����~|���

● jjk

● Event-driven programming

● p�������|����� �����|�����~|���

● p������ ÷ �}����� ���~��� ��|��|

● `��|������|� �����|���, ��|}|� �����|���

09

Page 9: 20131219 пацев

p����~���� � �|�������� �|�JavaScript

● jQuery ÷ ����~�� ������� ��� �������� �|�|� �| JavaScript

● Coffescript ÷ ����|��������� �|�|�

● Typescript ÷ ��|������|� �����|���, ����������� ��|���,

�����������

10

Page 10: 20131219 пацев

^������|� ��|���|

Page 11: 20131219 пацев

^������|� ��|���|

SVG (Scalable Vector Graphics) ÷ ���� �|������ �|���|}�������

~�������� ��|����.

Canvas ÷ ������� HTML5, �����|��|������ ��� ����|��� �|����~���

�~��������� ���}�|����� ��� ������ �������~|���, �}����, �|

����� JavaScript[1].

12

Page 12: 20131219 пацев

3D ��|���|

Page 13: 20131219 пацев

3D ��|���|

WebGL (Web-based Graphics Library) ÷ �����|���|� }�}������| ���

����| �����|�����~|��� JavaScript, ���~�����|� ����|~|�� �|

JavaScript �����|���~��� 3D-��|����, ��������������� ~ �������

������� ��~�������� � ��� ~�}-}�|����|�. c| ���� ��������~|���

��������~��~�� ������~ ��������� OpenGL, �|��� ���| �| WebGL

����� ~���������� ����������~���� �| ~�����|��|�.

14

Page 14: 20131219 пацев

^���� � \����

Page 15: 20131219 пацев

^���� � \����

● HTML5 Video

● HTML5 Audio

● Web Audio API

16

Page 16: 20131219 пацев

i� ������ ~�}

Page 17: 20131219 пацев
Page 18: 20131219 пацев

PhoneGap

PhoneGap ÷ }����|���� open-source �����~��� ��� ����|���

��}������ ����������, �� ����|��� Adobe. k��~����� ����|��

���������� ��� ��}������ ��������~ ��������� JavaScript, HTML5 �

CSS3.

19

Page 19: 20131219 пацев
Page 20: 20131219 пацев

i�~�� ��� � Node.js

Node.js ÷ C��~���|� ��|�����|, ����������|� ����

�����|�����~|��� JavaScript, ����~|��|� �| �~���� V8.

k����|��|���| ��� ����|��� �|���|}������� �|������������

����~�� ����������

21

Page 21: 20131219 пацев
Page 22: 20131219 пацев

MongoDB

MongoDB ÷ noSQL mo]` � �������� �������� �����, �� ���}���|�

����|��� ����� �|}���. d������ �����}�|� � �|����~���|�

��������|���, }������ ����� �������~ � ��|�~���~ ��� ����������

����� Java, JavaScript, Node.js, C++, C#, PHP, Python, Perl, Ruby,

Grails&Groovy.

23

Page 23: 20131219 пацев
Page 24: 20131219 пацев

Firefox OS

Firefox OS (����~�� ��� Boot to Gecko, B2G) ÷ �~�}���|�

����|�����|� ������|, �����|��|����|� ��� ��|������~ �

��|������� ����������~.

^����

25

Page 25: 20131219 пацев

Asm.js

Page 26: 20131219 пацев

Asm.js

Asm.js ÷ ��� ����������~� JavaScript. m������, �|���|���� �| ����

����������~�, ������|� �������~��� ����������. d����������� ~

����~��� ~ �|����~� �������������� ����| ��� ���������� � �|���

�����~ �|� C/C++

^����

27

Page 27: 20131219 пацев

^�� ~ open-source

Page 28: 20131219 пацев

^�� ~ open-source

● Github.com ÷ ����|���|� ���� ��� �����|������~, ���������|�

~����� ��~������� �|��|}����.

● NPM ÷ }������ � ���}��� ��|������ open-source �������~ �|

node.js

29

Page 29: 20131219 пацев

m�|��|���

Page 30: 20131219 пацев

m�|��|���

W3C (World Wide Web Consortium) ÷ ���|���|���, �|��|}|��~|��|�

� ~�������|� ��������������� ��|��|���

]���� 110 ��������|��� �| 10 ���. s���|�� ����������| �~������

}���� 350 ���|���|��� �� 28 ���|� ���|.

31

Page 31: 20131219 пацев

`�������|���

Page 32: 20131219 пацев

`�������|���

● Mozilla Developer Network ÷ }|�| ��|��� �� ~�} �|��|}���� ��

����|��� Mozilla

● Web Platform ÷ open-source ��|�����| ��������|��� �� ~�}

�|��|}����

33

Page 33: 20131219 пацев

i|�������

Page 34: 20131219 пацев

i|�������

● 3 ����~��� ���������� ÷ HTML, CSS, JS

● ]��|��� ~���������� ~ }�|����� � �| ��� ������|��

● m�|��|��� W3C � ��������|���

● ]������ ����� open-source �������~ � }�}������

35

Page 35: 20131219 пацев

]������

Page 36: 20131219 пацев
Page 37: 20131219 пацев

]������

● Adaptive web-design

● Mobile first

38

Page 38: 20131219 пацев

The ExtensibleWeb Manifesto

Page 39: 20131219 пацев

The Extensible Web Manifesto

● Focus on adding new low-level capabilities to the web platform that are

secure and efficient.

● Expose low-level capabilities that explain existing features, such as HTML

and CSS, allowing authors to understand and replicate them.

● Develop, describe and test new high-level features in JavaScript, and allow

web developers to iterate on them before they become standardized.

● Prioritize efforts that follow these recommendations and deprioritize and

refocus those which do not.

40

Page 40: 20131219 пацев
Page 41: 20131219 пацев

p������� ~ {������

● ]���� 200 ��������-�|��|}������~

● s����� �|�������� �| �������� � }�����

● m��~����� JavaScript

● t������ ���� ����������

● j�~���~������� �| �������, | �� �| ����� �|}���

● i|�� ���������� ���� ~ core-team ��������� ����������

�����~����~ � ~ �|}���� �����|� W3C

42

Page 42: 20131219 пацев

p�������

● h����|� � }������|�~�~|��|��� ���������

● j������� open-source ���}����~�

● l|}��| �| ����� UI/UX ���|��| � ����������

● l������|� �|}��� ~���� ������ � �������� ������~|����� �|����

����

43

Page 43: 20131219 пацев

m ���� �|�|��?

Page 44: 20131219 пацев

f����

● `���|� f������� «JavaScript. m������ �������»

● `�~�� p���|�|� «JavaScript. k����}��� ����~����~�»

● m���� m���|��~ «JavaScript. t|}����»

● `�� m��������� «CSS3 ��� ~�}-���|�����~»

● `�� m��������� «k��������}�~|���� ~�}-���|��»

● \�|� f���� «j} ����������. j���~� ���������~|���

~�|��������~��»

45

Page 45: 20131219 пацев

d����|���~��� ���|�� �����

● modeschool.com

● Codecademy.com

46

Page 46: 20131219 пацев

tld

t���| �|��|}���� ����������~ {�����|

● ]����|���

● 4 �����| ÷ 2 �����| ������, 2 �����| ��|����� ~ ���|��|� {�����|

● c|����� 3 �|�| ~ ������ ~ }����� �� ~����|� � ���� ~ ��}}���

● m�������� �|}�� ÷ ���� 2014 ���|

47

Page 47: 20131219 пацев

m�|��}�^|��� k|��~ ÷ @basvasilich

m�|��� ÷ bit.ly/front42