20131219 пацев
TRANSCRIPT
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