React.js version 17 was released in October 2020 and introduced several new features and improvements. In this blog post, we’ll explore the major updates in React.js version 17.
No More Event Pooling
One of the most significant changes in React.js version 17 is the removal of the event pooling optimization. Previously, React.js used a technique called “event pooling” to reduce the number of event objects created by the browser. However, this technique had some drawbacks, such as preventing the use of asynchronous event handlers and making the code more difficult to reason about.
With React.js version 17, the event pooling optimization has been removed, and every event object is now a unique instance. This change allows developers to use asynchronous event handlers and makes it easier to reason about the behavior of event handling in React.js.
In our day and age, learning is more important than ever because things change so rapidly. I learned a taught a lot of things during my career which led me to discover that the best and the most effective learning method is to use MMAT: Motivation, Methodology, Action and Time.
After 2.5 years of starting my online school for software engineers Node University and growing it to one of the best resources on Node.js, APIs and AWS, I’m happy to announce the acquisition of Node University by the tech training company DevelopIntelligence. š°šš¾ I’ve known and worked with DevelopIntelligence for many years. They deliver outstanding in-person tech training to Fortune 500 companies. The synergies and future of combining in-person with online training are massive. I’m sure the new team will take Node University to the next level! š
A few years ago, I managed a team at DocuSign that was tasked with re-writing the main DocuSign web app which was used by tens of millions of users. The APIs didnāt exist yet to support our new shiny front-end app because since the beginning the web app was a .NET monolith. The API team in Seattle was taking the monolith apart and exposing RESTful APIs slowly. This API team consisted of just two engineers and had a release cycle of one month. Our front-end team in San Francisco released every week. The API team release cycle was so long because a lot of (almost all) the functionality had to be tested manually. Thatās understandable. It was a monolith without proper automated test coverage after allāwhen they modified one part, they never knew what can go wrong in other parts of the application.
I get this question very often: āWhat tools would you recommend for Node development?ā Software engineers love to optimize and increase productivity instead of wasting their time. I bet you are one of them! Read on to find out the best Node tools for development.
IDEs/code editors
Libraries
GUI tools
CLI tools
IDEs/code editors
When it comes to your primary tool, the code editor, I recommend sticking with lighter and simpler editors like Atom or VS Code instead of full-blown IDEs like Webstorm. Of course an IDE will do more for you but this comes with a learning curve and the need to configure. Node is interpreted, thus thereās no need to compile it. The files are just plain text files with the .js extension.
Hereās my list of the best Node editors:
Atom: created and maintained by GitHub; uses Electron, HTML, JS and CSS under the hood which makes it very easy to customize or add functionality; allows to have Git and terminal support via packages. Price: free.
VS Code: a newer addition; uses similar to Atom web-based tech; was created from Azureās Monaco editor; comes with debugging, smart autocomplete based on types, Git and terminal support. Price: free.
WebStorm: more of an IDE than an editor, developed by JetBrains and based on IntelliJ platform; has code assistance, debugging, testing, Git. Price: starts at $59/yr for individuals.
There are more options like Brackets, Sublime Text 3 and of course IDEs like Eclipse, Aptana Studio, NetBeans, Komodo IDE, and cloud-based like Cloud 9, Codenvy.
What to pick? Any of the three in the list is good choice. I have heard good things about VS Code and their smart autocomplete is a nice thing, but I didnāt find it a good enough reason for me to switch from Atom. So try VS Code and Atom and see which one you like more. Both of them offer a wide variety of packages and themes.
The most popular and useful libraries and project dependencies
Hereās the list of the most used and most popular modules which you would install as dependencies of your projects. Node developers use most of these modules (or alternatives) in almost all of their projects.
The libraries are listed with the npm names, so you can execute npm i {name} substituting {name} with the name of the package/module:
webpack: Builds static assets like browser JavaScript, CSS and even images. It allows to use node modules in the browser.
babel: Allows to code in the latest versions of JavaScript/ECMAScript without having to worry about your runtime by converting the new code to the code compatible with older versions of ECMAScript
async: Controls flow by running function concurrently, sequentially or any way you want
concurrently: Allows to execute CLI tools (local) as multiple processes all at the same time, e.g., webpack and node-static.
Note: Some of the libraries/tools listed above like webpack or mocha, can be installed globally instead of locally in your project folder. However, installing them globally is an old practice and currently is an anti-pattern because local installation allows developers to use multiple versions of the tool with different projects in addition to have these tools specified in package.json.
Of course there are a lot of different options in each category. For example, request and superagent are also extremely popular HTTP agent libraries. However, I donāt want to give too many options and confuse you with the differences, I listed only one tool (typically the one I use the most currently).
CLI tools (global)
Unlike the previous section, these tools are okay to install globally since most likely their version wonāt affect or break your project.
node-dev: Monitor and restart your Node app automatically on any file change within the current folder
node-inspector: Debug Node code in a familiar interface of DevTools (now part of Node starting with v7)
docker: Build and run Docker containers to isolate app environment, speed up deployment and eliminate conflicts between dev and prod (or any other) environments
curl: Make HTTP(S) requests to test your web apps (default for POSIX but can get for Windows too)
nvm: Change Node versions without having to install and re-install them each time
wintersmith: Build static website using Node templates and Markdown
pm2: Process manager to vertically scale Node processes and ensure fail-tolerance and 0-time reload
GUI tools
A good share of Node developers prefer GUI (graphical user interface) tools at least for some of the tasks because these tools require less typing and have features which makes them more productive and the development easier and simpler.
Postman: HTTP client with ability to save requests and history, change formats (JSON, form, etc.) and do other things
MongoUI: Modify and inspect your MongoDB data in a web interface. You can host this web app on your server to enable the database management.
Chrome: DevTools is a great way to inspect your requests, network, traffic, CPU profiles and other developer related data which is very useful for debugging
iTerm, itermocil and zsh: A better alternative to a native macOS Terminal app which together with itermocil and zsh increases productivity greatly
Recently I wrote a blog post and even created an online course on ES6/ES2015. Guess what? TC39āthe mighty overseer of JavaScriptāis moving forward with ES8 so letās cover ES7 and ES8 (or ES2016 and ES2017 officially). Luckily, they are much, much, much smaller than the best of a standard that was ES6. Really! ES7 has only two (2) features!
ES7 features:
Array.prototype.includes
Exponentiation Operator
ES8 is not finalized yet as of this writing (Jan, 2017) but we can assume all finished proposals (stage 4) and most of stage 3 (more on stages here and in my course). The finished 2017 (ES8) proposals are:
Object.values/Object.entries
String padding
Object.getOwnPropertyDescriptors
Trailing commas in function parameter lists and calls
Async Functions
I wonāt include stage 3 proposals in this post, but you can check the status of proposals from stage 1 to 3 here.
Letās dive deeper into the proposals and features…
Preact is a lightweight (just 3kb) alternative to React which has same interface (ES6), but better performance. Preact also has a few new features, i.e.,
Arguments props, state and context are passed to render()
I imported my AnalogDisplay component (original in React) into preact JSFiddle code, and they worked well. I can either use this.state or just state in render(). Here’s the JSFiddle code: http://jsfiddle.net/gz7L59mn/1/ and the source code:
This project will guide you through building an autocomplete function similar to the one that you might see in Slack (a popular messaging app), as shown in figure 1, when you type something in the search box. For simplicity, our widget will work with room names (the rooms in a chat application).
The autocomplete widget will have (figure 2):
An input field
A list of options filtered according to the entered characters
An Add button (figure 3)
The filtering of the matches will be done using the entered characters as the first characters of the option. In other words, there is a simple comparison that allows us to autocomplete the name of the room (figure X). For example, if you type “mac” and you have “Mac OS X” and “Apple Mac,” then only “Mac OS X” will be shown as a match, not both options.
In this book, Iāll introduce you to React Native for native mobile iOS and Android developmentā¦ and do it quickly. Weāll cover topics such as
Why React Native is Awesome
Setting up React Native Development for iOS
Hello World and the React Native CLI
Styles and Flexbox
Main React Native UI components
Importing Modules into an Xcode Project
Project: Timer
Project: Weather App
This book is about getting started with React quickly and not about React Native, which is technically a separate library (or some might even call it a framework). But I figured after eight chapters of working with React for web development, it would be fun to apply our knowledge to mobile development by leveraging this awesome library. Youāll be amazed how many React Native skills you already know from React.
This post has been written by Scott Hasbrouck. You can find him on TwitterĀ or his website.
Itās been nothing but wonderful to see JavaScript truly catch fire the past few years in web technology, ultimately becoming the most used language in 2016, according to StackOverflow data. My history with JavaScript began about 15 years ago, not all that long after it was first released as part of Netscape Navigator 2, in 1996. My most used learning resource was DynamicDrive, and their tutorials and code snippets of āDynamic HTMLā or DHTML – a term coined by Internet Explorer 4. Really, DHTML was a set of browser features implemented with JavaScript, CSS, and HTML that could get you nifty elements like rollover buttons and stock tickers.
Fasting forward to today, we now live in a world where JavaScript has grown to take over web technology. Not just in the browser, but it is now the most popular backend language according to that same StackOverflow report! Naturally, there are always those who dislike the language citing things like the ease of creating a global variable, or null being an object and undefined being its own datatype. But Iāve found that every language I pick up has quirks that are easily avoidable once you learn to properly use it. And we do want to become experts in our craft and truly learn to master our tools, do we not?
This essay was inspired by the Kyle Simpsonās series of books, You Donāt Know JavaScript. They are a good start with JavaScript fundamentals. Node is mostly JavaScript except for a few differences which Iāll highlight in this essay. The code is in the You Donāt Know Node GitHub repository under the code folder.
Why care about Node? Node is JavaScript and JavaScript is almost everywhere! What if the world can be a better place if more developers master Node? Better apps equals better life!
This is a kitchen sink of subjectively the most interesting core features. The key takeaways of this essay are:
Event loop: Brush-up on the core concept which enables non-blocking I/O
Global and process: How to access more info
Event emitters: Crash course in the event-based pattern
Streams and buffers: Effective way to work with data
Clusters: Fork processes like a pro
Handling async errors: AsyncWrap, Domain and uncaughtException
C++ addons: Contributing to the core and writing your own C++ addons
Event Loop
We can start with event loop which is at the core of Node.
It allows processing of other tasks while IO calls are in the process. Think Nginx vs. Apache. It allows Node to be very fast and efficient because blocking I/O is expensive!
Take look at this basic example of a delayed println function in Java:
This is an excerpt from React Quickly (Manning, 2016). You can download the entire first chapter for free at Manning. The book is scheduled for release in the first quarter of 2016, but MEAP is available right now. Use code “mardandz” to get 39% off.
The project for this article will be minimal. The idea is to have a dynamically generated menu which will consist of <a> tags.
Weāll use custom React components Menu and Link. They way we create them is similar to the way we create the HelloWorld component in the previous example. The project will show you how to render nested elements programmatically. In the previous examples, we just coded the children manually. Weāll use the map() function for it.
Also, you can download the entire first chapter for FREE at Manning. The book is scheduled for release in the first quarter of 2016, but early access (e-copy) is available right now. Use code “mardandz” to get 39% off at Manning.
My new book Full Stack JavaScriptĀ (my 4th traditionally-published book) comes with a series of screencast videos for better immersion in a wonderful and mesmerizing world of Node.js, Backbone and MongoDB. It’s a one thing to read through the text and another to follow up with dynamic videosĀ which walk you through the book’s projects.
The videos and the source code are open source, meaning they areĀ publicly available. Therefore, you don’t have to buy a bookāyou can just watch the 14 videos on YouTube (playlist) and go through the code on GitHub (repository).
React is a fun little library for User Interfaces. You can use it for web, or mobile development. Itās fun because itās very developer-friendly. You write your code in the same place without having to switch between HTML and JavaScript files.
Iāve heard many times people complaining about Reactās favorite syntax JSX. I found it great, after I spent a few hours learning and coding with it. Contrary to what people unfamiliar with React think, JSX is not HTML in JavaScript. JSX is just an XML-like syntax which produces JavaScript. Thereās not HTML involved at this step. When you develop with React, you write JavaScript objects. Later React automagically transforms those object into rendered HTML.
Also, React is very fast due to its virtual DOM and smart diffing algorithm. And Reactās component approach to architecture allows for great development scalability. Just ask Facebook, Twitter, Slack and other companies with large web apps.
Furthermore, you can use React with React Native to create native iOS and Android apps. These apps can share the same code. Itās not the same as the so called hybrid or HTML5 apps. The latter are websites trapped into a headless browser in a mobile app. The former is a real native app which uses JavaScript interface for itās UIs and logic.
Hey, you can even use live reloading when developing apps with React Native. Pure joy! The feature native mobile developers can only dream of! āReact is fun, but show me the moneyāā you can yell. Fair enough.
Have you ever wanted to learn basics of Node.js and the most popular Node.js web framework Express.js? If you are experienced web developer or software engineer who wants to learn Node.js and build some servers along the way, then this self-study workshop is for you.
What is ExpressWorks? It’s an automated tool which allows to learn Express.js from the author of one of the best books on Express.jsāPro Express.jsā with this workshop that will teach you basics of Express.js and building Node.js web apps (a.k.a. servers).
You will walk through adventures via command-line interface. Each adventure has a problem, hints, and the solutions.
I recently went to HTML5 Dev conference in San Francisco. Half of the talks I went to were about ES6 or, as itās now called officially, ECMAScript2015. I prefer the more succinct ES6 though.
This essay will give you a quick introduction to ES6. If you donāt know what is ES6, itās a new JavaScript implementation. If youāre a busy JavaScript software engineer (and who is not?), then proceed reading to learn the best 10 features of the new generation of the most popular programming languageāJavaScript.
Hereās the list of the top 10 best ES6 features for a busy software engineer (in no particular order):
Last week, I attended the HTML5Dev conference in San Francisco which was just across from Capital One SF office at 201 3rd St. The conference was split across a few building which made it hard to navigate and find talks.
The whole conference was along the lines of React is amazing, ES6 is the future and Node.js is everywhere. There were a few talks on the Internet of Things, design, UX and HTTP/2 as well. Hereās the recap of the talks to which I went to.
Node.js/Io.js is a non-blocking I/O platform based on the JavaScript language. It has been capturing the hearts and minds of software developers for the past couple of years. It has been doing this not only for developers in startups And small companies, but more interestingly for enterprise developers as well. For example, PayPal, LinkedIn, Walmart, Netflix, eBay, Uber and other tech giants switched from Java and the likes to Node. Its popularity is attributed to better performance and having one language (JavaScript) for all layers: back-end, database and front-end.
As with any new platform, there are a lot of Node.js/Io.js frameworks to choose from. However, before we proceed, we need to define what enterprise means. For the sake of simplicity, an enterprise project is one where you have teams of more than 10 developers working on it, where you have huge traffic to handle and high stakes, meaning the services must be running 24x7x365.
Judging frameworks is highly subjective. When it comes to building enterprise-level applications, we need to consider some of the following things:
Best practices and patterns: Whether the framework is DIY or provides clear patterns to use.
Configuration: How easy it is to configure the framework.
Convention: Is there a convention to follow if that’s the preferred route?
Horizontal scaling: How easy it is to scale apps built with this framework.
Testing: How to test the application.
Scaffolding: How much developers have to code manually vs. using built-in code generators.
Monitoring: How to monitor the application
Track record: How proven a framework is, i.e., who supports it and how well it is maintained.
Integration: How rich the ecosystem of plugins/connectors is.
ORM/ODM: Is there an object relational/document mapper.
While performance is important, it varies on the requirements and business logic of a particular project. Running meaningful benchmark tests is non-trivial.
The main focus of this post is to compare the four Node.js/Io.js frameworks: Hapi, Kraken, Sails.js and Loopback.
I hated Jade as many other Node.js developes do. Ā But I changed 180 after I realized that it has tons of features.
At Storify and DocuSign we used Jade for EVERYTHING. We used Jade even in the browser. There is a little trick called jade-browser. It was developed by folks at Storify. I maintained it for a bit.
The funny thing is that DocuSign team used jade-browser long before they met me. They swear they hired me without knowing that I was involved in that library. :-)
Anyway, after covering Jade and HandlebarsĀ in previous posts, it’s time to apply them to do some real work. In this post, I’ll cover: