Download as PDF, PPTX
![Erlang
• Функциональный
• Динамически типизирован
• Лямбды
• Pattern matching
lists:map(fun(X) -> X*2 end, [4,8,15,16,23,42]).
double([H|T]) -> [2*H|double(T)];
double([]) -> [].](https://image.slidesharecdn.com/n2odc-160218175224/85/Erlang-n2o-Web-JavaScript-2-320.jpg)
![n2o Elements
#panel{id=Panel, body=#button{id=myButton, body=
<<"OK">>, postback={ok, <<"INFO">>}}}
<div id="myPanel"><button id="myButton"
type="button">OK</button></div>
document.getElementById('myButton').addEventListener(
'click',function (event){
ws.send(enc(tuple(atom('pickle'),bin('myButton'),bin('
g2gCaAVkAAJldmQABWluZGV4aAJkAAJva20AAAAESU5GT2sACG15Qn
V0dG9uZAAFZXZlbnRoA2IAAAWFYgAKp5tiAACpXA=='),
[tuple(tuple(utf8_toByteArray('myButton'),
bin('detail')), event.detail)])));
}
)](https://image.slidesharecdn.com/n2odc-160218175224/85/Erlang-n2o-Web-JavaScript-9-320.jpg)
![index.erl
main() ->
#dtl{file="index", bindings=[{body, body()}]}.
body() ->
[#panel{id=butPanel, body=[
#button{id=catsButton, class= <<"btn">>,
body= <<"show #cats”>>,
postback={tag,<<"cats">>}}
]},
#panel{id=updater}].](https://image.slidesharecdn.com/n2odc-160218175224/85/Erlang-n2o-Web-JavaScript-11-320.jpg)
![index.erl
loop(Elem, Tag) ->
receive
{gproc_ps_event, {tag, Tag}, Text} ->
insert_image(Elem, Text),
wf:flush(Tag);
timer:sleep(500),
loop(Elem, Tag)
end.
insert_image(Elem, Img) ->
wf:insert_top(Elem,
#panel{body=#panel{body=[
#link{href=maps:get(<<"link">>, Img),
body=#image{src=maps:get(<<"url">>,
maps:get(<<"low_resolution">>,
maps:get(<<"images">>, Img))),
}}]}}).](https://image.slidesharecdn.com/n2odc-160218175224/85/Erlang-n2o-Web-JavaScript-13-320.jpg)
![[Expert Fridays] Dmitry Isaev - Функциональные велосипеды в Java](https://cdn.slidesharecdn.com/ss_thumbnails/java-170926090638-thumbnail.jpg?width=640&height=640&fit=bounds)
Erlang и n2o. Web-разработка без JavaScript
- 1. Erlang и n2o web-разработкабез JavaScript DevelCamp 2014 Татауров Евгений, Noda
- 2. Erlang • Функциональный • Динамическитипизирован • Лямбды • Pattern matching lists:map(fun(X) -> X*2 end, [4,8,15,16,23,42]). double([H|T]) -> [2*H|double(T)]; double([]) -> [].
- 3. Erlang • Процессы-акторы • Messagepassing • Распределенность из коробки
- 4. Erlang • Let itcrash • OTP • Supervision tree
- 5. n2o • Cowboy (HTTP& WebSockets) • Генерация HTML и обработчиков • Scala Lift • deferred javascript
- 7. n2o Elements #panel{id=Panel, body=#button{id=myButton,body= <<"OK">>, postback={ok, <<"INFO">>}}}
- 8. n2o Elements #panel{id=Panel, body=#button{id=myButton,body= <<"OK">>, postback={ok, <<"INFO">>}}} <div id="myPanel"><button id="myButton" type="button">OK</button></div>
- 9. n2o Elements #panel{id=Panel, body=#button{id=myButton,body= <<"OK">>, postback={ok, <<"INFO">>}}} <div id="myPanel"><button id="myButton" type="button">OK</button></div> document.getElementById('myButton').addEventListener( 'click',function (event){ ws.send(enc(tuple(atom('pickle'),bin('myButton'),bin(' g2gCaAVkAAJldmQABWluZGV4aAJkAAJva20AAAAESU5GT2sACG15Qn V0dG9uZAAFZXZlbnRoA2IAAAWFYgAKp5tiAACpXA=='), [tuple(tuple(utf8_toByteArray('myButton'), bin('detail')), event.detail)]))); } )
- 10. Мини-приложение + | +--------------+-+ | +----------------+ |web_app | instagram_app +-+--------------+ | | | WS | index | | | | +----+ | | | | Instagram | | | | | +----+ | | | | | | | | | +--------> +---+ | +---------------------+ HTTP POST | +^ +-+ +--------------+-+ | | | +----------------+ +----------------+ | | | <----------+ || +++--------------+ | | | | | |-------| loop | | | | | <----------+ +-------+> | | | | | | | | | | | | <---------+ | | | | | | | | <+-----------+ | | +-----------+ | | +-+ | | | +----------------+ | | | | +---------------------+ |
- 11. index.erl main() -> #dtl{file="index", bindings=[{body,body()}]}. body() -> [#panel{id=butPanel, body=[ #button{id=catsButton, class= <<"btn">>, body= <<"show #cats”>>, postback={tag,<<"cats">>}} ]}, #panel{id=updater}].
- 12. index.erl event({tag, Tag}) -> wf:update(butPanel, #h1{body=<< <<"#">>/binary, Tag/binary>>}), {ok, _Pid} = wf:async(Tag, fun() -> loop(updater, Tag) end), manager:subscribe(Tag), wf:reg(Tag).
- 13. index.erl loop(Elem, Tag) -> receive {gproc_ps_event,{tag, Tag}, Text} -> insert_image(Elem, Text), wf:flush(Tag); timer:sleep(500), loop(Elem, Tag) end. insert_image(Elem, Img) -> wf:insert_top(Elem, #panel{body=#panel{body=[ #link{href=maps:get(<<"link">>, Img), body=#image{src=maps:get(<<"url">>, maps:get(<<"low_resolution">>, maps:get(<<"images">>, Img))), }}]}}).
- 14.
- 15. Вариант на Python •asyncio (aiohttp + websockets) • акторы, общение через очередь • код на JavaScript
- 16. @asyncio.coroutine def handler(websocket, _path): new_image_receiver= ProcessQueue() SubscriptionManager.subscribe(TAG, new_image_receiver) while True: message = yield from new_image_receiver.receive() if not websocket.open: SubscriptionManager.unsubscribe(TAG, new_image_receiver) break yield from websocket.send(json.dumps(message)) var socket = new WebSocket("ws://127.0.0.1:8765"); socket.onmessage = function (event) { var msg = JSON.parse(event.data); var img = document.createElement('img'); img.src = msg.images.low_resolution.url; var pics = document.getElementById('pics'); pics.insertBefore(img, pics.firstChild); }
- 17. Производительность Req/sec Latency n2o 1245021 aiohttp 530 117 tornado 1500 580 nginx 17600 49 wrk -t4 -c1000 -d30s http://127.0.0.1:8080
- 18. Выводы • n2o быстр,как в плане работы, так и в плане разработки • Можно не писать HTML и JavaScript • Гибкость. Толстый клиент и REST endpoint, либо умный сервер и простой клиент. • Все плюсы Erlang
- 19. Выводы • Свой DSL •Нет нормальной документации API (но есть Nitrogen API) • Сыроват, меняется, нет тестов.
- 20. Ресурсы • http://synrc.com/apps/n2o/doc/web • http://nitrogenproject.com •Learn You Some Erlang for Great Good! • Programming Erlang • Erlang плагин для IDEA http://ignatov.github.io/intellij- erlang/ • https://github.com/etataurov/instastream