Ответы пользователя по тегу Веб-разработка
  • Как проектировать адаптивное spa приложение?

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


    Смысл адаптивной верстки в том, что содержимое подстраивается под размеры экрана. Ваш кэп :) В приведенном примере нету противоречий с принципами адаптивки

    Следовательно, обработчики тоже разные: в одном случае это переход на новый экран, в другом - открытие модального окна.


    Это можно реализовать внутри приложения. Вот пример реакта и react-router v4: https://reacttraining.com/react-router/web/example... . Там изображения в галерее открываются либо на странице, либо модальным окном. В зависимости от того, как была открыта страница (заметьте, что url у элементов галереи одинаковый при разных способах отображения)

    Или всё же можно грамотно строить адаптивные приложения?

    Да, можно. Но надо все моменты заранее продумывать

    Желательно использовать при этом динамическую загрузку модулей?

    Это позволяет оптимизировать производительность (время начального рендера, объем передаваемых данных\кода, время парсинга скриптов и так далее). Если вам это нужно - используйте)
    Ответ написан
  • Насколько хорошо необходимо знать Webpack и Gulp в web-разработке?

    С react используется webpack в подавляющем большинстве случаев. Есть тонна готовых конфигов, которые можно просто скопипастить и все будет работать. Но в целом - в проекте вам может понадобится сделать что-то по другому и тогда возникают сложности. Поэтому для общего развития нужно хотя-бы поверхностно разбираться что там к чему (в идеале - попробовать такие фишки как tree shaking и code splitting).

    Мой совет - для этого просто начните с нуля собирать проект. Подсматривайте готовые конфиги и постепенно собирайте свой, читая при этом документацию. При устройстве на работу будет однозначно плюсом, да и в собственной разработке не все же create-react-app'ом пользоваться.

    PS а про gulp - не знаю, давно уже не приходилось его в живую использовать: все что нужно - может webpack
    Ответ написан
  • Принудительная загрузка скрипта на React.js, как?

    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['geochart'], callback: drawVisualization});
    
      function drawVisualization() { ... }
    </script>

    Этот кусок кода вообще особняком стоит. Нужно же его интегрировать ... Начнем!

    Первым делом поместим функцию drawVisualization в наш js файл:
    function drawVisualization(element, commonData, regionData) {
      console.log('elemet', element);
      var data = google.visualization.arrayToDataTable(commonData);
      var mapVisualization = new google.visualization.GeoChart(element);
      mapVisualization.draw(data, regionData);
    }


    И немного модифицируем главный файл:
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['geochart']});
    </script>


    Затем определим компонент, который будет рисовать карту:
    class MapVisualization {
    
      componentDidMount() {
        this.drawMap();
      }
      
      componentDidUpdate() {
        this.drawMap();
      }
      
      drawMap() {
        drawVisualization(this.refs.mapDiv.getDOMNode(), this.props.commonData, this.props.data);
      }
    
      render() { 
        return (
          <div ref="mapDiv" />
        );
      }
    };


    Готово. Все данные поместим в props компонента Tabs и затем изменим его render:
    render() {
          var list = this.props.data.map(function(d, i) { return <button type = "button" className = { 'tab' + (i === this.state.current ? ' active' : '') } key = { 'tab-' + i } onClick = { this.handleClick.bind(this, i) }>{d.title}</button>
          }.bind(this));
    
          const { commonData, data } = this.props;
          const { current } = this.state;
          return (         
            < div className = 'container' >
              <div className='col-12'>
                  {list}
                  <div className = 'map'>
                    <MapVisualization data={data[current].content} commonData={commonData} />
                  </div>
              </div>
            </div>
          );
        }


    Вместо ссылки я использую конечно-же кнопку.
    Конечный результат

    Это конечно далеко от идеала, но я так понимаю Вы не давно начали реакт - поэтому пойдет
    Ответ написан
    4 комментария
  • На чем реализуется back-энд в современных веб-приложениях в связке с современными Javascript библиотеками?

    На чем душе угодно)

    Хотите - используйте nodejs (хорошо пойдет с reactjs).
    Хотите - php (как restAPI).
    Если большое корпоративное приложение - используйте Java.
    Ну и рельсы (ruby on rails), конечно же.
    Выбор зависит от Ваших задач.
    Ответ написан
    3 комментария
  • Как работает SPA при открытии дополнительных вкладок в браузере?

    SPA = Single page app. Другими словами - всё происходит на одной странице. Если вы открываете соседнюю вкладку, то да - нужно грузить все заново. Но по сути само приложение уже в кэше браузера и загрузить нужно только контент, который также может быть закеширован к этому моменту.

    Посмотрите в сторону изоморфных приложений, когда реакт рендерится как на сервере, так и на клиненте. Причем на клиент уже приходит HTML с данными.
    Ответ написан
    4 комментария
  • Какой движок/cms использовать для WEB , если данные приходят в json формате?

    Angular, backbone, ember и др - фреймворков полно. Выбирайте на Ваш вкус)
    Я за ангуляр.
    Ответ написан
    Комментировать
  • Как определить что посетитель режет рекламу?

    Это делается на JS. Я предполагаю что под фразой "режет рекламу" вы имели ввиду - удаляет или скрывает ее со страницы. Если да - то с помощью JS мы можем проверить удалены(или спрятаны) ли блоки с рекламой, или - нет.

    Вот примерно так:
    if(    $( '#blockID' ).length == 0 
        || $( '#blockID' ).css( "display" ) == 'none' 
        || parseFloat($( '#blockID' ).css( "opacity" )) != 1.0)
    {
        // Реклама удалена
    }
    Ответ написан
    Комментировать