bookmark_border

Animating VueJS with Sarah Drasner

Software Engineering Daily,

Originally posted on Software Engineering Daily

Most user interfaces that we interact with are not animated. We click on a button, and a form blinks into view. We click a link and the page abruptly changes.

On the other hand, when we interact with an application that has animations, we can feel the difference. The animations are often subtle. If you aren’t sure what I’m talking about, pay attention the next time you use Slack or Facebook Messenger or iMessage. Airbnb values animation so much that they built Lottie, a library for animation.

In an animated application, the user interface feels alive. When a software team takes the time to build animations into small interactions, the user perceives the animations as polish and attention to detail.

Sarah Drasner has been evangelizing the value of animations for years, and she is an expert at implementing complex and beautiful animations on the web. She works at Microsoft as a developer advocate and joins the show to talk about how to build animations. If you are building a web application and want to create a unique UI, you might find this show useful.

JavaScript supports detailed animations, often through the manipulation of SVG files. SVG stands for “scalable vector graphics” a file format that represents an image in its own DOM. SVG is so flexible because of this DOM format, which defines the different parts of the SVG. This is in contrast to a bitmap, which is just a simple matrix of dots, without any rich metadata.

You could manipulate SVG with raw JavaScript—but most people use a frontend JavaScript framework like React, Angular, or VueJS. Sarah has been implementing most of her recent web animations using Vue, and she is a member of the Vue core team.

Vue has an entertaining story, because it gained popularity in a time when Google was supporting AngularJS and Facebook was supporting ReactJS. The first version of Vue was created from scratch by a single developer, Evan You.

If you are a Vue developer looking for an open source project to hack on, you can check out softwaredaily.com, which is an open source platform to consume content about software. In addition to the Vue web app, we also have the Software Engineering Daily app for iOS and for Android. All of these apps are open-sourced at github.com/softwareengineeringdaily. If you are looking for an open source project to get involved with, we would love to get your help.

Transcript

Transcript provided by We Edit Podcasts. Software Engineering Daily listeners can go to weeditpodcasts.com/sed to get 20% off the first two months of audio editing and transcription services. Thanks to We Edit Podcasts for partnering with SE Daily. Please click here to view this show’s transcript.

Sponsors


Women 2.0 is a company with a vision of gender equality in the tech world. Women 2.0 is a community, a media company, and a jobs platform that connects top female talent with engineering jobs around the world. At the new Women 2.0 jobs platform, find vetted jobs for women engineers, data scientists, and product managers. To find a job that is right for you, go to women2.com/sedaily. And if you are an engineering company, you can connect with top female tech talent on Women 2.0. Companies like Twitter, MongoDB, and Craigslist use Women 2.0 to find new hires. Go to women2.com/sedaily to find out how to post your company’s jobs to Women 2.0. Thanks to Women 2.0 for being a new sponsor of Software Engineering Daily.


G2i is a talent platform built for engineers by engineers. React Native, React, and mobile: the developers on G2i have expertise in the best tools to build your applications. When I need engineers to help me out with my apps, G2i is the first place I go–especially when I am building with React or React Native. Contract a G2i developer to help you on a short-term basis, or hire a G2i developer full-time. And if you are looking to build cross platform applications in React Native, definitely check out G2i. The G2i platform is a community of React Native, React, and mobile engineers–these developers can become part of YOUR team. If you are looking for developers to build your product, check out g2i.co. You can also send me an email, and I’ll be happy to tell you more about my experience with G2i. Find your React Native, React, and mobile talent by going to g2i.co. Thanks to g2i for helping me ship my products, and thanks for becoming a sponsor of Software Engineering Daily.


IBM Cloud gives you all the tools you need to build cloud native applications. Use IBM Cloud Container service to easily manage the deployment of your Docker containers. For serverless applications, use IBM Cloud Functions for low cost, event-driven, scalability. If you like to work with a fully managed platform as a service, IBM Cloud Foundry gives you a cloud operating system to control your distributed application. IBM Cloud is built on top of open source tools, and integrates with all the third party services that you need to build, deploy, and manage your application. To start building with IBM today, go to softwareengineeringdaily.com/IBM and sign up for a free Lite account. With the Lite account, you can start building apps for free, and try numerous cloud services with no time restrictions. Check it out at softwareengineeringdaily.com/IBM.


javascript

About the Podcast