Introduction to Angular 2 for Symfony developers
Angular is a front end framework that shares quite a few things with the Symfony framework. Both are well established in the the web development industry, they're easy to namedrop and make generalisations without deeper insight. As frameworks with different domains (front end vs. back end) they don't share components or code directly, but the history and quite a few concepts are very similar.
The first version of Angular was released late in 2010. In the JavaScript world at that time jQuery was still the hottest thing and the language and ecosystem itself remained in stagnation. This is similar to the early years of Symfony. At the time of release of Symfony 1 in late 2005 the PHP community was still busy stomaching the release of PHP 5 and there was little significant progress it for a number of years.
Since 2010 there have been tremendous changes in the JavaScript world. The complexity of application development done in JavaScript has grown exponentially. Development tooling and best good practises have followed suite. While work on Angular 1 continued, it was more apparent that there needed to be a more fundamental change.
This lead to the point that In September 2014 the Angular development team announced that Angular 2 will be a radical renewal of the framework. This is similar to what was done Symfony2 and the risks and reactions were similar, such a change might alienate the existing developer audience.
For Symfony2 the time was absolutely right, with Composer and leading to the widespread use of Symfony Components in many PHP projects. For Angular the road was just as uncertain. With Google building AdSense with Angular, an upgrade path for Angular 1.x applications and recently reaching Release Candidate status it seems that Angular made it through the woods alive.
Angular 2 and Symfony SE are Frameworks
Libraries and Frameworks are often used interchangeably in daily talk, but they are inherently two different things:
- A library is essentially a set of specific functions that can be embedded easily to applications (or frameworks).
- A framework is a larger entity that enforces an abstract design. A framework defines how the project is laid out and usually uses a number of libraries to achieve this.
For Symfony developers the components are libraries which are composed to form a platform with the framework. In the JavaScript realm, React.js is a library for creating User Interfaces. React is rarely used alone and is usually complemented with routing, state management and other components - essentially forming a custom framework.
Both the Symfony Standard Edition and Angular 2 are clearly playing in the Framework league. They both define a specific structure for development and come with a wealth of functionalities often needed for web application development. In addition they embed 3rd party components like Doctrine ORM and RxJS.
As frameworks Angular and Symfony are both fully featured and rather opinionated. While it's possible to switch out Doctrine from Symfony or not use TypeScript with Angular 2, it's likely that most people will use them as they're there by default in tutorials and documentation.
Dev tooling and resources make or break it
Neither Symfony Framework or Angular 2 are the most lean tools out there and a purpose built collection of components will likely yield a better solution in absolute technical terms. For many applications and teams they're both a solid foundation to start building on as raw performance is rarely the bottleneck after a certain treshold.
Both Symfony SE and Angular 2 are fast enough for most tasks. Onboarding developers to a project built with them is easier than a purpose built collection of components - thanks to standard conventions, available documentation and tutorials from the community.
Symfony is widely acclaimed for it's excellent documentation and the same applies to Angular. In fact many Open Source projects that have become popular over a wide number of alternatives with feature parity owe it their success to great documentation.
In addition to documentation, both Symfony and Angular 2 offer a command line tool that makes bootstrapping new projects:
While few people have the need to generate multiple new projects often, a recommended installer still offers the advantage that you're bound to get a uniform starting point. There is a breadth of boilerplates for JavaScript and PHP projects out there, but many lack the momentum to keep up with the main project.
For both Angular 2 and Symfony developers there are good IDE extensions available. Symfony developers using PHPStorm can use the Symfony Plugin to get autocompletion and a hosts of other features. For Angular 2 development Visual Studio Code offers similar features out-of-the box. These together with the standard boilerplates reduce churn and time spent on shaving the yak.
No Framework should be an Island
In addition to framework developers still need access to libraries to extend the capabilities of their own system. With the basics such as routing and templating handled by the framework itself, this boils down to solving domain specific problems such as tax calculation.
For Symfony developers, the packet manager of choice is Composer where as for Angular 2 developers the equivalent is the NPM. Essentially both of of these do the same thing, they allow easy installation of external libraries and components. They also handle dependency management, so developers can focus on being productive.
In addition to packet management, Angular 2 developers are exposed to another tool called TypeScript. It is a language that extends ECMAScript / JavaScript with type checking through annotations and other features. Because TypeScript simply adds on top of JavaScript, developers don't need to learn a whole new syntax to use it.
While Angular 2 itself is written in TypeScript, it's not a requirement for developing in TypeScript. As Angular CLI bootstrapped projects come with a good default configuration for it - it's likely that many developers will use it. The default setup also enables development in the ES6 syntax, making JavaScript development more structured with classes and modules.
Front end developers need to support a wealth of browsers, so executing the latest version of JavaScript is not a given. Many JavaScript developers use Babel to convert the latest syntax to something that runs in most browsers.
With TypeScript this works in the same way: The written TypeScript is compiled to a JavaScript version that is widely supported. Currently this version is ES5, but as time goes by it's possible to change compilation target to ES6.
Exporting concepts from Symfony to Angular 2
As frameworks, both Angular and Symfony SE take care of a number of things that are needed in most web applications, such as templating, routing, i18n, HTTP communications and more. As PHP and JavaScript technologies are different, the implementations of these are wildly different between Symfony and Angular 2.
The concepts underneath are still similar and translating your experience and knowledge from Symfony to Angular 2 is possible. Here are a few examples:
- Templating
- Symfony developers are used to Twig templating. Angular 2 comes with it's own templating system. It is similar in syntax to Twig, with {{ output }} for example being done in exactly the same way, but there are specific things you'll need to learn. Angular 2 Template Syntax documentation
- Dependency Injection
- Services and dependency injection are a staple for Symfony developers. Being able to reuse the same code across your application reduces repetition and improves maintainability. Angular 2 Dependency Injection Documentation
- Hierarchical Structure
- In Symfony the H in HMVC stands for hierarchical, which means that you can render controllers from within your templates. Angular 2 is built using HTML tag like components, which can be considered as something similar. At the root of your application a component, but you can write independent components that are included within the main component. Angular 2 Component Attribute Directives Documentation
- Events
- Symfony developers are used to using the EventDispatcher to communicate between components. In Angular 2 there are similar concepts for handing messaging between individual components. Lifecycle hooks allow individual components to react to events such as onChange and onDestroy. In addition Parent elements can listen to events from their child elements. Angular 2 Component Communication Documentation
- Forms
- Forms are a key part of any interactive web application. The Symfony forms component is able to accomodate complex scenarios like multipage forms. Angular 2 comes with it's own method for building and processing forms on the client side. Angular 2 Forms Documentation
- Routing
- Symfony has an extensive routing system that can be extended to match a certain activity to an address. Angular 2 comes with it's built in routing system, which was changed in the first RC and is not yet documented. Angular 2 router documentation (deprecated)
- Extensibility
- Symfony uses the Bundle structure to allow developers to share functional components across different applications built with the framework. For Angular 2 the method to achieve this is to build reusable components that encapsulate the functionality and layout.
In addition there are a number of functions specific for front end development, such as Scoped Component Styles and user input events like on click.
There's obviously much more to Angular 2. For more details, check these out:
- Angular 2 tutorial: Tour of Heroes
- Styling Angular 2 Components
- Things that Excite Me about Angular 2
- Reactive Angular2 with rxNg
- Universal Rendering in PHP/Twig could be done with the Angular 2 Template Compiler
- Angular 2 and Drupal communities collaborating on Weather Channel projects
Conclusion and code example
So while Angular 2 and the Symfony framework are different beasts, they do share quite a few things. They are both feature complete application development frameworks that have undergone a large transformation in theirsecond major iteration. Both projects invest a lot in documentation and their high-level technical concepts are similar.
Neither Symfony SE or Angular are to everyone's liking. Many will continue to work with PHP micro frameworks like Slim or find alternative JavaScript ecosystems like React more better suited for them. However, both Symfony and Angular 2 provide a well defined foundation for implementing a wide range of applications on top of. While the only constant is change, both are likely to be around of years to come.
Finally consider the following annotated Angular 2 component written in TypeScript and draw your own conclusions on how familiar it seems to you as a Symfony developer: