yandex.frontend: complex services, complex solutions

Download Yandex.Frontend: complex services, complex solutions

If you can't read please download the document

Upload: yelena-jetpyspayeva

Post on 18-Jan-2017

39 views

Category:

Technology


3 download

TRANSCRIPT

  • : , , ,

  • [email protected]

    @veged

    github.com/veged

    3

    mailto:mailto:[email protected]?subject=mailto:mailto:[email protected]?subject=http://twitter.com/vegedhttp://twitter.com/vegedhttps://github.com/vegedhttps://github.com/veged

  • yandex.ru/all 40

    api.yandex.ru 25 API

    180

    250

    3

    6

    001011000100100001111000110

    6

  • 8

  • TT2 -> JS

  • TT2:

    Perl

    12

  • TT2:

    Perl

    13

  • JavaScript:

    JavaScript

    15

  • :

    17

  • SERP-4695: C TT2 JS

    18

  • :

    19

  • :

    Perl + JavaScript::V8

    github.com/ezhi/javascript-v8

    search.cpan.org/dist/JavaScript-V8

    JavaScript + BEMHTML

    bit.ly/yac2011-bemhtml

    20

    https://github.com/ezhi/javascript-v8https://github.com/ezhi/javascript-v8http://search.cpan.org/dist/JavaScript-V8http://search.cpan.org/dist/JavaScript-V8http://bit.ly/yac2011-bemhtmlhttp://bit.ly/yac2011-bemhtml

  • :

    20%

    50%

    TT2 30%

    21

  • :

    JavaScript

    22

  • 24

  • 31

  • .: bit.ly/yasubbotnik-kiev-2013-serpbit.ly/yasubbotnik-spb-2013-serp

    32

    http://bit.ly/yasubbotnik-kiev-2013-serphttp://bit.ly/yasubbotnik-kiev-2013-serphttp://bit.ly/yasubbotnik-spb-2013-serphttp://bit.ly/yasubbotnik-spb-2013-serp

  • 20

    4 + 2

    33

  • 80

    -

    35

  • islands.yandex.ru

    37

    http://islands.yandex.ruhttp://islands.yandex.ru

  • 38

  • .

    39

  • 40

    [email protected]

    @vegedveged

    mailto:mailto:[email protected]?subject=mailto:mailto:[email protected]?subject=http://twitter.com/vegedhttp://twitter.com/vegedhttps://github.com/vegedhttps://github.com/veged

  • [email protected]

    @dosyara

    github.com/dosyara

    42

    mailto:mailto:[email protected]?subject=mailto:mailto:[email protected]?subject=https://github.com/dosyarahttps://github.com/dosyara

  • .

    43

    .

    12- , , .

  • 46

  • ()

    47

  • BEMTREE.XJST + BEMHTML

    i-bem + bem-mvc

    48

  • ! !

  • 51

  • ( )

    52

  • ,

    53

  • 54

  • -

  • 56

  • 0000 0010 1001 1010

    57

  • 11.00100100001111110110101010001000100001011010001100001000110100110001001100011001100010100010111000000011011100000111001101000100101001000000100100111000001000100010100110011111001100011101000000001000001011101111101010011000111011000100111001101100100010010100010100101000001000011110011000111000110100000001001101110111101111100101010001100110110011110011010011101001000011000110110011000000101011000010100110110111110010010111110001010000110111010011111110000100110101011011010110110101010001110000100100010111100100100001011011010101110110011000100101111001111110110001101111010001001100010000101110100110100110001101111110110101101011000010111111111101011100101101101111010000000110101101111110110111101110001110000110101111111011010110101000100110011111101001011010111010011111001001000001000101111100010010110001111111100110010010010010100001100110010100011110110011100100010110110011110111000010000000000111110010111000101000010110001110111111000001011001100011011010010010000011011000011100010101011101001110011010011010010001011000111111101010001111110100100100110011110101111110000011011001010101110100100011110111001010001110101101100101100001110001100010111100110101011000100000100001010101001010111011100111101101010100101001000001110111000010010110100101100110110101100111000011000011010101001110010010101011110010011000000001001111000101110100011011000000100011001010000110000010000101111100001100101001000001011110010001100010111000110110110011100011101111100011100111100111011100101100000110000000111010000110000000111001101100100111100000111010001011101100000001111010001010001111101101011100010101011101111100000110111101001100010100101100100111011110001010111100101111110110100101010101100000010111000110000011100110010101010010010111110011101010100101010110101011100101000101011101001000100110000110001001100011111010000001010001000000010101011100101000111001011010100010101010101011000100001011011010110100110011000101110000110100000100010100000111101000110011101010000101010100100001101010111101111100011100101110100110010011101100111110111000010100000100010110001101101111101111000010101000101011101010011100010101011101011101000001100000110001111101101100111001011100001111100001011010011011100001111001001100011110101011111101011010111010001100110110110000100100110011110101110001111010001100100101001110000001001010001001010110000110011101110011101110001111010010001001100001101011010010111011100110101111110001001011111111101000000110110110011000101000001000011001001101100001110110000000100111001100111110110010000110101001100100010100100001111100101011000110000001011101111011001000000000110010111011111000010001011101010111011110100110000101011101011011000111011100001001100010001100000010111010110110010100011011100010000010001110001001001111101000000111010011100101101010110011000101000011110110110101101111111100111000001111110100010000100011100100101110000010110100010010000010101001001000010000100000000001000110100111001000111100000100101010011110000111111001101101011110001000011100011001101000010000101111011011101001011011001

    58

  • 62

    view%ctx%

    data%ctx%

    view%BEMTREE.XJST% BEMHTML%

  • BEMTREE.XJST -github.com/bem/bem-core/blob/v1/.bem/techs/bemtree.js

    BEMup

    63

    https://github.com/bem/bem-core/blob/v1/.bem/techs/bemtree.jshttps://github.com/bem/bem-core/blob/v1/.bem/techs/bemtree.js

  • 64

  • 65

  • 66

    getData&setData&

    onChange&

    getField&

    setField&

    fix&

    rollback&clear&

    validate&

  • bem-mvc MVC DOM- -http://github.com/bem/bem-mvc

    BEMup

    67

    http://github.com/bem/bem-mvchttp://github.com/bem/bem-mvc

  • 68

    code review

    (jshint, jscs)

    json- json-schema.org

    http://json-schema.orghttp://json-schema.org

  • 69

    [email protected]

    @dosyaradosyara

    mailto:mailto:[email protected]?subject=mailto:mailto:[email protected]?subject=http://twitter.com/dosyarahttp://twitter.com/dosyarahttps://github.com/dosyarahttps://github.com/dosyarahttps://github.com/dosyarahttps://github.com/dosyara

  • [email protected]

    @mdevils

    github.com/mdevils

    2008

    .

    71

    mailto:mailto:[email protected]?subject=mailto:mailto:[email protected]?subject=https://github.com/mdevilshttps://github.com/mdevils

  • , : ?

    3 . .

    72

  • maps.yandex.ru

    API

    API

    73

  • API .

    , .

    74

  • 75

    API

  • 7625

    API

    2.8

    2.6

  • 77

  • 78

  • API

    79

  • 80

    BEViS

  • BlockElementViewState

    81

    Beavis and Butt-headMike Judge

    http://en.wikipedia.org/wiki/Mike_Judgehttp://en.wikipedia.org/wiki/Mike_Judge

  • API

    82

  • BTJSON BEMJSON

    83

  • BTJSON{

    block: "button",

    view: "red",

    autoInit: true,

    text: "Press me",

    icon: {block: "icon", view: "close"}

    }

    84

  • BTJSON BEMJSON

    BT

    85

  • BT

    BTJSON.

    , .

    .

    github.com/enb-make/bt

    86

    https://github.com/enb-make/bthttps://github.com/enb-make/bt

  • HTML:

    BEViS:

    87

  • BTJSON BEMJSON

    BT

    YBlock

    88

  • YBlock

    // i-bem

    BEM.DOM.decl("button", { ... });

    var button = BEM.DOM.init( $(BEMHTML.apply({block: "button"}))).bem("button");

    // YBlock

    var Button = inherit(YBlock, { ... });

    var button = new Button();

    89

  • YBlock

    JS

    API

    BT

    ,

    90

  • BTJSON BEMJSON

    BT

    YBlock

    ENB . BEMup.

    91

  • BEViS API.

    OpenSource?

    93

    FuturamaMatt Groening

    http://en.wikipedia.org/wiki/Matt_Groeninghttp://en.wikipedia.org/wiki/Matt_Groening

  • 94

    [email protected]

    @mdevilsmdevils

    mailto:[email protected]?subject=mailto:[email protected]?subject=http://twitter.com/mdevilshttp://twitter.com/mdevilshttps://github.com/mdevilshttps://github.com/mdevils

  • !

    ?

  • [email protected]

    @mursya_ru

    ., , YaC...

    Developer Relations & BEM

    96

    mailto:mailto:[email protected]?subject=mailto:mailto:[email protected]?subject=

  • ___ =

    97

  • 98

    [email protected]

    @bem_ru @bem_en #b_clubs.ya.ru/bem

    ___

    groups/bem.info

    bem

    mailto:mailto:[email protected]?subject=mailto:mailto:[email protected]?subject=http://twitter.com/bem_ruhttp://twitter.com/bem_ruhttp://twitter.com/bem_enhttp://twitter.com/bem_enhttps://twitter.com/search?q=%2523b_&src=hashhttps://twitter.com/search?q=%2523b_&src=hashhttp://clubs.ya.ru/bemhttp://clubs.ya.ru/bemhttps://www.facebook.com/groups/bem.infohttps://www.facebook.com/groups/bem.infohttps://github.com/bemhttps://github.com/bem

  • , ,

    99

  • ?

    100

  • ?

    bem.info - bem-core - bem-tools bem-history bem-mvc ++ bem-bl . i-bem.js YaC twitter Web Standards

    Days . borschik in English facebook -

    WebConf bemhtml - ~30

    100

  • http://images2.wikia.nocookie.net/__cb20100219193952/marvel_dc/images/3/3f/Legion_of_Super-Heroes_001.jpg

    http://images2.wikia.nocookie.net/__cb20100219193952/marvel_dc/images/3/3f/Legion_of_Super-Heroes_001.jpghttp://images2.wikia.nocookie.net/__cb20100219193952/marvel_dc/images/3/3f/Legion_of_Super-Heroes_001.jpg

  • http://fc04.deviantart.net/fs71/i/2011/131/a/0/love_at_first_sight_by_metadragonart-d3g4i2h.jpg

    http://fc04.deviantart.net/fs71/i/2011/131/a/0/love_at_first_sight_by_metadragonart-d3g4i2h.jpghttp://fc04.deviantart.net/fs71/i/2011/131/a/0/love_at_first_sight_by_metadragonart-d3g4i2h.jpg

  • 103

    . 2009 ( ), , : - , ,

    -

  • 104

  • ?

    105

  • ?

    105

  • ?

    105

  • ?

    105

    ,

  • ?

    105

    ,

    ,

  • ?

    105

    ,

    ,

    ,

  • !

    106

  • !

    Online vs. Offline

    106

  • !

    Online vs. Offline

    vs.

    106

  • !

    Online vs. Offline

    vs.

    vs.

    106

  • !

    Online vs. Offline

    vs.

    vs.

    vs. -

    106

  • 107

  • ?

  • 1. !

    109

  • 2.

    110

  • 3. , :)

    111

  • 4. ,

    112

  • 5. -!

    113

  • 6. ! ! !

    114

  • 7.

    115

  • 8, 9, 10... 100500

    116

  • by Jaison Justus, India

  • . , , !

    , Adobe YaC 2012

    118

  • Stay BEMed & BEMup!

    119

    15:00 topcoat -

    15:30 on Rails

    16:00 ENB

    16:20 bem-tools 1.0.0

    16:40 bem-core

    17:20 BEMTREE.XJST

    17:40 - - (Node.js)

    18:00 bem- node

    18:20 bem-mvc,

    18:40

    19:00

    19:20

  • 120

    [email protected]

    @mursya_rumursya

    BEM Developer Relations

    mailto:mailto:[email protected]?subject=mailto:mailto:[email protected]?subject=http://twitter.com/mursya_ruhttp://twitter.com/mursya_ruhttps://github.com/mursyahttps://github.com/mursya

  • 12122