How We Work 2: Web Frameworks & Frameworks
February 23, 2017
The second in our series spotlighting exciting libraries and frameworks that find a place in the Bridge Digital’s web development toolkit…
Susy (http://susy.oddbird.net/)
An oldie, but a goodie. Susy is undoubtedly our go-to grid system for responsive layouts. Sure, Bootstrap and Foundation are amazing frameworks, packed full of features, but most of the time as front-end developers, we simply need a fast, elegant, no-frills way to quickly build responsive grid layouts, and Susy is simply, the best tool for the job. It has a small file size footprint and you get only what you need, not a bloated framework. Susy is Sass powered, with a beautiful and easy to work with structure and fits easily into just about any web project. Your CSS classes can remain semantic without any strict presentational class names leading to simple beautiful and easy to understand markup.
Algolia Places (https://community.algolia.com/places/)
This thing is a godsend. You know all those wonderful predictive address form inputs on Google Maps? Algolia Places gives you that functionality in a plug and play library that can supercharge any form field input into a dynamic auto-complete address field. It will handle map suggestions, auto-completion of customers’ shipping addresses, country or region selectors, anything requiring user location input. It’s mega-fast and has built-in typo tolerance.
D3.JS (https://d3js.org/)
Data manipulation and visualisation is big, and it’s only going to get bigger. Tools like HighCharts, Google Charts and Periscope provide users with highly functional, responsive and beautiful charting of complex data. D3.JS is a newer kid on the data visualisation block, offering powerful visualisation components to build dynamic, data-driven webpages using SVG, HTML and CSS. With D3.JS you can build simple or complex table layouts, calendar views, bullet charts, bar charts, diagrams, scatter maps, bubble charts, tree maps, motion charts, data or word clouds, line charts, wheels, the list goes on and on (and on).
Lottie (http://airbnb.design/lottie/)
As Flash lets out its death rattle, HTML5 animation is becoming more and more essential on the modern web. There’s lots of animation libraries out there for inserting simple effects but for more complex requirements needing timelines, character or dynamic animation, you’ll either need to spend a lot of time calculating timings, curves etc. by hand or turn to a tool like Lottie. The go-to for animators looking to transform their creations into HTML5 has often been the Adobe AfterEffects “Bodymovin” plugin, which is able to export complex AfterEffects animations to a JSON file full of all that timing and sprite data for use with your web page. While attempts at importing full AfterEffects data has been limited previously, Lottie provides a library that claims to be able to handle (or will handle in the future) much of AfterEffects’ functionality – masks, line art, mattes, paths etc. The best thing about Lottie though is that it automatically makes your animation responsive without having to code your own media queries and adjust image sizes manually. It works seamlessly with iOS, Android and React Native as well. Lottie was developed by Air BNB and, while still in its infancy, looks like it will quickly become the number one HTML5 animation plugin on the block.
Pure.CSS (https://purecss.io)
Yahoo’s Pure.CSS is a modular, lightweight alternative to bulky, one-size-fits-all frameworks like Foundation or Bootstrap. It provides ubiquitous CSS resets based on Normalize, layout and grid modules, forms, buttons, menus, tables – all the common building blocks of any website or app. Very easy to use, override and customise, Pure.CSS is a great go-to for rapid front-end prototyping or even as a basis for a production project. It even plays well with Bootstrap by allowing integration with whatever specific Bootstrap modules you require. All that said, a Sass version would be nice Yahoo!
ReactJS (https://facebook.github.io/react/)
We’ve saved the biggest, most complex and arguably best for last. When released by Google, AngularJS revolutionised web development by providing powerful, client-rendered dynamic views for mobile and web applications in a relatively easy-to-use and learn MVC JavaScript library. To over-simplify what Angular and similar frameworks do, it is to leverage JavaScript to create dynamic web applications with data-bound form data all within the one HTML page without needing scripting languages like PHP to render the data. Since then AngularJS has evolved into Angular (dropping the JS), and inspired several other similar frameworks for mobile and desktop web app development. ReactJS is Facebook’s web application framework which is rapidly overtaking Angular.
At a functional level, ReactJS provides similar features to Angular but does so under a very different paradigm (far too detailed to explain here). Depending on your app’s requirements and architecture, ReactJS offers significant advantages to Angular. First and foremost, ReactJS is a lot easier to learn as it relies more on existing JavaScript and jQuery knowledge rather than enforcing a strict way of doing things, that is, in Angular you must always do things “the Angular Way”. Skills in ReactJS are transferrable to other frameworks like Ember, whereas as a developer proficient in Angular is, well, proficient in Angular. The new version of Angular also forces you to learn Microsoft’s TypeScript rather than using standard JavaScript/ECMAScript. Another big advantage is that ReactJS tends to have better performance in larger web applications. Probably the most exciting part of ReactJS is the introduction of ReactNative (http://www.reactnative.com/) which allows building cross-platform desktop and mobile ReactJS apps that run natively on IOS, Android and Windows.
If you’d like to discuss your software development options with The Bridge at no cost or obligation, feel free to call Lawrence on 02 9993 3300 or email lawrence@thebridgedigital.com.au