ReactJS

REACT NEWS : Update in Redux-Observable, GraphQL, Mobile Centre, TC39, Webpack, React Fiber, and More

6 min read
This article was written over 18 months ago and may contain information that is out of date. Some content may still be relevant, but please refer to official documentation for the latest information.

Developers such as Samer Buna, Parashuram N, Neehar Venugopal, Cameron Westland, and Jay Phelps recently discussed with our team new developments in JavaScript.

The videos featured will give you an idea of what’s been going on with GraphQL, Redux-Observable, React Fiber, the TC39 Import Proposal, and an introduction to the new term “Extensible React”.

GraphQL and ReactJS

Samer Buna on The Value of GraphQL, GraphQL Subscriptions, ReactJS

Samer Buna speaks about GraphQL and gives us an idea about how great it is to work with the query language and how perfectly matched it is for React. The language describes exact data requirements very clearly and optimizes the process of data communication between front-end applications and the server. Overall, it a better language and replacement for than the REST API.

Samer also introduces GraphQL subscriptions which offer real-time communication, Samer also talks about emerging applications which allow for the retrieval of immediate graphical API from the cloud. If an individual is looking to cloud host their data, there are now applications that can be used to define models and get the immediate graphical API required. This development removes entry barriers to beginner developers as they no longer have to write complete server applications to use GraphQL for their front-end applications, instead, they can simply generate an API in the cloud.

React proves itself to be a great framework to work with as it is both specialized and flexible. Unlike Angular or Ember, it doesn’t have ready-made design decisions or offer complete solutions that may limit developers from experimentation.

Samer recommends that once developers become confident with the ins and outs of React, that next steps should be to explore Node. He reasons that because React’s ecosystem and a lot of the new tools are node-based, React developers can gain a lot of power in knowledge by understanding the tools within the community.

{% youtube Oio0dfSvIYs %}

Mobile Centre, Browser Performance, and Tools for React Fiber from Microsoft

Parashuram N describes working on Mobile Centre, browser performance, and tools for React Fiber at Microsoft

At Microsoft, Parashuram N works on a number of projects as the program manager. One example includes the Visual Studio Code (VS Code) extension made for React, which allows authors to debug applications right from their VS Code. Experiments are being done to open up the possibility of testing reactive applications on the cloud.

Mobile Centre is another project that came from Microsoft. It is a system that runs alongside VS Code so individuals can choose whether they want to use one over the other or combine the two. Mobile Centre lets developers pick the Github repositories they want to work with, these are then signed, built, tested on the cloud, and distributed to end users.

Being a web developer comes with a many perks, one of which is having the ability to bring about change to users immediately. There is no lag in the process to present alterations or new features, and JavaScript fatigue is usually not an issue. Individuals who deploy code, are able to continuously do so without setbacks. Development practices and technologies such as LiveReload, Hot Module Replacement, and Browser Sync also make web creation easier to manage. All of these benefits are unique to the web development world, and are reasons why React fits so well with the web.

Although apps are really native and web-specific, moving into react native in the mobile development space is fairly easy to do. Reason being, ideas can be deployed instantly to customers using things like Code Push, and a number of tools such as the time travel debugging feature in ChakraCore are made available to help with the process.

Many performance-related projects have also emerged, such as browser-perf which enables automation of web performance or monitoring systems; and tv monster application which tracks the performance of React.js library. The app automatically collects performance data for all frameworks and all versions of react. It runs on Chrome and a number of mobile browsers. What makes these tests different from React’s existing performance tests, is that they are from a browser’s perspective, as opposed to JavaScript specific.

Parashuram also discusses the philosophy at Microsoft, RxJS, and building dev tools for Redux Observable on VS Code.

{% youtube pq38dSL7ZVk %}

The TC39 Import Proposal and Webpack 2

TC39 Import Proposal, Webpack 2, and the React Community in the East with Neehar Venugopal

In current times, Neehar’s primary focus as a software engineer is to provide a solution to developers that would help make building apps more efficient. He is one of the authors behind the import-proposal, which helps authors ship less code and emphasize the important ones to optimize performance (especially in mobile).

Import proposal is available in Webpack 2 and is in stage 3 proposal of TC39, meaning it hasn’t made an appearance in browsers. However, individuals do agree that it works so it will be implemented very shortly.

The commencement of import-proposal was inspired by talks about mobile for CSS and mobile for UI/UX. Seeing as mobile for javascript was yet to be discussed, but mobile app speed and performance needed to be improved, the topic finally began to surface. The question of “how can I send just the minimum amount of javascript required to show user what’s on the screen” emerged. Dynamic import was also introduced so lazy loading and code splitting could happen in webpack.

Neehar also talks about the React community in the East. Although far away, developers in this area still feel very much included in the community due to the great involvement of all developers, diversity, and communication between team members. Something that could be improved however in the West, however, is greater focus in performance. Unlike VueJS, React is not as widely adopted because of the performance issues.

{% youtube wEnIKjgmP2Y %}

Extensible React

Cameron Westland presents “Extensible React”

Cameron Westland is a software architect at Autodesk, currently working on a new web version that runs on React. The term “Extensible React” is introduced and can be defined as “a declarative approach to creating pluggable web apps”.

Extensibility is often used in applications. However, when it comes to building applications that are extensible there isn’t much conversation. Cameron and his team at Autodesk strive to spark greater discussion on this topic by giving answers to questions like “If an individual has a toolbar and wants to add an icon to the toolbar using an extension, how would he/she go about doing so if the application is built in React?”. One example of a solution includes the email client known as Annihilus. It is built in React, offers extensions, and allows individuals to add custom parts to their nightless email client.

One of the greatest things about React, is the effect it has on the ecosystem beyond its own community. For instance, before React, a lot of UI frameworks were holistic. They followed conventions and weren’t component-oriented. After React, a number of frameworks began adapting and rewriting their applications to be more similar to React. This ripple effect will surely be seen with the new changes in React Fiber. In addition to this, the React community is also one that is open-minded and encouraging. There is no one person who decides what React is going to be or should be. It has a strong team dynamic, and a lot of the ideas developed by framework authors are driven by the community.

{% youtube UdPx-OVEn28 %}

Redux-Observable and React Fiber

Jay Phelps on Redux-Observable, React Fiber, and ReactJS

The React community is described to be one of the most open communities out there when it comes to accepting new ideas. It brought about radical rethinking and was even assumed to be an antipattern at the time. React was able to rethink how things were done and create new best practices. These new norms have since been shared and adopted by other frameworks like Angular and Ember.

Jay discusses a few open source projects that are taking the lead in the React ecosystem. These include redux-observable, React Fiber, and Jest.

Jay shares the vision of redux-observable, or RxJs, is a middleware for composing or canceling async side effects using Epic as co-author of this library. Jay and Ben Lesh were inspired by other ideas in the community such as redux-thunk and redux-saga.

Jay shares his perspective on React Fiber and how developers can look forward to the ability to prioritize certain elements, such as inputs or animations, in their rendering.

Jest is a unit testing framework creates snapshots or code for a simple testing system. This is an example of a project, like React, that was originally not accepted but has scince been reinvented and is now successful. Today, Jest is emulated in other testing frameworks because it’s been so helpful.

{% youtube _BQL_TGvhqg %}

Don’t miss your chance to be more involved with the community by contributing! You can find the React library here.

Keep reading

You might also like

View all posts →

Effective Communication Strategies Within The Software Development Organization

Have you ever been in a situation where you thought you were communicating effectively, only to realize later that the other person misunderstood what you were saying? Have you ever communicated with someone only to hear that they felt you provided way too much detail, or that you didn’t provide nearly enough detail? Communication in the workplace is how ideas, updates, directions, etc are transferred to others. Each party in a software development organization has differing needs and expectations when it comes to workplace communication. By learning to tailor your communication to meet the needs of each stakeholder, you can become a more effective communicator and achieve greater success within your organization. The requirements of various parties that you interact with in the workplace can vary wildly depending on several factors. Your awareness of these individualized communication preferences and how you can give each party what they want and need will impact your effectiveness in your daily activities, your perception by others, and even your upward mobility within the organization. That's the power of communication, and why it's so important to master effective communication strategies in the workplace! In this article, we'll explore the different types of stakeholders in a software development organization, the communication strategies that work best for each group, and how effective communication can help you advance your career in the industry. We'll start by discussing the difference between “communication” and “effective communication”, before diving into the different types of stakeholders in a software development organization. Then, we'll explore the communication strategies that work best for each group, and provide actionable tips for improving your communication skills. Communication vs. Effective Communication When it comes to communication, it's important to remember that the intended message is only effective if it's received and understood by the recipient, regardless of their background or level of familiarity with the topic. Effective communication is about sharing thoughts, ideas, opinions, knowledge, and data in a way that ensures that the message is received and understood by the recipient. With effective communication, the sender and receiver leave the exchange feeling satisfied. There is a shared understanding of what was intended to be transmitted by the sender. Stakeholder Types In any organization, you have many different types of parties involved in a software project. Let's group the parties involved in software development into three categories for the sake of clarity: Development Team This consists of individual contributors, project managers, scrum masters, QA testers, UX designers, UI designers, architects, etc. Product Team The product team is made up of a diverse group of individuals, including product owners, business analysts, architects, and more. Executive Team CTO, CEO, etc. Each of these parties requires a different type of communication, a different level, and has different needs from your interactions to allow you to provide value from what you are saying and to for them view you as an effective communicator. Let’s talk a bit about what each of these parties needs, and how you can interact with them in the most meaningful way possible. Development Team This is the most detailed version of the interaction. This group needs to be communicated with on the level of individual tickets and the details of those tickets. When interacting with the development team, it's important to focus on the nitty gritty details of each task, ensuring that everything is sorted through meticulously. With this group, we will sort through specific implementation details. An example of interaction with someone from this group might look like this, “I am currently working on ticket 473, and trying to get the checkbox to behave correctly during testing. I have no blockers currently.” Product Team This group will be communicated with at the level of features and larger increments of work such as project milestones. This group is interested in chunks of a project, milestones, progress on the overall initiative, etc. An example of interaction with someone from this group might look like this, “The team is wrapping up development of the new Project X User Interface and will be moving to the implementation of the functionality next”. Executive Team This group is interested in the conversation at the highest levels of abstraction. Generally, they will be more concerned with things at the overall project level. When updating the executive team, it's important to provide high level updates that summarize progress and focus on next steps. For example, you might say, 'We're making great progress on Showcase X and are on track to complete it soon. Next, we'll be shifting our attention to project Y.' Types of Communication What are some of the types of communication? It’s a great question. When you begin to study various communication styles, you will read about different personality types, and how those personalities interact with the world around them. You might hear things like aggressive, passive aggressive, passive, and assertive communication styles. While understanding these can help you communicate effectively, we will focus on how different roles in a company require different levels of detail and specificity in their interactions. Your Natural Communication Style We all have a natural way that we prefer to communicate. Some are very direct and assertive. We might tend to be very to the point, with no filler, no fluff. Others might naturally tend to be more verbose, to fill in lots of details and context and information. Some naturally meet somewhere in the middle on the spectrum of detail vs direct higher level type of communication. There is no right or wrong answer, but you must be aware of your natural tendencies in conversation, and know how to use those effectively, or tailor your communication style to a specific situation or audience. Benefits of Tailored Communication What are the benefits of tailored communication? The primary benefits of tailoring your communication to different stakeholders are that you can provide each person with what they want and need in a way that resonates with them. For instance, I once had to adapt my communication style when working with a highly detail oriented developer who preferred a more granular level of communication. This eases the amount of effort required by the other party to understand you, and allows them to be more effective in taking your message forward. It increases the perception of your effectiveness, and credibility in their eyes as well. If people know that you are someone who can communicate with multiple parties with varying interests and needs, and do so effectively, you will be trusted with more responsibility, and be given more opportunities. Using Effective Communication To Advance Your Career As you can see, developing effective communication skills is a powerful way to advance your career in the software development industry. How have you seen effective communication impact your work? People who are seen as effective communicators have staying power in an organization. They are viewed as competent and necessary. They are given positions of authority and trusted to get things done. I remember that, when I was just starting out in software development, I struggled to communicate effectively with stakeholders at different levels of the organization. But over time, I learned the value of tailoring my communication to each person's unique needs, and it has paid off in my career in countless ways. Basic Strategies For Improving Your Communication Know your audience When preparing for a presentation or conversation, it's essential to consider your audience and tailor your communication style to their needs. What are some strategies you use to ensure your message is received and understood? Write notes in advance, when possible Draw an outline or even the bulk of what you need to deliver before the time comes. Even if you don’t ultimately use these notes directly, preparing them will help you to distill your thoughts and clarify your message, as well as review that they have the appropriate amount of detail for the intended audience. Practice your delivery Though you will not always be giving a speech, talking through what you plan to say will help you to see gaps, smooth the flow, and make sure that you are comfortable with the material you will be presenting or communicating. Conclusion In this article, we learned about the importance of effective communication, strategies for improving your communication, and the direct and indirect positive impacts these improvements can have on your effectiveness and value in the organization. We explored various strategies and approaches to improve communication. Development in this area can yield amazing results for you as you make the investment to improve your skills. We hope you enjoyed this article, and found it helpful. If you have any questions please feel free to join the discussions going on at starter.dev or on our Discord....

Ken Slachta6 mins
GeneralSoftware Engineer

7 Tips to be a Successful Developer in a Remote Company

As a software developer there are many advantages to working from home and still effectively working as a team to produce high quality results. But how can you be successful in a remote company?...

Jessica Wilkins7 mins
General

International Women's Day Recap

International Women's Day Event For this year's International Women's Day, we hosted a live event with Women Techmakers, featuring talks and a panel discussion on this year's topic: progress over perfection. It was a great conversation on what it's like to be a woman in tech, and how you can help yourself and others thrive in our industry. In case you missed it We have the full event on YouTube if you'd like to watch it yourself (which I highly recommend)! Here's a recap of everything that happened. Getting started in DevRel Pachi Parra Pachi Parra was up first, sharing her journey into DevRel, and tips on how you can get started too! Some highlights include: Roles that are available What a day in the life might look like Her journey into DevRel What a DevRel professional actually does things like public speaking, live coding, writing blogs, and giving talks at conferences. Her best tip for getting started? Find the type of content you like doing, and focus on doing that well! In DevRel, it's easy to spread yourself too thin between all the different types of content available, so focus on the one you like most, find a supportive community, and get yourself out there. :) Breathing Fire: Success and Growth as a Technical Woman Stacy Devino Stacy Devino was up next, providing all kinds of insight into the cycle women go through in their career, as well as tips for each stage of the journey. She opened with an amazing quote: Assume all women are technical and capable of breathing fire. Jessie Frazelle Other highlights: Igniting your world through learning, timing, your network, and leadership. Staying warm by managing your focus and chores, recording your achievements, maintaining relationships, and researching ideas. The key to avoiding burnout keeping a long term perspective, doing things for yourself, and allocating time for the things you enjoy and the people who support you. Riding the imposter wave to senior Jessica Janiuk Jessica Janiuk wrapped up our talks today, providing insight into her journey through tech and the ways we can think about imposter syndrome and allowing ourselves to grow. Some highlights from her talk: A few things to consider: what being "senior" means to companies and to yourself, if you're in the right place, and what you want in your career. A great diagram of the imposter wave the balance between our confidence and feeling like an imposter from this post by Ricardo Luevanos. Considering how often we're comfortable, and that there's an inverse correlation between feeling comfortable and feeling like an imposter (they're opposite each other). We have two choices: we can let it control us, or use that discomfort as a tool. Looking back on our growth and realizing that our current lows are higher than our past highs. Some senior advice: Be authentic, be proud of your work, have good mentors, remember that your work is not your life, and stay uncomfortable. She wrapped up with a brilliant reminder for us all: You are capable. You are valid. You are important. Please take care of yourself. People care about you. If you're struggling, you're not alone. Panel Discussion We rounded out the day with a panel discussion featuring these accomplished women: Erica Stanley Amal Hussein Deborah Kurata Katerina Skroumpelou Jessica Janiuk Stacy Devino Jae Bach Hardie Linda Thompson The conversation flowed naturally, each panelist feeding off of each other's ideas, and we covered some very powerful and helpful tips and reminders for women in today's developer world. Here's a few of my favorite topics or ideas we talked about: What did you learn in the past year? Have hobbies that don't involve tech. Learning to let go of your previous tools. How valuable close personal friends are people you can trust and rely on. Listen to yourself, and take time to introspect and evaluate. Don't over commit! Finding a community and actively contributing to it Women Techmakers! (Our joint sponsor) Make use of social media. "Reach one teach one" always be willing to share your knowledge, and be the person you needed when you were getting started. Engage people who align with your goals and values reach outside your level of age, career scope, experience. The interconnection between you and your people is not exclusive, it's inclusive! The more expansive your sphere is, the better you are at your job. Also we can find community in open source! The way people comment, commit, and support each other within a project counts too. Foundational knowledge vs tooling Understand what problems you're actually solving and what to reach for, more than worrying about the specific tech stack itself. This helps you build your own knowledge map, and pick up skills as you grow. For more senior folks realize when you've mastered something, and focus on clearing the road for those who come next. Learning to delegate if you always do something yourself, you're taking that opportunity away from someone else. Knowing when to ask for help, and that asking is NOT a weakness or failure! It's a strength to know when you need to ask for help. Find your learning method Ask multiple people if you need to until you find the answer that clicks for you! Ask why. Not understanding the answer someone gives you is also not a failure it's different viewpoints. Also learn how the people around you learn so you can help them in the way that best suits them. Communication and collaboration Have compassion for everyone on your team. When you collaborate, you get more done. Being able to communicate and collaborate is a HUGE strength. Don't let anyone make you feel bad for being strong in those! Being the person who's able to "glue" the team together is foundational to a strong team. Fighting stereotypes Things that are commended in men and reprimanded in women, and fighting against those biases Being authentic is the best way to lead your team don't play into a stereotype you don't fit. You don't have to sound "nice" or "pleasing" you're still a strong woman and you're going to be judged a certain way, so don't compromise! Unpacking all the social conditioning and learning to be comfortable with yourself all the time, in all the situations we find ourselves in. Wrapping Up The entire event was filled with wisdom, laughter, and camaraderie. We're so thankful to the ladies who came to speak with us, and hope to see you at the next one!...

Linda Thompson5 mins
GeneralEvents

3 Web Performance Concepts that Will Help Start a Conversation Around Performance

In 2021, This Dot Labs released PerfBuddy, the free online platform for testing web and mobile based sites. With the release of this tool, it was our sincere hope to simplify the conversation around web performance, helping team leaders develop easy to understand metrics that they can use to advocate for further investment into their various web technologies. But we also realize that many new to web development, or who work in software but not as developers, might need more clarification on some of the basic key terms to help them engage more actively in conversations surrounding web development. Below, I’ve defined three of the top terms in web performance to help readers better ascertain your site’s performance, and play an active role in refining their technologies to provide the best experience for their customers. First Contentful Paint Time (FCP) FCP , or First Contentful Paint Time , is a critical metric that measures the time that users must wait in order for a page to load its first visible element. For some sites, this could be the entire page. However, for others, the FCP time might measure the seconds between a user navigating to a site, and any responsive element, such as a loading bar, appearing in front of them. This is not a measurement of backend nor even frontend script loading speed, but a metric that affords development teams the ability to infer the quality of their site’s initial UX. According to metrics published by Akamai in 2018, sites are liable to lose nearly half of their visitors if their page takes more than three seconds to load. In fact, just a single second of load time delay can result in a 7% decrease in sales conversions for eCommerce platforms. This is especially true when considering mobile users, whose likelihood of leaving a page increases 90% when made to wait 5 seconds for a page to load And as more eCommerce shoppers turn to using their mobile devices with 53% of users accessing shopping sites via mobile platforms on 2019’s Cyber Monday, representing a 40% YOY increase teams need to be acutely aware of their cross platform performance with respect to FCP. Time to First Byte (TTFB) Not to be confused with FCP, TTFB, or Time to First Byte, refers to the amount of time that the browser waits in order to receive initial data from its server. In order for a site to display any information, a browser must make dozens, if not more, data requests. Issues related either to the quality of the host, site functionality, or complexity can all contribute to a site’s latency, or the amount of time it takes for data to be passed between the server and the browser. Of course, reducing site latency will improve user experience by decreasing FCP, and generally increasing browsing speed. However, ensuring low TTFB will also boost your SEO by making your site more quickly crawlable by leading search engines. Page Weight As developers add features and functionality to support more advanced user experience, web pages get heavier. As of 2020, the average desktop webpage weighs 2080 KB, up from an average of 1532 KB in 2017, with the weight of mobile web pages slightly lower, but still seeing a near 40% increase in size when compared to stats from just four years ago. eCommerce websites need to maintain acute awareness of their page weight, and ensure that their latency is not overly impacted by it, due to the tendency for shopping sites to be especially complex, supporting large catalogs of products along with other features to promote customer engagement. And as this era of advanced digital transformation continues to expand, eCommerce sites must develop strategies to meet market expectations for performance without over burdening their sites with heavy plugins and functionalities. Finding Your Path to Performance It starts with equipping yourself with the right tools to test your site’s speed and weight. There are countless platforms used for testing sites, however, there are only a handful that are capable of unlocking the insight that you need to support your most critical websites. Though PerfBuddy is a great place to start in order to identify potential roadblocks, it cannot do the work of actually improving site performance. By leveraging testing platforms such as Lighthouse, and continuously improving your performance metrics with assets such as DevTools, and strategies like Google’s PRPL, eCommerce retailers can ensure that their sites meet user expectations and promote their most critical business objectives. Need help? Contact This Dot Labs to learn more about how developing the tools and strategies to ensure optimal site performance can support scalable growth as you continue refining user experience!...

Tracy Lee4 mins
JavaScriptWeb PerformanceGeneral