20131219 пацев

Post on 27-Jul-2015

378 views 3 download

Tags:

Transcript of 20131219 пацев

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

@basvasilich

2013, h_o

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

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

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

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

● RIA ÷ Rich Internet Application

● SPA ÷ Single-Page Application

● TSA ÷ Thin Server Architecture

04

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

HTML5

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

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

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

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

Offline � �|� �|���.

07

CSS3

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

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

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

● SASS

● LESS

● Stylus

08

JavaScript

● Scripting language

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

● jjk

● Event-driven programming

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

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

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

09

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

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

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

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

�����������

10

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

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

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

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

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

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

����� JavaScript[1].

12

3D ��|���|

3D ��|���|

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

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

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

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

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

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

14

^���� � \����

^���� � \����

● HTML5 Video

● HTML5 Audio

● Web Audio API

16

i� ������ ~�}

PhoneGap

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

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

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

CSS3.

19

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

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

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

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

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

21

MongoDB

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

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

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

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

Grails&Groovy.

23

Firefox OS

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

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

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

^����

25

Asm.js

Asm.js

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

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

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

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

^����

27

^�� ~ open-source

^�� ~ open-source

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

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

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

node.js

29

m�|��|���

m�|��|���

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

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

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

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

31

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

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

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

����|��� Mozilla

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

�|��|}����

33

i|�������

i|�������

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

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

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

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

35

]������

]������

● Adaptive web-design

● Mobile first

38

The ExtensibleWeb Manifesto

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

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

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

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

● m��~����� JavaScript

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

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

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

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

42

p�������

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

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

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

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

����

43

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

f����

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

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

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

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

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

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

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

45

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

● modeschool.com

● Codecademy.com

46

tld

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

● ]����|���

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

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

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

47

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

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