angular universal http://drupal.sh/taxonomy/term/5 en Angular 2 and Drupal communities collaborating on Weather Channel projects http://drupal.sh/angular-2-drupal-communities-collaborating <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Angular 2 and Drupal communities collaborating on Weather Channel projects</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img property="schema:image" src="http://drupal.sh/sites/default/files/styles/large/public/2016-06/drupal-angular-2.png?itok=opipJygF" width="480" height="219" alt="Drupal and Angular 2" typeof="foaf:Image" class="image-style-large" /></div> <div property="schema:text" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>At the Angularconf 2016 Matt Davis from Mediacurrent discussed the collaboration between the Angular 2 and Drupal communities. Currently Drupal is missing a comprehensive front end framework and is looking at coupling together with Angular to provide a more contemporary administration editing interface.</p> <p>In his address to the Angular 2 crowd Matt represents the Drupal community and discusses interesting details that are going in behind the scenes in the Angular 2 and Drupal works. In fact Matt has just last week had a meeting with the leader of Drupal, Dries Buytaert to discuss about the further deepening the collaboration between the two Open Source projects.</p> <p>Building more bridges with the Angular world, both technical and personal is one of the goals that Matt has. He has previous experience in both Drupal and Angular 1 from a project case of renewing the Weather Channel's flagship website on Drupal. During this project they've created a framework that allows front end developers to create components for Drupal without any knowledge of the underlying platform.</p> <p>The custom approach worked fine for the main site, but with the latest project - Wunderground - they started to look at Angular 2 very early on. With web components and the modern architecture they did find a lot of promise in the combination of Drupal 8 and Angular 2, but they had their share of challenges too.</p> <p>Challenges with Drupal and Angular 2 on Weather Channel have been surfacing since the team worked on Wunderground prototyping from January 2016. Here are some of the things they have noted so far:</p> <ul><li>The standard Angular bootstrap does not work for them since a Drupal site is a combination of server generated HTML and dynamic front end components. The solution for them was something called <em>Long form bootstrap </em>that allowed them to load and boostrap components as they needed them</li> <li>Many components have multiple instances on a website and they needed to select which one of them they actually want to initialize - by default Angular starts with the first element it finds. Working together with the Angular 2 team they solved the problem by being able to bootstrap components with custom selector.</li> <li>Performance is still an issue when using Angular 2 together with a complex backend generation tool like Drupal and BigPipe, but the teams are looking into together into areas such as: SystemJS/JSPM, Template Compilers, Angular Universal, Web Workers and Service Workers.</li> </ul><p>With this level of collaboration and goodwill between the two projects, it looks more and more likely that Angular 2 will be the basis for <a href="http://drupal.ovh/drupal-9-user-interface-overhaul">a modern Drupal Admin Shell</a> similar to the one used by <a href="http://drupal.ovh/wordpress-leapfrogged-drupal-with-calypso">WordPress and Calypso</a>.</p> <p>Similar to the relationship between Drupal and <a href="http://symfony.com/">Symfony</a>, learning Angular 2 seems like a safe for Drupal developers. And vice versa as <a href="http://drupal.ovh/drupal-team-working-on-angular-2-universal-support-for-twig-php">Twig is getting support for Angular Universal rendering</a>.</p></div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="http://drupal.sh/user/1" typeof="schema:Person" property="schema:name" datatype="" xml:lang="">dryer</span></span> <span property="schema:dateCreated" content="2016-05-26T17:23:49+00:00" class="field field--name-created field--type-created field--label-hidden">Thu, 05/26/2016 - 17:23</span> <div class="field field--name-field-tags field--type-entity-reference field--label-above clearfix"> <h3 class="field__label">Tags</h3> <ul class="links field__items"><li><a href="http://drupal.sh/taxonomy/term/1" property="schema:about" hreflang="en">drupal</a></li> <li><a href="http://drupal.sh/taxonomy/term/4" property="schema:about" hreflang="en">angular 2</a></li> <li><a href="http://drupal.sh/taxonomy/term/5" property="schema:about" hreflang="en">angular universal</a></li> </ul></div> <section rel="schema:comment" class="field field--name-comment field--type-comment field--label-above comment-wrapper"></section><div class="node__links"> <ul class="links inline"><li class="comment-forbidden"><a href="http://drupal.sh/user/login?destination=/angular-2-drupal-communities-collaborating%23comment-form">Log in</a> to post comments</li></ul></div> Thu, 26 May 2016 17:23:49 +0000 dryer 3 at http://drupal.sh Drupal & Angular 2 http://drupal.sh/drupal-angular-2 <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Drupal & Angular 2</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img property="schema:image" src="http://drupal.sh/sites/default/files/styles/large/public/2016-06/angular.png?itok=OAeCV0KX" width="250" height="250" alt="Angular 2 logo" typeof="foaf:Image" class="image-style-large" /></div> <div property="schema:text" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Drupal and Angular communities are forging a relationship that might have a significant impact on the future of both systems. It seems like a good match to couple <a href="http://symfony-cms.net/drupal-8">Drupal 8</a> with <a href="http://angular.io/">Angular 2</a> as both have gone through large changes in the future, but Drupal 8 still lacks a coherent de-facto SPA framework.</p> <p>WordPress has already chosen <a href="http://drupal.ovh/wordpress-leapfrogged-drupal-with-calypso">React.js for its Calypso shell</a> and has the upper hand in this case. Developers know what to focus on. For both projects this is a big choice, since unlike the use of <a href="http://jquery.com/">jQuery</a> a utility library - building your admin interface around a framework like Angular 2 or an ecosystem like React.js is a very long term choice.</p> <p>In the volatile world of JavaScript choosing a side is a risky move. Just imagine if Drupal had adopted the soon deprecated Angular 1.x for Drupal 8. Both React and and Angular are long term investments. Going with standard technologies like Web Components, vanilla JavaScript and native Web APIs might be the actual winner in the long term: <a href="https://slack-files.com/T03JT4FC2-F151AAF7A-13fe6f98da">You (probably) don't need a JavaScript framework</a></p> <p>Alienating developers is also something that is worth considering in such a large change. Imagine the developer entrenched in Drupal 7 and jQuery developers having to move out of their comfort zone not only with PHP, but now with JavaScript too. Angular has a whole scary vocabulary of it's own with <a href="https://github.com/Reactive-Extensions/RxJS">RxJS</a>, <a href="http://www.typescriptlang.org/">TypeScript</a>, <a href="https://github.com/angular/universal">Universal Rendering</a> and <a href="https://angular.io/docs/ts/latest/glossary.html">more</a>. Hiring a real full stack developer is increasingly like hunting a unicorn...</p> <p>The transition from Drupal 7 to Drupal 8 and Angular 1 to Angular 2 are similar as the fundamentals of the systems are shifting. For Drupal developers Drupal 7 and jQuery skills are increasingly useless going forward - same applies to Angular 1.x skills. This might cause some Drupal 7 and Angular 1 developers to take the opportunity to go for something else completely.</p> <p>Read more about Drupal and Angular 2:</p> <ul><li><a href="http://drupal.ovh/acquia-scrambles-to-catch-up-with-automattic">Acquia scrambles to catch up with Automattic</a></li> <li><a href="http://drupal.ovh/drupal-team-working-on-angular-2-universal-support-for-twig-php">Drupal team working on Angular 2 Universal support for Twig / PHP</a></li> <li><a href="http://react-etc.net/entry/choosing-between-react-vs-angular-2">Choosing between React vs. Angular 2</a></li> <li><a href="http://drupal.ovh/drupal-9-user-interface-overhaul">The Drupal 9 User Interface Overhaul</a></li> <li><a href="http://drupal.ovh/angular-2-drupal-communities-collaborating">Angular 2 and Drupal communities collaborating on Weather Channel projects</a></li> </ul></div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="http://drupal.sh/user/1" typeof="schema:Person" property="schema:name" datatype="" xml:lang="">dryer</span></span> <span property="schema:dateCreated" content="2016-05-10T17:33:45+00:00" class="field field--name-created field--type-created field--label-hidden">Tue, 05/10/2016 - 17:33</span> <div class="field field--name-field-tags field--type-entity-reference field--label-above clearfix"> <h3 class="field__label">Tags</h3> <ul class="links field__items"><li><a href="http://drupal.sh/taxonomy/term/1" property="schema:about" hreflang="en">drupal</a></li> <li><a href="http://drupal.sh/taxonomy/term/4" property="schema:about" hreflang="en">angular 2</a></li> <li><a href="http://drupal.sh/taxonomy/term/5" property="schema:about" hreflang="en">angular universal</a></li> </ul></div> <section rel="schema:comment" class="field field--name-comment field--type-comment field--label-above comment-wrapper"></section><div class="node__links"> <ul class="links inline"><li class="comment-forbidden"><a href="http://drupal.sh/user/login?destination=/drupal-angular-2%23comment-form">Log in</a> to post comments</li></ul></div> Tue, 10 May 2016 17:33:45 +0000 dryer 5 at http://drupal.sh Drupal team working on Angular 2 Universal support for Twig / PHP http://drupal.sh/drupal-team-working-on-angular-2-universal-support-for-twig-php <span property="schema:name" class="field field--name-title field--type-string field--label-hidden">Drupal team working on Angular 2 Universal support for Twig / PHP</span> <div class="field field--name-field-image field--type-image field--label-hidden field__item"> <img property="schema:image" src="http://drupal.sh/sites/default/files/styles/large/public/2016-06/angular-2-in-beta.png?itok=B8ABhx0A" width="480" height="330" alt="Angular 2 is in beta" typeof="foaf:Image" class="image-style-large" /></div> <div property="schema:text" class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Decoupling Drupal and working with a front end framework has been a hot topic in the Drupal Community for a while now. Dries Buytaert has discussed the prospects of different options, and has even credited the Angular 2 team for <a href="http://buytaert.net/comment/122151#comment-122151">changing their licensing</a> to be compatible with Drupal.</p> <p>It looks like the relationship between Angular and Drupal is indeed warming up. In a talk on <a href="https://www.oreilly.com/ideas/angular-2-and-the-future-of-html5-apps">Angular 2 and the future of HTML5 apps</a> Brad Green explains details about <a href="http://angular.io">Angular 2</a> and so on. One noteworthy point is the section where they describe Angular Universal - their implementation of <a href="http://drupal.ovh/drupal-rest-api-isomorphic-javascript">Isomorphic Rendering of JavaScript</a>. It's essentially a way of rendering the first view of a front end application for immediate results.</p> <p>This has been a staple in the <a href="https://facebook.github.io/react/">React</a> and <a href="https://nodejs.org/en/">Node.js</a> world for a long time, with some ways of <a href="https://www.symfony.fi/entry/testing-react-js-isomorphic-rendering-with-php-v8js-and-the-symfony-microkernel">rendering React.js on PHP</a> being already accessible to Drupal developers and others utilising PHP. In the talk Brad mentions that Angular Universal rendering is already working on Node and in the process of implementation for .NET, Java and...</p> <p>...Twig in collaboration with the Drupal team! See snippet of video below:</p> <p><iframe frameborder="0" height="600" src="https://vine.co/v/iDpDWBTWqtt/embed/simple" width="600"></iframe><script src="https://platform.vine.co/static/scripts/embed.js"></script></p> <p>This is great news as Angular 2 remains more accessible to developers than a collection of libraries. While the move to Angular 2 from Angular 1 was criticized in the past, the team seems to have made a great recovery. Angular 2 as a packaged product (a Framework) as opposed to React (a Library), which makes it much more uniform as opposed many esoteric options available for React.</p> <p>The big news here is that the Angular and Drupal teams are working together to bring this to Twig and PHP - not just <a href="http://symfony-cms.net/drupal-8">Drupal</a> developers. <a href="http://ez.no/Blog/Discover-the-PHP-template-engine-Twig">Twig is a popular templating engine</a> for PHP. It stems from the same people as the Symfony project is used in many different products, including the <a href="http://symfony.com/projects/symfonyfs">Symfony Full Stack Framework</a>.</p> <p>In the past Drupal has been <a href="http://drupal.ovh/why-is-drupal-still-a-gated-community">criticized for being a freeloader in the PHP community</a> as of late, but this is a great opportunity for them to create something that is usable for hundreds of thousands of non-Drupal developers. We urge the Angular and Drupal teams to work to make this a generic PHP/Twig component and not something that is tightly coupled (ha-ha) with Drupal.</p> <p>All in all this is a great thing for Drupal and PHP communities!</p> </div> <span rel="schema:author" class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="http://drupal.sh/user/1" typeof="schema:Person" property="schema:name" datatype="" xml:lang="">dryer</span></span> <span property="schema:dateCreated" content="2016-03-29T17:36:28+00:00" class="field field--name-created field--type-created field--label-hidden">Tue, 03/29/2016 - 17:36</span> <div class="field field--name-field-tags field--type-entity-reference field--label-above clearfix"> <h3 class="field__label">Tags</h3> <ul class="links field__items"><li><a href="http://drupal.sh/taxonomy/term/4" property="schema:about" hreflang="en">angular 2</a></li> <li><a href="http://drupal.sh/taxonomy/term/5" property="schema:about" hreflang="en">angular universal</a></li> <li><a href="http://drupal.sh/taxonomy/term/1" property="schema:about" hreflang="en">drupal</a></li> </ul></div> <section rel="schema:comment" class="field field--name-comment field--type-comment field--label-above comment-wrapper"></section><div class="node__links"> <ul class="links inline"><li class="comment-forbidden"><a href="http://drupal.sh/user/login?destination=/drupal-team-working-on-angular-2-universal-support-for-twig-php%23comment-form">Log in</a> to post comments</li></ul></div> Tue, 29 Mar 2016 17:36:28 +0000 dryer 6 at http://drupal.sh