Podcast Summary
Building a Desktop App with JavaScript: Missive's Story: Missive, a Canadian email client, stands out with its collaborative features like shared inboxes, email delegation, and real-time chat rooms for efficient team communication.
Etienne Lemay from Missive shared his experience of building a desktop app, specifically an email client, entirely using JavaScript. Missive is a full-featured email client that offers modern tools like news, send later, undo send, and rules. However, what sets Missive apart is its collaborative features, such as sharing conversations with colleagues, delegating email accounts, and turning email conversations into chat rooms with real-time collaborative composing, tasks, assignments, and labels. Etienne started using Missive due to its Canadian origin and its superior features for managing team email workflows. He highlighted the convenience of having a shared inbox, assigning emails to team members, and the chat room feature for efficient communication. For those looking for a tool to streamline email support or manage shared inboxes, Missive's unique features make it an excellent choice.
Combining React and Backbone for effective app development: Using older technologies like React and Backbone together can lead to powerful apps, even in 2023. The choice of technology is not the only factor in success.
Using a combination of technologies, like React and Backbone, can lead to the development of powerful and effective applications, even if some of those technologies are considered "legacy" or "older." The speaker in this conversation had a specific requirement for an Android app and was impressed with an email management app called Missive, which uses a React frontend and Backbone for the rest of its structure. The team behind Missive started using these technologies in 2014, before they were widely adopted, and have continued to use them due to their effectiveness. They have not yet considered transitioning to newer technologies like TypeScript due to the large codebase and the effort required to make such a change. Despite the use of older technologies, the app is still successful and efficient, demonstrating that the choice of technology is not the only factor in creating a great application.
Creating a Desktop Email App with React and Backbone: The team built a desktop email app using React and Backbone, implementing event-based state management and using the same JavaScript file for web, Electron, and Cordova.
The team developed their desktop application using React and Backbone, without relying on popular libraries like Create React App or Next.js. They started with a bare-bone React setup, creating routes and components, and used the React Backbone library to connect React and Backbone models. They used webpack for tooling and bundling, and the same JavaScript file was used for web, Electron, and Cordova. State management was event-based with Backbone models, and components could listen to specific events and update the state accordingly. Although JavaScript allowed for UI customization, the team found creating gestures to be the most challenging aspect. Overall, the team was able to create a polished email app entirely in JavaScript, despite the challenges.
Innovative UX design enhances user experience: Missive's multi-conversation swipe feature improved efficiency and engagement by allowing users to dismiss or archive multiple emails at once with a single swipe, resulting in a unique selling point for the app.
The user experience (UX) design, including gestures and interactions, plays a crucial role in making apps effective and engaging. The example given is the multi-conversation swipe feature in Missive, which allows users to dismiss or archive multiple emails at once with a single swipe. This interaction was a unique selling point for Missive and was a result of finding a more efficient way to handle multiple conversations at once. The technical implementation of this feature involved swiping on the screen and mapping the x and y coordinates to the corresponding conversations, without querying the DOM. The challenge was ensuring the smoothness of the animation and transition, especially on older devices. Overall, the UX design and innovative interactions can significantly enhance the user experience and differentiate an app from competitors.
Optimizing JavaScript mobile apps for performance: Implement complex animations with 3D transforms, cache element positions, and use LogRocket for debugging to deliver a fast and feature-rich JavaScript mobile app experience.
Developing a smooth and performant mobile app experience, even when built using JavaScript, is achievable with careful optimization and attention to detail. The team behind Missive achieved this by implementing complex 3D transforms for animations and caching element positions to avoid excessive DOM queries. They also shared that LogRocket, a sponsor of the podcast, is a valuable tool for debugging mobile app issues, providing a comprehensive view into user sessions and app performance. Moreover, the team revealed a surprising fact: the Missive mobile app is built using the same codebase as the desktop app. This means that the same components are shared, and the app's challenges and technicalities are identical across platforms. By utilizing this approach, the team was able to deliver a fast and feature-rich app with a small team and deploy it on all platforms simultaneously. These strategies and techniques demonstrate that a JavaScript-built mobile app can provide a native-like experience, challenging the common perception that JavaScript apps may lack the performance and smoothness of native apps.
Missive's email app uses Cordova for consistent UI and access to native features: Missive's email app uses Cordova to deliver a consistent UI and access native functionalities across iOS and Android through plugins.
Missive's email app is built using Cordova, which allows them to create a consistent UI experience across iOS and Android platforms using WebKit, while also having access to native functionalities through an ecosystem of plugins. This approach differs from React Native, where the UI is done natively on each platform and the logic runs in JavaScript. The use of Cordova has been a positive experience for Missive, despite the need to build a custom structure around it to handle platform-specific plugin issues. They also use Fastlane for app automation and building, and have not encountered any problems with Apple regarding the use of JavaScript in their app. Overall, Cordova has enabled Missive to create a seamless email app experience across multiple platforms.
Adhering to Apple's rules for JavaScript apps: Minimize server queries and use advanced storage solutions like IndexedDB to create fast, responsive JavaScript apps that meet Apple's approval standards
Developing a JavaScript app for Apple's App Store involves adhering to strict rules, including going through the official update process and not downloading assets outside of the App Store. This approach ensures a smooth user experience and Apple's approval. The email client app, Missive, achieves this by prioritizing the rendering of conversation lists and fetching email content only when necessary. They rely on the browser's capabilities to make requests and use IndexedDB, a more advanced version of local storage, for persisting data. By doing so, they minimize server queries and provide a fast and responsive app. Overall, the success of Missive in the App Store demonstrates the potential for JavaScript apps to deliver high-quality, Apple-approved experiences.
Automated Testing with Cypress: A Game-Changer for Web Applications: Automated testing with Cypress streamlines the process, enabling user-friendly interaction and end-to-end testing for web applications built using Chrome or Chromium-based browsers.
Testing is an essential aspect of software development, and it's important to ensure that applications function correctly on various devices. While manual testing is an option, it can be time-consuming and laborious. Automated testing tools like Cypress can be a game-changer, allowing for end-to-end testing and visual interaction with the application. Cypress is particularly useful for testing web applications built using Chrome or Chromium-based browsers, like Electron. Unlike traditional testing libraries, Cypress provides a more user-friendly interface, enabling users to interact with the application as if they were using it manually. It's worth noting that while Cypress is limited to Chrome-based browsers, it can still be a valuable addition to a testing suite, especially for quick testing and ensuring the application's overall functionality. Additionally, having a continuous integration (CI) system in place, like the one using Puppeteer, can help streamline testing and ensure that the client-side code is running smoothly.
Using Backbone.js, Cordova, Flexbox, and SASS for a conversation system: Effectively using familiar tools like Backbone.js, Cordova, Flexbox, and SASS can lead to efficient and functional applications. Choosing tools based on team expertise and comfort can be more beneficial than constantly chasing the latest technology.
Effective use of tools, old or new, is crucial for a development team. In the discussion, the team explained how they use Backbone.js and Cordova to build a conversation system with labeling functionality. They highlighted how applying labels triggers automatic actions, but they're still testing the real-world impact of these actions. Regarding the UI, they use a stripped-down approach with Flexbox and SASS, aiming for a CSS API that simplifies styling. They find this utility-based CSS approach efficient and popular among developers. The team's decision to stick with these tools comes from considering their worth, ease of use, and team integration. The conversation underscores the importance of choosing tools that work best for a team, rather than constantly chasing the latest technology. By focusing on their team's expertise and the tools they're most comfortable with, they can build effective and functional applications.
Missive's quick response and dedication to support set it apart: Missive's technology stack allows for swift updates and great user experience, while their team's dedication to support sets them apart from competitors.
The quick response and adaptability of Missive's technology stack enable them to roll out changes and updates swiftly, providing a great user experience. The team's dedication to support and following up on every request is another key aspect that sets Missive apart. Despite not engaging in traditional marketing methods, the podcast hosts were genuinely impressed by Missive and appreciated the opportunity to share their positive experiences with their audience. Email and chat applications may have standard protocols, but dealing with various sources of data updates and APIs from providers like Gmail and Outlook presents challenges for the back-end team. The shift away from IMAP towards proprietary APIs adds to the complexity, requiring attention in the future. Overall, Missive's innovative approach, commitment to user experience, and responsiveness make it a noteworthy player in the email and chat space.
Exploring the Impressive Design and Functionality of Missive Email Client and Recommending Useful Tools: Missive email client offers an inspiring design and functionality, while the Wagner Flexio paint spray gun simplifies painting tasks, and Prettier is a valuable code formatter for web development projects.
The interview with the creator of Missive email client was inspiring for the podcast hosts, who are primarily focused on web development. They were fascinated by the email client's impressive design and functionality, which reminded them of the Danger Crew game interview. The hosts recommended giving Missive a try. In the "Sick Picks" segment, one of the hosts shared their excitement about the Wagner Flexio paint spray gun. This airless gun allows for easy painting with any color and is more cost-effective than traditional spray paint. The host shared their positive experience using the 590 model, which they purchased at Canadian Tire. Another host mentioned Prettier as their pick. Prettier is a code formatter that saves time in web development projects, particularly when working with CoffeeScript. The host found it to be a valuable tool in their stack, especially for side projects and microservices.
Exploring Intriguing Resources: Podcasts and Courses: Discover dark music history stories through 'Disgraceland' podcast or learn Svelte programming basics with 'Svelte for Beginners' course
The speakers shared their recommendations for interesting and informative resources, from a podcast about disgraceful events in music history to a beginner's course on Svelte programming. Scott recommended the podcast "Disgraceland" by iHeartRadio, which delves into dark stories from music history that are not necessarily crime-related but intriguing nonetheless. Wes talked about his latest course, "Svelte for Beginners," which teaches the basics of this lightweight JavaScript framework. They also took turns promoting their respective projects, with Wes mentioning his courses at westbos.com/forward/courses and Etienne plugging Missive, an email client with a well-designed interface. Overall, the conversation provided valuable insights and recommendations for those interested in music, programming, or just looking for new content to explore.
