LINUX.ORG.RU

Начинаю разбираться с этими вашими вебами


4

0

Сабж. Забил на все фреймворки и платформы, решил начать с html, css и jquery. Вроде все понятно, даже склепал небольшую страничку: сайдбар, хидер, футер, прокрутка только контентой области, прозрачности, анимации, нескучные обои. Многое прояснилось. Впереди освоение jquery, а позади овер15 опыта десктопного кодинга.

Вопрос вот в чем: что дальше? В смысле, что вот он html+css+jquery, а вон там вдалеке непонятные wordpress, zend, и что-то еще. А какая следующая технология в этом стеке? HTML::Template? Hello [% world %]? mojo/django/ucoz/justAnotherBuzzword?

Глобальная цель — быстро охватить все уровни и подходы и выбрать то, что по душе.

Буду признателен, если кто-нибудь упорядочит фреймворки и технологии по возрастанию уровня абстракции, или ткнет в такую статью, а то вообще непонятно куда копать.

ты определился с языком? если пхп - это одни фреймворки (их овер дофига), если ява - совершенно другой подход, питон аналогично, руби етс.

anonymous
()
Ответ на: комментарий от anonymous

Не определился. Я в общем-то всеядный, но яву и питон не очень хочется. Мне интересны не языки, а уровни. Хочу аналогию к:

1. asm, c/pascal, basic/java, 1c/abap

и 2. kernel, clib, glib/winapi, gtk/vcl

Как бы такой же расклад, только для веб. Не знаю как еще объяснить.

arturpub ★★
() автор топика

следующим шагом будет освоение препроцессоров: HAML/Slim, SASS/Compass, coffeescript.

как заметил анонимус, непонятно с каким именно стеком ты собрался работать, руби, питон, пиейчпи, джава, аспнет.

science ★★☆
()
Ответ на: комментарий от science

Ага, то есть категория «шаблонизаторы». А что еще есть? Пофигу на языки, их надо по фреймворку выбирать, а не по синтаксису.

arturpub ★★
() автор топика

Начни с cgi-шек на perl-е. Именно cgi-шек, без всяких новомодных fast-cgi и прочего. Просто perldoc cgi (или как оно там, забыл, к счастью) и вперед, как в девяностых. Как ни странно, но думаю это весьма поспособствует пониманию веб-технологий и даст хороший базис. Честно.

dmiceman ★★★★★
()
Ответ на: комментарий от dmiceman

Я знаком с серверной частью, и cgi писал на перле для забора кое-какой статистики. Там вроде ничего такого нет, просто вместо тегов функции с параметрами. Собственно старый веб мне знаком (также как и low-level и как устроен сам апач я прекрасно представляю), только я примерно в начале 2000-х застрял в криокамере, теперь википедию открываешь и сразу понятно, что нихрена непонятно. Какие-то высокие уровни, шляпа-нешляпа, вот хочу перезагрузиться.

arturpub ★★
() автор топика
Ответ на: комментарий от arturpub

если тебе интересны как оно вообще работает попробуй голые перл или пхп (никто не заставит тебя использовать их дальше) чтобы понять откуда берутся данные, о гет/пост запросе (тут могу посоветовать почитать литературу о хттп), о двоичных данных.

вторая часть зависит от языка, который ты выберешь. трудного там ничего не будет, просто изменится стиль написания программ/скриптов.

еще я вижу, что ты, видимо, увлекся фронтендом. настоятельно советую выучить жс, причем не на уровне жквери, а с самых основ.

anonymous
()
Ответ на: комментарий от anonymous

Да, в целях именно «фронтенд». Я просто терминов не знаю, по ходу дела приходится подхватывать. А за советы все равно спасибо!

arturpub ★★
() автор топика

Дальше идет JS. Потом JSON-RPC. Потом jQuery. Дальше можешь начать юзать js-фреймворки над jQuery. После можешь использовать специализированные фреймворки, вроде AngularJS. Все. Ты постиг дзен создания веб-приложений. Серверную часть можно писать хоть на пхп, хоть на перле (честно он вообще для этого плохо заточен), хоть на node.js. Чтобы не выбрал, только у пхп + HipHop есть шансы сделать что-то стоящее, иначе все придется писать на си/си++/.net, в крайнем случае erlang. Следующая пятилетка это взлет WebSocket

gh0stwizard ★★★★★
()
Последнее исправление: gh0stwizard (всего исправлений: 1)
Ответ на: комментарий от unfo

Верю, но боюсь увязнуть. Когда под ногами нет твердой почвы, и нельзя сказать сходу «как это работает» вплоть до низкого уровня, то работа превращается в серию кастов непонятных заклинаний.

Вообще мне пока что хватит кофе/жабаскрипта и темплейтеров, но на следующей неделе придется вас еще помучить. Спасибо всем за советы и разъяснения!

arturpub ★★
() автор топика
Ответ на: комментарий от gh0stwizard

Все. Ты постиг дзен создания веб-приложений.

Шо, и таки все? А я-то думал... Ну это даже хорошо.

пхп + HipHop есть шансы

Я когда пробовал туториал читать, он мне показался очень «грязным» языком, в том плане, что схема имен в стдлибе кривая, семантика странная, и т.п. Я конечно не пурист и больше за здоровое легаси, чем за красивое ненужно... Вопрос вот какой: шансы сделать стоящее от чего зависят? От mod_php и компиляции, или еще от чего-то?

arturpub ★★
() автор топика
Ответ на: комментарий от arturpub

Шо, и таки все? А я-то думал... Ну это даже хорошо.

Ты программист или гуру? :) Конечно для реально крутых вещей понадобится дизайнер, флеш (html5 пока не настолько хорошо реализован в браузерах). Про ява-апплеты можешь забыть, сейчас это моветон. Silverlight вроде как сама МС закопала. А больше вариантов и не осталось. Ну может только технологии от Adobe.

шансы сделать стоящее от чего зависят? От mod_php и компиляции, или еще от чего-то?

Зависит от прямых рук создателей языка. Я не зря сказал про HipHop, почитай на вики и тут. Не знаю какие подводные камни у ruby/python, но у перла за прошедшее десятилетие не изменилось почти ничего в плане «ядра» всех веб-приложений. Да, появился PSGI, типа крутой фреймворк вместо монстра CGI. Но, он написан на Pure Perl, а Pure Perl никогда не считался производительным и маложрущим. Поэтому сколько ты не оптимизируй код на perl/python/ruby достич скоростей как на си/си++ или хотя бы erlang не получится. Пока не начнешь писать модули на xs (это тот же си считай).

Ну и моя главная претензия к перлу как веб-движку: сериализацию строки из GET|POST-запросов никто не выложил на CPAN в виде XS-модуля! Все, в том числе Plack, ядро PSGI, Mojo и прочих «веб-серверов», закопировали убогий HTTP::Body 2005 года выпуска. И его реализация через временные файлы заслуживает отдельного разговора :-)

Ты можешь не париться насчет написанного выше. Я клоню к тому, что как только захочешь приодалеть 1 триллион просмотров в сутки, тогда вспомнишь мои слова :)

gh0stwizard ★★★★★
()
Ответ на: комментарий от gh0stwizard

Настоящий гуру сел бы на берег и стал ждать, пока мимо не проплывут трупы флеша и силверлайта, а хтмл5 не запилится во все браузеры. Пожалуй возьму такой же курс :)

...

Ага, то есть производительность. Да, перл нетороплив и покушать всегда любил. Я правда не совсем понял идею xSGI, это типа минипрослойка, чтобы не только на апаче крутиться, но и на других вундервафлях?

А что насчет такого феномена, как application server (c)(r)(tm)? Есть ли смысл копать в сторону ORM, rewrite, прочий enterprise? Сложно ли вообще щас взять (очень грубо) «простую сишку» и выкатить на ней т.н. аппсервер для апача, какие тут есть новые нюансы? Или все по-старому — принял GET/POST, выплюнул хтмл и помер? Я про SEO что-то слышал, и что ему схема URL какая-то требуется, типа .cgi?params уже не катит, тут тоже темный лес.

arturpub ★★
() автор топика

node.js как платформу уже советовали? и over9000 шаблонизаторов, роутеров к нему?

system-root ★★★★★
()
Ответ на: комментарий от arturpub

Есть ли смысл копать в сторону ORM, rewrite, прочий enterprise?

Однозначно. Всё это используют во взрослых проектах за деньги.

Wizard_ ★★★★★
()
Ответ на: комментарий от arturpub

Пожалуй возьму такой же курс :)

Я не понял, что ты решил писать на вебе. Я вот пишу в свободное время универсальные аппы: веб/мобайл/десктоп. И решения на jQuery меня почти всем устраивают. Мне не нужны канвасы и графика, поэтому формами, таблицами обхожусь. На флеше-то можно делать вещи поинтересней, а с html5 можно сильно наступить на грабли реализаций в браузерах раз, и во-вторых, производительность как бы хуже (а adobe уже десять лет оптимизирует свой флеш).

Я правда не совсем понял идею xSGI, это типа минипрослойка, чтобы не только на апаче крутиться, но и на других вундервафлях?

Не совсем. CGI был сделан по классике нулевых. Потом пришли дяди и показали FastCGI и тут оказалось, что модуль CGI на него не был заточен. Вобщем мучались, мучались и родили универсальное решение, PSGI в частности. В тоже время делали веб-сервера непосредственно под перлом, HTTP::Server, HTTP::Daemon, Net::HTTP, AnyEvent::HTTPD, Twiggy... список можно окончить только вершиной совершенства: Feersum. Последний показывает производительность почти в два раза медленную чем nginx в простых и многих устраивающих тестах. Естественно, многие его обходят стороной, потому что имеет ряд своих особенностей и пиарят во всю тормоза Mojo. В цифрах соотношение 1:50.

А что насчет такого феномена, как application server (c)(r)(tm)?

Не имел реального опыта. Но судя по отзывам asp.net по производительности не хуже, чем сишный код. Т.е. есть смысл использовать его. Но тут встает вопрос лицензионности, а также стека технологий с которыми придется работать в добавок: например, MSSQL.

Сложно ли вообще щас взять (очень грубо) «простую сишку» и выкатить на ней т.н. аппсервер для апача, какие тут есть новые нюансы?

Если писать на сишке, то лучше вообще забыть про апач. Какой в нем смысл? Никакого.

Или все по-старому — принял GET/POST, выплюнул хтмл и помер?

Это никуда не делось. Как была спецификации HTTP 1.0/1.1 так и остались. Все что добавилось это WebSocket. Ну если проморгал AJAX, то сейчас он повсюду и плюс JSON-RPC. Но все делается по старинке через парсинг http headers.

Я про SEO что-то слышал, и что ему схема URL какая-то требуется, типа .cgi?params уже не катит, тут тоже темный лес.

Этим занимается непосредственно сам движок. Вообще на перле через PSGI это делается очень просто. Грубо говоря делается алиас на определенный URL, при этом данные из форм как поступали в http headers, там и остались.

gh0stwizard ★★★★★
()

jquery

Не трогай jquery, это тлен.

Глобальная цель — быстро охватить все уровни и подходы и выбрать то, что по душе.

На мой взляд, это очень плохая цель, поскольку она не верифицируема. Лучше выбери себе сперва конкретную задачу.

Anatolik ★★
()
Ответ на: комментарий от Deleted

У гхоста в тегах вроде как перл5. По ссылке я не согласен с >50% доводов, а кое-кто даже назвал бы его анскильным неосилятором. На самом деле он весь изрантился по подходам, которые в нашей юности были вполне нормальными: eq vs ==, проверка ошибки из errno, и т.п. Не приветствую зоопарки, но и не вижу ничего страшного в легаси, тем более ламповом. Пишем красивый код, чтобы через год его выкинуть и снова написать красивый код. С годами надоедает, поверь.

arturpub ★★
() автор топика
Ответ на: комментарий от arturpub

Давай аргументы и факты лично мне. То, что у меня в тегах только перл говорит о том, что я пишу сейчас на нем. До этого был опыт с asm, python, delphi/pascal, php, plain c немного. И поверь знаний о том как сделан внутри перл мне хватает, чтобы более-менее адекватно оценивать что хорошо, а что нет. Если в чем-то не прав, поправь.

gh0stwizard ★★★★★
()
Ответ на: комментарий от Anatolik

Я очень быстро соображаю что к чему, т.к. «не первый раз замужем». Если я начну выбирать конкретные задачи, я вас задолбаю тупыми темами по один-два раза в день. А так я хватаю термины и технологии и быстро гуглю их, пока вы соображаете, что еще написать. И тред богатеет, и я развиваюсь, такую общую конкретику больше никак не получишь. Про тлен уже читаю, спасибо.

arturpub ★★
() автор топика
Ответ на: комментарий от arturpub

Если бы меня кое-кто назвал неосилятором говна, я бы только обрадовался.

Deleted
()
Ответ на: комментарий от gh0stwizard

Воу, воу. Я ни на перл, ни на что другое не наезжал! Пардоньте если что...

Ответ был на

Не слушайте похапешников

arturpub ★★
() автор топика
Ответ на: комментарий от arturpub

Извиняюсь за наезд. Не прочитал/воспринял «по ссылке» :) На деле, там все верно расписано. Однако почему у ФБ/ВК так хорошо масштабируется пхп, а не тот же перл/питон/руби очень простое: в пхп оберток над библиотечными функциями намного меньше, чем в том же перле. Например, для обычных вызовов функций mysql в пхп используется две-три функции обертки, в то время как в перле около 10. Поэтому многие вещи в пхп сделаны убого, но зато с меньшими потерями производительности. И если дальше рассуждать, то перл проигрывает по производительности как раз в развитой динамической типизации. Она действительно лексически красиво сделана, поэтому так легко писать такие вещи:

if (@array == 1) { ... }
в отличие от
if (count($array) == 1) { ... }

gh0stwizard ★★★★★
()
Ответ на: комментарий от Anatolik

Выходит ангулар против жквери это как современный кокоа против классики жанра. Хорошая штука, хотя все равно низкоуровневый скилл в js надо сначала отмастерить.

arturpub ★★
() автор топика
Ответ на: комментарий от Anatolik

А сам много писал на AngularJS? Насколько он получается тормозней, чем jQuery?
Мне тут коллега рассказывает, что оверхед angularjs слишком большой. Там, где jquery тормозит, angularjs повесит почти напроч браузер.

gh0stwizard ★★★★★
()
Ответ на: комментарий от gh0stwizard

И вот тут вроде бы весь такой в белом должен выйти луажит, с hyperblock scheduling'ом и zero-cost builtin jit-ffi, но что-то его нет... Может попробовать, или слишком большой стек придется повторить?

arturpub ★★
() автор топика
Ответ на: комментарий от arturpub

Может попробовать, или слишком большой стек придется повторить?

Попробовать что? AngularJS? Конечно, ради интереса. Мне такой подход как в angularJS не нравится по одной причине, я довольно неплохо знаю html/js поэтому взгляд на DOM с какой-то колокольни, надуманной абстракции, со своими правилами кажется неудобной. Во-первых, кажется, что теряешь контроль над сущностями и манипулируешь неизвестно чем. А во-вторых, хоть вставки html-кода в jQuery действительно смотрятся как php + html в одном файле, судя по ответу на стековерфлоу там они от этого также не избавились. Т.е. не получилось у них полностью избавится от html-кода. Конкретно:

template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',

Что я хотел увидеть вместо этого треша:

template: dom.a.class("btn").ng-class({active: on}).ng-click("toggle()").text("Toggle me!");

gh0stwizard ★★★★★
()
Ответ на: комментарий от gh0stwizard

Попробовать что? AngularJS?

Не, я про LuaJIT на серверсайде, как замену перл/пхп.

взгляд на DOM с какой-то колокольни, надуманной абстракции, со своими правилами кажется неудобной

Согласен, бритва Оккама всегда права и рулит. Единственно биндинги (если там то, что я думаю) — попробовав раз, ем и сейчас. При качественной реализации очень полезная вещь, правда имея некоторый скилл можно самому выкатить именно биндинги и тогда непонятно нафига вообще тащить здоровый фреймворк. Ну, от курения марихуманов еще никто не умирал, будем курить.

arturpub ★★
() автор топика
Ответ на: комментарий от gh0stwizard

А сам много писал на AngularJS? Насколько он получается тормозней, чем jQuery?

Около 4 месяцев, с тормозами не сталкивался.

Мне тут коллега рассказывает, что оверхед angularjs слишком большой. Там, где jquery тормозит, angularjs повесит почти напроч браузер.

Если коллега приведет пример тормозящего angular'a на jfiddle или plunker, мне интересно будет взглянуть и попробовать отрефакторить.

Angular'у иногда вменяют тормоза(видимо, dirty-checking тому причина). Но на практике они пренебрежимы(незаметны человеческому глазу). Вот более подробно.

Anatolik ★★
()
Ответ на: комментарий от gh0stwizard

Нам похоже обоим пора притопить часиков на шесть, голова уже не варит, а тут еще внезапно почти 2 ночи.

arturpub ★★
() автор топика
Ответ на: комментарий от arturpub

Не, я про LuaJIT на серверсайде, как замену перл/пхп.

Как я уже сказал, триллион посещений ты врядли получишь с первого раза, так что бери то, к чему душа лежит. Ну и про перспективы не забывай. Мне кажется lua по возможностям будет уступать пхп/перлу. Конечно, если кроме как дергать данные из бд более ничего не надо, тогда сойдет. У меня просто такие задачи, что либо перл+cpan, либо c/c++. А поскольку последнее мне сложнее тянуть иду более простым и уместным на текущий момент путем. Конечно, я понимаю, что если делать что-то реально стоящее нужно брать сишку.

gh0stwizard ★★★★★
()
Ответ на: комментарий от gh0stwizard

Это просто чтобы не переусложнять пример. В реальных приложениях обычно делают:

templateUrl: "/route/to/my/cool/template.html"

Anatolik ★★
()
Ответ на: комментарий от gh0stwizard

Т.е. не получилось у них полностью избавится от html-кода.

В смысле? Angular наоборот стремится расширить, а не избавиться от html. Если вы его(html) довольно неплохо знаете, то почему воспринимаете как «треш»?

То, что вы хотели бы увидеть вместо — не html.

Anatolik ★★
()
Ответ на: комментарий от Anatolik

Если коллега приведет пример тормозящего angular'a на jfiddle или plunker, мне интересно будет взглянуть и попробовать отрефакторить.

Маловероятно, т.к. работал с ним относительно давно.

Вот более подробно

Их объяснение меня не устраивает по той причине, что они ссылаются на проблемы движка, а не то, сколько они навернули поверх :)
А насчет dirty-checking, то они ссылаются на свою кривую реализацию. В отличие от них я могу напрямую отключать/включать события на элементах тогда, когда я считаю необходимым. При этом не надо считать программиста идиотом, чтобы объяснять очевидные вещи и не давать возможность их разрулить из своего движка. Конкретно:

Suppose you have an array of items. Say you want to add items into an array, as you are looping to add, each time you add you are firing events on change, which is rendering the UI. This is very bad for performance. What you want is to update the UI only once, at the end. The change events are too fine grained.


Что я делаю в таком случае в jQuery, во-первых, т.к. у нас подобие concurrency, но все еще последовательное выполнение. То после получения порции данных из ajax, я могу прямо изменить данные в массиве в колбеке аякса, а не где-то посередине, например, через setTimeout(function() { change_array() }, 100), когда в этот же момент пользователь будет вводить данные в форму или еще куда-то. В итоге, в момент заполнения массива, onchange просто не отработает, т.к. будет блокирован выполнением функции change_array().

Они там слишком навернули или я что-то не так прочитал?

gh0stwizard ★★★★★
()
Ответ на: комментарий от Anatolik

В смысле?

View они расширили, это я увидел. Но это не так сложно как кажется.

Если вы его(html) довольно неплохо знаете, то почему воспринимаете как «треш»?

php + html в одном файле это то, от чего AngularJS должен бежать. Увы, динамический код на jQuery это как раз тоже самое:

$('<div />').appendTo('body');
И это еще скромно, у меня (и у многих) прописываются аналогичным образом формы с десятком полей! Стандартная помесь html + js. В идеале должен остаться только js, имхо.

gh0stwizard ★★★★★
()
Ответ на: комментарий от gh0stwizard

Они там слишком навернули или я что-то не так прочитал?

Я полагаю, второе. Вы — видимо, по невнимательности — ссылаетесь на описание «Issues with change listeners»(проблем с подходом, которые используется в Knockout и Backbone). Попробуйте, пожалуйста, прочитать еще раз. Внимательнее.

php + html в одном файле это то, от чего AngularJS должен бежать.

При чем здесь php? Где вы его увидали? Пардон, но у меня создается впечатление, что хотя бы один из нас упорот. Надеюсь, это я.

Anatolik ★★
()
Ответ на: комментарий от Anatolik

Я полагаю, второе.

Так-с. Итого имеем концепцию полностью построенную на событиях и работающую по принципах их исполнения в движке браузера.

Angular remembers the value and compares it to previous value. This is basic dirty-checking. If there is a change in value, then it fires the change event.

KO dependency tracking is a clever feature for a problem which angular does not have.


Что это значит, что есть запустить в цикле изменение свойства объекта:

myobject.myproperty="new value";
Это в свою очередь запустит столько же событий. Например, тест-кейс:
for (var i = 0; i < 5000; i++) {
  myobject.myproperty="new value: " + i;
}
5000 раз будет выполнена магия angularjs, т.е. 5000 раз будут события и их «выстреливание». Верно? А ниче, что модель колбек в колбеке это неверный подход в решении задачи? Я хочу сделать ajax-запрос и в его коллбеке напрямую изменить свойство объекта, минуя лишний коллбек!

При чем здесь php?

Я хочу js с возможностью быстро строить DOM минуя теги html. Надеюсь так понятней.

gh0stwizard ★★★★★
()
Последнее исправление: gh0stwizard (всего исправлений: 2)
Ответ на: комментарий от gh0stwizard

Ладно, поиграюсь сам, завтра уже, сейчас что-то голова не очень варит. На деле надо проверить, что код ниже не сделает то, чего не ожидается по логике:


var postIt = function(i) {
   if (i > 5000) return;

   $.post('/test').done(function() {
     angularObject.myproperty = "new value: " + i;
     postIt(++i);
   });
}

postIt(0);
На что расчет: считаем, что время обработки POST как раз на локалхосте будет около 50мс. Считаем, что магия angularjs строится на коллбеках. В итоге, предполагаем что конечный результат от запуска к запуску будет равен чему угодно но не «new value: 5000» :)

gh0stwizard ★★★★★
()

Вопрос вот в чем: что дальше?

PHP. Фреймворки на вебе не нужны (PHP сам как фреймворк).

nightingale
()

HTML+JS+CSS = assembler для веба

дальше куча высокоуровневых штук, которые позволяют ускорить написание чего-то конкретного. Когда ускоряешь одно, замедляется другое. Выбери что тебя бесит больше всего (или наоборот - что очень хочется упростить), а потом и технологии подтянутся.

stevejobs ★★★★☆
()

Я бы порыл в направлении Apache Tomcat. Концептуально на вики описан как белый, мягкий и пушистый. :-) Может срефакторю маленький проектик с пхп на него. Он ведь же не противоречит html, css и jquery в одном флаконе с ним?

Infra_HDC ★★★★★
()

Мне показалось, или половина отписавшихся говорит про какой-то другой веб из параллельной вселенной?.. Какие си, какие перл, о чем вы вообще?.. Какие JS+CSS = WEB? Ну и ну.

coderage
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.