Some things I’ve learned: Building a marketing site with Angular 5 and CSS Grid
When I started on the development team at Filament Creative, one of my favourite quotes from chats with Stephen Megitt about our team’s workflow was “We aren’t precious on process”. What a relief! And really, what a time to start on a new team, building projects that deliver to our clients, as well as help us learn the new frameworks and methods that we get so excited about as developers.
I joined a team that was in the midst of working on a marketing site, the first of four marketing sites for a single client being designed and built by Filament. The client’s CMS benefitted the project by allowing us to provide only HTML, CSS and JS files to their team to load to their parent site. The first site was built without a framework at all, simply using HTML, SASS and JS.
Upon moving on to our second project, we wanted to make use of some sort of HTML templating tool. For the first site, we reused frequent patterns, making the need for a component-based system apparent, after dealing with HTML files nearly 2000 lines long. I was hesitant when Les, the development team lead, suggested Angular 5. Was such a powerful framework needed for a marketing site? The JS framework I was the most comfortable with was React, and the only exposure I had to Angular was AngularJS, a framework I didn’t enjoy using. React offers templating and JavaScript in a component-based format, which I like and didn’t find was the case with AngularJS.
Angular 5 was different! Once the structure of the site was built, I realized that Angular 5 was a lot more component-based than what I had worked with originally. A small marketing site offered the perfect way to learn a new framework. We did encounter some things along the way.
Data Sharing
Initially, we explored creating a data service for the site, but due to the nature of the marketing site, using data asset JSON files to hold our content proved more straightforward. It was a learning curve, first dealing with CORS errors between environments, then sharing the data between components. That’s when I learned about Input().
Input() reminded me a lot of the way that I used props in React, and while not exactly the same, once I made the connection I could easily see how all my components interacted with each other. Originally passing strings through Input() was not a problem, but passing arrays and objects proved difficult. We started by stringifying and parsing the objects — not ideal.
The solution: Define the data model in the child component.
It’s still a work in progress, but the flow of data is more self-documenting now and is much easier to explain to team members joining this project.
CSS Grid
Introducing two learning curves for our developers simultaneously was a scary prospect, but we had used float-based grid systems at Filament before. Between the heavy markup and bootstrap-like classes, the clarity of CSS Grid appealed. It did take work to provide fallbacks, because we support the three most recent browsers and Internet Explorer 11.
Fallback support was daunting when we started. First attempts started with a CSS Grid layout, and then tested on IE11 afterwards. However, targeting browsers that don’t support CSS Grid is not straightforward — it is easier to target browsers that do support grid using a feature query, specifically @supports (display: grid). Now, I begin each section by writing a flexbox layout fallback.
When explaining using CSS Grid on a production site to other developers, a common protest I heard was, “Why would I write two different layouts? I’d rather do it just once with a well-supported method.” This is a common response to the use of CSS Grid; however, it is already a well-supported method!
IE11 has partial prefixed support, but for us at Filament, It’s important to note that when it comes to supporting IE11 (+ previous versions if the client requests it), we aren’t writing two different layouts at all. For fallback layout, we aren’t looking for that pixel-perfect layout that we are on modern browsers. Often, a simpler, equally effective layout happens on IE11, to give clarity in addition to ensuring nothing comes across as broken — similar to the convention of using different layouts on mobile, tablets or desktop.
Next Steps
While I was excited at the prospect of using modern web development tools when I first joined the team, I also was nervous about using an unfamiliar set. But I powered through, and now feel more comfortable with both Angular 5 and CSS Grid. We are currently working on our fourth project with this client, and with each sprint, we attempt to make things better in our development cycle, the site’s performance, clarity of code and general iterations on commonly used components between each site.
My goal for using Angular 5 for these projects isn’t using Angular itself, because there will always be a new technology available. In the midst of working on these projects, Angular 6 came out, so we are already lagging. Despite that, I want to keep up with new tools when a new project allows it, because for me, development is both the type of work that I do, as well as the constant improvement on my skill set.
I really hope CSS Grid is forever though! 💕
