Function as Child Components

Merrick Christensen

Classic Ryan, “Rethinking Best Practices” anyone? If you don’t know what the “Function as Child” pattern is, this article is my attempt to:

  1. Teach you what it is.
  2. Convince you of why it is useful.
  3. Get some fetching hearts, or retweets or likes or newsletters or something, I don’t know. I just want to feel appreciated, you know?

What are Function as Child Components?

“Function as Child Component”s are components that receive a function as their child. The pattern is simply implemented and enforced thanks to React’s property types.

class MyComponent extends React.Component { 
  render() {
    return (
        {this.props.children('Scuba Steve')}
MyComponent.propTypes = {
  children: React.PropTypes.func.isRequired,

That is it! By using a Function as Child Component we decouple our parent component and our child component letting the composer decide what & how to apply parameters to the child component. For example:

  {(name) => (

And somebody else, using the same component could decide to apply the name differently, perhaps to an attribute:

  {(name) => (
    <img src=’/scuba-steves-picture.jpg’ alt={name} />

What is really neat here is that My Component, the Function as Child Component can manage state on behalf of components it is composed with, without making demands on how that state is leveraged by its children. Lets move on to a more realistic example.

The Ratio Component

The Ratio Component will use the current device width, listen for resize events and call into its children with a width, height and some information about whether or not it has computed the size yet.

First we start out with a Function as Child Component snippet, this is common across all Function as Child Component’s and it just lets consumers know we are expecting a function as our child, not React nodes.

class Ratio extends React.Component {
  render() {
    return (
Ratio.propTypes = {
 children: React.PropTypes.func.isRequired,

Next lets design our API, we want a ratio provided in terms of X and Y axis which we will then use the current width to compute, lets set up some internal state to manage the width and height, whether or not we have even calculated that yet, along with some prop Types and default Props to be good citizens for people using our component.

class Ratio extends React.Component {
  constructor() {
    this.state = {
      hasComputed: false,
      width: 0,
      height: 0, 
  render() {
    return (
Ratio.propTypes = {
  x: React.PropTypes.number.isRequired,
  y: React.PropTypes.number.isRequired,
  children: React.PropTypes.func.isRequired,
Ratio.defaultProps = {
  x: 3,
  y: 4

Alright so we aren’t doing anything interesting yet, lets add some event listeners and actually calculate the width (accommodating as well for when our ratio changes): For Web designing services check Vivid Designs

class Ratio extends React.Component {
  constructor() {
    this.handleResize = this.handleResize.bind(this);
    this.state = {
      hasComputed: false,
      width: 0,
      height: 0, 
  getComputedDimensions({x, y}) {
    const {width} = this.container.getBoundingClientRect();
return {
      height: width * (y / x), 
  componentWillReceiveProps(next) {
  componentDidMount() {
      hasComputed: true,
    window.addEventListener('resize', this.handleResize, false);
  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize, false);
  handleResize() {
      hasComputed: false,
    }, () => {
        hasComputed: true,
render() {
    return (
      <div ref={(ref) => this.container = ref}>
        {this.props.children(this.state.width, this.state.height, this.state.hasComputed)}
Ratio.propTypes = {
  x: React.PropTypes.number.isRequired,
  y: React.PropTypes.number.isRequired,
  children: React.PropTypes.func.isRequired,
Ratio.defaultProps = {
  x: 3,
  y: 4

Alright, so I did a lot there. We added some event listeners to listen for resize events as well as actually computing the width and height using the provided ratio. Neat, so we’ve got a width and height in our internal state, how can we share it with other components?

This is one of those things that is hard to understand because it is so simple that when you see it you think, “That can’t be all there is to it.” but this is all there is to it.

Children is literally just a JavaScript function.

That means in order to pass the calculated width and height down we just provide them as parameters:

render() {
    return (
      <div ref='container'>
        {this.props.children(this.state.width, this.state.height, this.state.hasComputed)}

Now anyone can use the ratio component to provide a full width and properly computed height in whatever way they would like! For example, someone could use the Ratio component for setting the ratio on an img:

  {(width, height, hasComputed) => (
      ? <img src='/scuba-steve-image.png' width={width} height={height} /> 
      : null

Meanwhile, in another file, someone has decided to use it for setting CSS properties.

  {(width, height, hasComputed) => (
    <div style={{width, height}}>Hello world!</div>

And in another app, someone is using to conditionally render different children based on computed height:

  {(width, height, hasComputed) => (
    hasComputed && height > TOO_TALL
      ? <TallThing />
      : <NotSoTallThing />


  1. The developer composing the components owns how these properties are passed around and used.
  2. The author of the Function as Child Component doesn’t enforce how its values are leveraged allowing for very flexible use.
  3. Consumers don’t need to create another component to decide how to apply properties passed in from a “Higher Order Component”. Higher Order Components typically enforce property names on the components they are composed with. To work around this many providers of “Higher Order Components” provide a selector function which allows consumers to choose your property names (think redux-connects select function). This isn’t a problem with Function as Child Components.
  4. Doesn’t pollute “props” namespace, this allows you to use a “Ratio” component and a “Pinch to Zoom” component together regardless that they are both calculating width. Higher Order Components carry an implicit contract they impose on the components they are composed with, unfortunately this can mean colliding prop names being unable to compose Higher Order Components with other ones.
  5. Higher Order Components create a layer of indirection in your development tools and components themselves, for example setting constants on a Higher Order Component will be unaccessible once wrapped in a Higher Order Component. For example:  Web development company in Hyderabad visit Vivid Designs 
MyComponent.SomeContant = ‘SCUBA’;

Then wrapped by a Higher Order Component,

export default connect(...., MyComponent);

RIP your constant. It is no longer accessible without the Higher Order Component providing a function to access the underlying component class. Sad.


Most the time when you think “I need a Higher Order Component for this shared functionality!” I hope I have convinced you that a Function as Child Component is a better alternative for abstracting your UI concerns, in my experience it nearly always is, with the exception that your child component is truly coupled to the Higher Order Component it is composed with.

An Unfortunate Truth About Higher Order Components

As an ancillary point, I believe that Higher Order Components are improperly named though it is probably to late to try and change their name. A higher order function is a function that does at least one of the following:

  1. Takes n functions as arguments.
  2. Returns a function as a result.

Indeed Higher Order Components do something similar to this, namely take a Component as and argument and return a Component but I think it is easier to think of a Higher Order Component as a factory function, it is a function that dynamically creates a component to allow for runtime composition of your components. However, they are unaware of your React state and props at composition time!

Function as Child Components allow for similar composition of your components with the benefit of having access to state, props and context when making composition decisions. Since Function as Child Components:

  1. Take a function as an argument.
  2. Render the result of said function.

I can’t help but feel they should have gotten the title “Higher Order Components” since it is a lot like higher order functions only using the component composition technique instead of functional composition. Oh well, for now we will keep calling them “Function as Child Components” which is just wordy and gross sounding.


  1. Pinch to Zoom — Function as Child Component
  2. react-motion — This project introduced me to this concept after being a long time Higher Order Component convert.

The Ugly

Since Function as Child Components give you this power at render time, you typically can’t optimize them using should Component Update without hindering your composition ability

However, even Dan Abramov, the Benevolent Leader Of Whatever We Are Going To Be Doing Next, has acknowledged the grey area:

I have personally not found it a hinderance to our application’s performance since Function as Child Components are passthrough components to be composed with children it doesn’t know about anyhow. Higher Order Components find themselves in a similar situation as they are often designed to take unknown properties as well and therefore need to do “as good as we can or pass through” optimizations such as shallow equals which you can find in react-redux.

One does not simply learn to code

Quincy Larson

One does not simply learn to code. Because coding isn’t easy. Coding is hard. Everyone knows that. Anyone who’s scoured a stack trace — or git detached their head — can tell you that.

Unfortunately, there are a lot of marketers out there trying to cash in on the notion that “coding is easy!” Or that it will be, if you use their product.

When someone tells you that coding is easy, they are doing you a huge disservice. This can really only play out in one of three ways:

Scenario 1

Person 1: “I tried to learn to code once. I had a hard time. Life got in the way, and I am no longer trying to learn to code.”

Marketer: “Coding is easy!”

Person 1: “What? Oh. Maybe coding is easy after all. Maybe I’m just dumb.”

Scenario 2

Person 2: “I want to learn to code, but it sounds hard.”

Marketer: “Coding is easy!”

Person 2: “Really?”

Marketer: “Yes. Buy my course/program/e-book and you’ll be an elite coder in less than a month.”

Person 2:

Shut up and take my money!

Person 2, one month later: “I thought coding was supposed to be easy. Maybe I’m just dumb.”

Scenario 3

Person 3: I have no interest in ever learning to code. I’m a successful manager. If I ever need something coded, I’ll just pay someone to code it for me.

Marketer: Coding is easy!

Person 3: Oh, OK. Figures. In that case, I guess I won’t pay those code monkeys very much, or hold their work in very high regard.

Brain surgery is easy

Saying “Coding is easy!” is like saying “Brain surgery is easy!” Or saying “Writing novels is easy!” For Best Website deign services check Vivid Designs 

A brain surgeon at a dinner party says to novelist Margret Atwood: “I’ve always wanted to write. When I retire and have the time, I’m going to be a writer.”

Margret Atwood replies: “What a coincidence, because when I retire, I’m going to be a brain surgeon.”

And yet, marketers continue to say: “Coding is easy!”, “Coding isn’t that hard!”, or my personal favorite, “Coding is easy! It’s the <something that makes coding hard> that’s hard!”

And all that these marketers achieve in saying this is to make people feel dumb — sometimes taking their money in the process.

The curse of knowledge

Unfortunately, it’s not just marketers who say coding is easy. I meet experienced developers all the time who also say “coding is easy!”

Why would someone who’s gone through the thousands of hours it takes to get good at coding say that coding is easy? Because they’re suffering from a cognitive bias called the curse of knowledge. They cannot remember what it was like to not know how to code. And even if they can, they’ve probably long forgotten how hard coding was for them at first.

The curse of knowledge prevents many experienced developers from being able to empathize with beginners. And nowhere is this lack of empathy more apparent than everyone’s favorite Google result: the coding tutorial.

How many times have you actually been able to finish a random tutorial you found through Google, without getting derailed by some cryptic error or ambiguity?

And the worst thing about this process is when tutorial authors unconsciously pepper their instructions with words like “obviously” “easily” and most mocking of all: “simply.”

Nothing is more frustrating than being 30 minutes into a tutorial and getting stuck on a step that says “simply integrate with Salesforce’s API,” or “simply deploy to AWS.”

And when this happens, the voice of a thousand marketers echoes through your head: “Coding is easy!”

You’ll remember those experienced developers you met a few weeks ago who tried their best to encourage you by saying: “Coding is easy!”

You’ll even have flashbacks of all those bad Hollywood hacking scenes where they make coding look so easy.

Before you know it, you’ll suddenly hear the sound of your own voice screaming, feel your body rising to its feet and (╯°□°)╯︵ ┻━┻

But it’s OK. Take a deep breath. Coding isn’t easy. Coding is hard. Everyone knows that.

Coding in real life VS coding in the movies

Still, you’ll yearn for those l33+ h@x0r skills. You’ll feel impelled to vanquish bugs with nothing but your wits — and a gratuitous number of green-on-black monitors.

So let’s chase that dragon. Let’s be that elite Hollywood programmer. If only for a moment, let’s feel what that’s like. Web designing services in Hyderabad visit Vivid Designs

Here we go:

Step 1: Turn out the lights, pop your collar, put on some aviator sunglasses

Step 2: Guzzle an energy drink, crush the can, and chuck it over your shoulder

Step 3: Go here and bang on your keyboard as fast as humanly possible

Power fantasy fulfilled.

Do you feel better? Are you laughing at the absurdity of our collective construct of software development?

Now that we’ve gotten that out of our system, let’s talk about the most insidious word in the English language.

Nothing is ever simple

There’s a good chance that if you encounter a word like “simply” in a tutorial, that tutorial will assume a lot about your prior knowledge.

Maybe the author assumes that you’ve previously coded something similar and are just using their tutorial as a reference. Maybe the author wrote the tutorial with themselves in mind as their target audience.

Either way, there’s a good chance that the tutorial will not be designed for someone at your exact level of coding skills.

Hence the “rule of simply”:

Don’t use the word “simply” in your tutorials, and don’t use tutorials that use the word “simply.”

Learn it. Know it. Live it.

Unfortunately, twenty minutes into a desperate Googling session, you are unlikely to remember that you should search the tutorial page to see whether its author presumptively uses words like “simply.”

Well, we’ve got you covered. Albert Meija has created a Chrome extension that will detect the word “simply” in a tutorial and will pop up a notice that the tutorial isn’t designed for beginners.

This Chrome Extension serves as a proverbial canary in the coal mine, notifying you of the presence of the word “simply” — and thus likely assumptions about your prior knowledge — before you get too far into the tutorial.

Albert built this chrome extension in just a few hours, in response to a challenge I tweeted out. Here are some of the other entries from Free Code Camp campers, whose extensions do similar things:

We could certainly take these chrome extensions further. Maybe use Natural Language Processing to produce a more accurate assessment of the relative difficulty of a given tutorial, or its “presumptive index.”

But in the meantime, this simple extension may steer you clear of those ship-sinking “simply” icebergs out there in the chilly ocean that is learning to code.

Until we meet again — stay strong and don’t believe the hype. Learning to code is hard. Tune out the noise, stick with it, and profit.

Cracking the front-end interview

Technical front-end interviews are difficult. That’s a fact. Not only do you need to have a solid grasp of computer science fundamentals, but also an understanding of things like web performance, build systems, and CSS layout engines.

While there are resources out there, I’ve found that there are only a few complete guides for helping you prepare for a front-end interview. So I decided to write a topic by topic outline that will hopefully help you ace your next interview.

Before the interview

So before your interview, ask your recruiter for the format of the interview. Some interviews might revolve around a whiteboard while others might use an online text editor like CoderPad. It’s important to know so you can practice in the environment that your interview is going to take place in. For Best web design company check Vivid Designs 

Also, ask your recruiter for tips on what topics to focus on when preparing. The reason behind this is because in addition to front-end specific question, some companies will ask you traditional computer science questions about topics like searching and sorting algorithms.

Front-end concepts

HTML and CSS, Javascript, and Javascript design patterns are the key concepts that you will be tested on during an interview. Go through the list and make sure you are comfortable with each topic.

HTML and CSS is like the bread and butter of front-end development. During interviews, you will most likely be asked questions about the nuances of HTML and CSS. Also, be prepared to be asked to code up a layout based on a mockup.

Just in case you need an HTML and CSS refresher, here are a few basic concepts to look over.

  • CSS animations
  • CSS sprites
  • Pseudo classes
  • Grid systems
  • Semantic markup

In addition to these concepts, know about CSS preprocessors like SASS or LESS and their benefits. Also be familiar with CSS naming conventions like BEM and OOCSS.

Another important point is that interviewers look for candidates who champion CSS best practices. As a good reference, this guide written by a front-end at Medium provides insight into how Medium iterated to their current CSS architecture.

I mentioned earlier that some interviewers will ask you to recreate layouts in HTML and CSS. Practice doing so in a playground like CodePen. Check out Dribbble since it has lots of simple yet nice designs that would be fun to recreate.

Finally, as front-ends, we are so used to making changes in our editor and then verifying the change in our browser. Often times during interviews, you won’t have this luxury. When you’re preparing for your interview, try code most of your layout without looking at the result till the end.

If HTML and CSS are the bread and butter of front-end development, then Javascript is the knife. Companies will spend a good amount of time during your interview testing your knowledge of Javascript. A lot of the questions will revolve around the following concepts.

  • Prototypal inheritance
  • Scoping
  • Closures
  • The event loop
  • Event bubbling
  • Apply, call, and bind
  • Callbacks and promises
  • Variable and function hoisting
  • Currying

When given a Javascript question, figure out which of these concepts you’re being tested on and it’ll be much easier to figure out the right solution. If you feel confident of your Javascript prowess, test your knowledge here, here, and here.

Design patterns in Javascript provide you with repeatable solutions to common problems. These are a few of the design patterns that are important to know.

  • Decorator
  • Factory
  • Singleton
  • Revealing module
  • Facade
  • Observer

Asides from Javascript design patterns, it’s good to be familiar with Javascript frameworks. This does not mean that you have to go learn another framework before your interview. Instead, know when and why front-end teams use frameworks. Also, if you’re interviewing for something like a React + Flux or an Angular position, review some of the documentation for the architecture of the framework beforehand. For Web designing services in Hyderabad visit Vivid Designs 

Computer science concepts

Some companies hire software engineers before front-end developers. What this means is that these companies expect you to be well grounded in topics like good software design principles, scalable code architecture, and testing.

If your recruiter suggests you review your knowledge of data structures and algorithms, this section is for you. Otherwise, feel free to skip this section. If you don’t have a computer science background, that’s okay. Most of these concepts are pretty straightforward to learn.

These are the basic data structures that I would suggest knowing off the top of your head. Don’t just read about them, take the time to implement them in Javascript as well. If you’re not familiar with unit testing, test your data structure with a library like Mocha to learn.

  • Linked lists
  • Hashtables
  • Stacks and queues
  • Trees (binary trees and heaps)
  • Graphs

Note: For graphs, also know how to implement depth-first and breadth-first search traversals.

For implementations of these data structures, you can take a look at SanFoundry. All their examples are in Java but re-implementing them in Javascript is pretty easy.

Once you feel confident about data structures, you can move onto sorting. Go through the list, implement them in Javascript, and then make note of their time and space complexity.

  • Binary search
  • Bubble sort
  • Insertion sort
  • Merge sort
  • Quick sort
  • Selection sort

After reviewing data structures and algorithms, test your knowledge with Leetcode and these technical Javascript questions.

Wrapping it up

I know it’s a lot of material to take in, especially if you’re new to front-end development. Start preparing for your interview ahead of time, so you can move at a comfortable pace.

Also, remember that interviews are not a measure of your worth as a programmer. Some people are good at interviews, other are not. Sometimes you click with your interviewer, other times you don’t.

If you have any questions, feel free to leave a note or Tweet out to me. I would also love to know how your interview experience went. Good luck!

P.S. If you liked this article, it would mean a lot if you hit the recommend button or share with friends.



When should I use TypeScript?

This article is now available in Japanese and Chinese.

Last summer we had to convert a huge code base (18,000+ lines of code) from JavaScript to TypeScript. I learned a lot about the strengths and weaknesses of each, and when it makes sense to use one over the other.

When it makes sense to use TypeScript When you have a large codebase When your codebase is huge, and more than one person works on the project, a type system can help you avoid a lot of common errors. This is especially true for single-page applications.

Any time one developer could introduce breaking changes, it’s generally good to have some sort of safety mechanism.

The TypeScript transpiler reveals the most obvious mistakes — though it won’t magically eliminate the need for debugging.

If your codebase isn’t all that big, it probably doesn’t make sense to make it larger by adding type annotations. I’ve converted 180+ files from JavaScript to TypeScript, and in most cases it added roughly 30% to the total code size.

When your team’s developers are already accustom to statically-typed languages If you or the majority of the team come from a strongly typed language like C# or Java, and don’t want to go all-in on JavaScript, TypeScript is a good alternative. For Best web design company check Vivid Designs

Even though I recommend learning Javascript thoroughly, there’s nothing preventing you from using TypeScript without knowing JavaScript. In fact, TypeScript was created by the same guy who made C#, so the syntaxes are similar.

In my company, we had a team of C# developers who were coding a sophisticated desktop application in C# and WPF (which is basically a front end development tool for the desktop world). They were then asked to join a web project as full stack developers. So in short order, they were able to learn TypeScript for the front end, then leverage their C# knowledge for the back end.

TypeScript can serve as a replacement for Babel The old Microsoft used to take standard tools — Java for example — and add proprietary non-standard features to them — in this case resulting in J++. Then they would try to force developers to choose between the two.

TypeScript is exactly the same approach — this time for JavaScript. By the way, this isn’t Microsoft’s first fork of JavaScript. In 1996, they forked JavaScript to create JScript.

Though it’s is a less-common use case, it’s technically possible to transpile ES6 code into ES5 using the TypeScript transpiler. This is possible because ES6 is essentially a subset of TypeScript, and the TypeScript transpiler generates ES5 code.

Typescript’s transpiler generates pretty readable Javascript (EcmaScript 5) code as output. That was one of the reasons why the Angular 2 team chose TypeScript over Google’s own Dart language.

Also, TypeScript has some cool features that are not in ES6, like enums and the ability to initialize member variables in a constructor. I’m not a big fan of inheritance, but I find it useful to have the public, private, protected, and abstract keywords in classes. TypeScript has them and ES6 doesn’t.

Our C# developers thought it was super amazing to be able to write a lambda function as the body of a method — which eliminated the headaches associated with the this keyword.

When a library or framework recommends TypeScript If you are using Angular 2 or another library that recommends TypeScript, go for it. Take a look at what these developers have to say after using Angular 2 for six months.

Just know that — even though TypeScript can use all JavaScript libraries out of the box — if you want good syntax errors, you’ll need to add the type definitions for those libraries externally. Fortunately the nice guys at DefinitelyTyped have built a community-driven repo with tooling for doing just that. But this is still one extra step when you’re setting up your project

(On a side note: for all you JSX fans, check out TSX.)

When you really feel the need for speed This may come as a shock to you, but the TypeScript code can in some situations perform better than JavaScript. Let me explain.

In our JavaScript code, we had a lot of type checks. It was a MedTech app, so even a small error could be literally fatal if it wasn’t dealt with properly. So a lot of functions had statements like:

if(typeof name !== ‘string) throw ‘Name should be string’ With TypeScript, we could eliminate a lot of these type checks all together.

This especially showed its effect in parts of the code where we previously had a performance bottleneck, because we were able to skip a lot of unnecessary runtime type checking.

So when are you better off without Typescript? When you can’t afford an extra transpilation tax There are no plans to support TypeScript natively in the browsers. Chrome did some experiment, but later cancelled support. I suspect this has something to do with unnecessary runtime overhead.

If someone wants training wheels, they can install them. But bikes shouldn’t come with permanent training wheels. This means that you will always have to transpile your TypeScript code before running it in a browser.

For standard ES6, it’s a whole different story. When ES6 is supported by most browsers, the current ES6 to ES5 transpilation will become unnecessary (update: yes indeed!).

ES6 is the biggest change to the JavaScript language, and I believe most programmers will just settle with it. But those brave few who want to try the next version of JavaScript’s experimental features, or the features not yet implemented on all browsers — they will need to transpile anyway.

Without transpilation, you just modify the file and refresh your browser. That’s it. No watching, transpiling on demand, or build system are necessary.

If you choose TypeScript, you will end up doing some extra bookkeeping for the type definitions for your Javascript libraries and frameworks (by using DefinitelyTyped or writing your own type annotations). That’s something you wouldn’t need to do for a pure JavaScript projects. Top web development company in Hyderabad visit Vivid Designs

When you want to avoid weird debugging edge cases Sourcemaps make it easier to debug Typescript, but the status quo is not perfect. There are really annoying and confusing edge cases.

Also, there are some problems debugging the “this” keyword and properties attached to it (hint: “_this” works in most cases). That is because Sourcemaps currently don’t have a good support for variables — though this may change in the future.

When you want to avoid potential performance penalties In our project, we had 9,000+ lines of good old ES5 JavaScript that delivered pure horse power to a 3D WebGL canvas. We kept it that way.

The TypeScript transpiler (just like Babel) has features that require generating extra code (inheritance, enum, generics, async/await, etc). No matter how good your transpiler is, it can’t surpass the optimizations of a good programmer. So we decided to keep it in plain ES5 for ease of debug and deployment (no transpilation whatsoever).

That being said, the performance penalty is probably negligible compared to benefits of a type system and more modern syntax for most projects. But there are cases where milliseconds and even microseconds matter, and in those cases transpilation of any kind is not recommended (even with Babel, CoffeeScript, Dart, etc.).

Note that Typescript doesn’t add any extra code for runtime type checking. All the type checking happens at transpile time and the type annotations are removed from the generated Javascript code.

When you want to maximize your team’s agility It’s quicker to set up something in JavaScript. The lack of a type system makes for agility and ease of changing stuff. It also makes it easier to break things, so make sure you know what you’re doing.

Javascript is more flexible. Remember one of the main use cases for a type system is to make it hard to break stuff. If Typescript is Windows, Javascript is Linux.

In JavaScript Land, you don’t get the training wheels of a type system, and the computer assumes you know what you’re doing, but allows you to ride much faster and maneuver easier.

This is particularly important to note if you’re still in the prototyping phase. If so, don’t waste your time with TypeScript. JavaScript is so much more flexible.

Remember that TypeScript is a superset of JavaScript. This means that you can easily convert JavaScript to TypeScript later if you need to.

My preference on JavaScript VS TypeScript There is no one best language overall. But for each individual project, there is probably one objectively best language and library and framework and database and operating system and… you get the picture.

For our project it made sense to use TypeScript. I tried to refactor some of my hobby projects in TypeScript but it sucked. I personally like 4 things about TypeScript:

1 It’s fully compatible with ES6. It is really nice seeing Microsoft playing fair with the other browsers. Our ecosystem can benefit from a strong rival to Google, Mozilla, and Apple. Microsoft is spending serious energy on it — such as writing Visual Studio Code from scratch using TypeScript on Google Chrome, of all platforms.

2 The type system is optional. Coming from a C and Java background, I found the lack of type system in JavaScript liberating. But I hated losing time when I encountered stupid bugs during runtime. TypeScript allows me to avoid many common bugs so I can focus my time on fixing the real tricky ones. It’s a good balance. I like it. It’s my taste. I use types whenever I can because it gives me peace of mind. But that’s me. If I use TypeScript, I don’t want to limit myself to its ES6 features.

3 The transpiler output is very readable. I am not a fan of Sourcemaps, so I do most of my debugging on the generated JavaScript. It’s absolutely awesome. I can totally understand why Angular 2 chose TypeScript over Dart.

4 TypeScript’s tooling is fantastic. WebStorm is very smart when dealing with JavaScript (some may argue it’s the smartest JS IDE). But TypeScript pushes the limits to a whole new level. The autocompletion and refactoring features in VSCode work much more accurately, and it’s not because the IDE is super smart. That’s all thanks to TypeScript.

Typescript is not the answer for everything. You can still write terrible code in it.

TypeScript haters are gonna hate, either because of fear of change or because they know somebody who knows somebody who is afraid of it. Life goes on and TypeScript introduces new features to its community anyway.

But like React, TypeScript is one of those influential technologies that is pushing the boundaries of our web development.

Whether you use TypeScript or not, it doesn’t hurt to try it out in order to develop your own opinions on it. It has a learning curve, but if you already know JavaScript, it will be a smooth one.

Here is an online realtime TS transpiler with some examples that let you compare TypeScript code with its equivalent JavaScript code.

Here is a quick tutorial, and a very nice guide, but I’m more a language-reference kinda guy. If you like video, here’s a course from Udemy.

John Papa has a a short article about ES5 and TypeScript.

There’s an interesting study that shows all things equal, a type system reduces bugs by 15%.

Oh, and if you feel like going on a side mission, read why programming is the best job ever.


Jaguar XE Facelift Test Drive & Transmission

Jaguar XE Overview

The Jaguar XE is the British marque’s first full-bodied attempt at taking on the big German three in the compact luxury sedan game; a game that’s currently being dominated by the Mercedes-Benz C-Class, the Audi A4 and the BMW 3 Series. Designed by Ian Callum and underpinned by an all-new aluminium intensive modular platform, the XE is positioned as the most driver focused car in this class by Jaguar. And so the car on test here is a 200bhp plus, petrol version of the sedan. How does it do? We find out. For information on contact details of Jaguar car dealers in New Delhi

Check for Jaguar XE Price in Ahmedabad at CarzPrice

Jaguar XE Exterior & Look

The Jaguar XE, in the released publicity material and spy shots, looks exactly like the larger XF and the flagship XJ. This is a common practice among all the manufacturers partly due to economies of scale and partly due to the fact that it is easy for them to adapt a successful design across all their models to retain familiarity of product.

The Jaguar XE will get a smaller version of the XF’s massive chrome mesh grille complete with the leaping cat. Standard features are expected to be projector headlights, LED daytime lights and projector fog lamps. We even expect that the bumper will remain the same but with a higher ground clearance.

The side profile is also similar to that of the XF in terms of roof line, flared wheels arches and the rake angle of the roof line both in the front and back. However, while the boot will have similar design elements as the XF and XJ-like tail lamp cluster and chrome strips, it appears to be far smaller (in relation to the larger cars). The rear bumper is expected to be a little sportier and will be complemented by dual exhausts.

Jaguar XE Interior & Space

The five-seat Jaguar XE has standard power-adjustable front seats and leatherette upholstery. Higher trims add leather upholstery, heated and ventilated front seats, heated rear seats, and front sport seats with added side bolsterinThe front seats are comfortable enough to keep the driver and front passenger content, even on long trips. The side bolsters aren’t particularly supportive, however, so it’s possible you may slide around a bit while taking corners. You can get optional sport seats with more side bolstering to better hold you in place. The back seats have enough room to accommodate two adults for short trips, but the limited head- and legroom will make tall adults feel cramped. Buy the Audi A4 or the larger Jaguar XF for more back-seat room.

The XE’s cabin doesn’t quite match the level of quality most buyers expect from a Jaguar. Where most German competitors have top-notch materials, the XE has a mixture of hard plastics and nicer materials. The XE’s cabin feels more competitive with a much lower-priced affordable sedan than a luxury model.The XE has 15.9 cubic feet of trunk space, which is above average for the class and competitive with the cargo capacities of some midsize sedans. (The Audi A4 and BMW 3 Series only have 13 cubic feet each.) Unfortunately, it’s hard to utilize all that space. The opening isn’t very large, and the trunk itself is fairly narrow, so hauling wide items may be difficult.

The XE is available with two different infotainment systems: a standard 8-inch model and another with a 10.2-inch screen. They both have their own strengths and weaknesses. With the more basic, standard system, you should have no trouble navigating the menus or finding the digital buttons you need. Plus, there are physical controls for some commonly used features. The 8-inch system can be slow to respond to inputs, however, and it doesn’t have as many high-tech features as the larger system.The 10.2-inch screen has sharper graphics than the smaller screen, and it’s faster too. It can also recognize smartphonelike gestures, including pinching and swiping. But the optional system absorbs most of the car’s physical controls, which means you’ll have to sort through more menus with more buttons to access the systems you want.

Jaguar XE Engine & Transmission

Now that Jaguar has released information on U.S. XE models, we now know what engines will be available in the U.S. market. The XE 25t comes with a turbocharged, 2.0-liter, four-cylinder – already seen in other Jaguar Land Rover vehicles — that puts out 240 horsepower 251 pound-feet of torque. For those diesel fans, the XE 20d delivers with a 180 horsepower, 2.0-liter diesel engine that also pushes 318 pound-feet of torque. The range topping model – the XE 35t – comes with a 3.0-liter, supercharged, V-6 that puts out a respectable 340 horsepower and 332 pound-feet of torque. With that kind of performance, zero to 60 mph takes just 5.1 seconds and top speed is limited 120 mph.

All three engines are mated to a ZF eight-speed automatic transmission, but the XE35t AWD is mated to the beefier 8HP70 transmission, while the RWD variant of the XE 35t, the XE20d and the XE 25t are mated to the 8HP45 transmission.

We’ve all known that AWD was coming to the new XE, but now we have confirmation of what XE models will be available with all-wheel drive. It won’t even be an option on the base XE 25t, but it will be available on the XE 20d and the V-6 powered XE 35t. Like the new XF and F-Pace, the AWD system uses a multi-plate wet clutch transfer case to transfer power to the front propshaft. When needed, the system can switch from full, RWD to AWD in just 165 milliseconds. This on-demand system allows for the steering to remain uncorrupted during normal driving maneuvers.

You may have noticed that there is no V-8 engine option, but give it time. Jaguar won’t let BMW, Audi and Mercedes have all the fun in the compact super-sedan range. Expect the same 5.0-liter supercharged V-8 from the other Jaguar models to find its way into a Jaguar XE R model in the next few years

Jaguar XE Ride & Handling

The ride of the XE is smooth. It has been tuned for better handling, but for India it has tweaked for better ride also. Drive on broken tarmac or even at high speeds. It irons out most of the road shocks for front and rear passengers making it extremely comfortable for the occupants. The handling of the XE is just fantastic. What makes it even better is the steering feedback. The steering wheel weighs up as speed increases. Most of the sedans in this segment now have electronic steering wheel that is extremely light and kills the joy for those who enjoy driving

Jaguar XE Safety & Braking

Standard safety features on the 2017 XE include stability and traction control, front-seat side and side curtain airbags, and hazard lights that automatically activate under heavy braking. A rearview camera is standard on the Premium trim level and above, while the R-Sport further comes with drowsy driver monitoring, blind-spot monitoring, rear cross-traffic alert, front and rear parking sensors, lane departure warning and intervention, forward collision warning, and forward collision mitigation with automatic emergency braking.

The R-Sport trim’s standard front and rear parking sensors and blind-spot monitoring with rear cross-traffic alert can be added to the Premium or Prestige trim via a Vision package (which also adds the adaptive xenon headlights with automatic high beams). As noted above, there’s also a Driver Assistance package (R-Sport) with additional safety technologies.

Every XE comes with InControl Protect (including SOS emergency calling, Jaguar roadside assistance and stolen vehicle location) and InControl Remote (a smartphone app with vehicle status reports, remote locking and unlocking, and other remote features).

Jaguar XE Price

Jaguar Xe Ex-Showroom Price in Chennai ranges from 35,83,551/- (XE Pure) to 44,70,194/- (XE Portfolio Diesel). Get best offers for Jaguar Xe from Jaguar Dealers in Chennai. Check the price of Jagar XE in Chennai

Jaguar XE Bottomline

he XE retains the Jaguar DNA be it for looks and styling, interior, power and agility. The only knick in the armour is no option for diesel engines as majority of the luxury car sales in India are for oil burner. Leaving that, we loved the XE. With this brand, you don’t just move away from the German badge but you even procure a fresh product that looks a lot more expensive than its price tag.

Honda WR V Hatchback Overview

Honda WR V Overview

With cross-hatches, car makers have kept the formula simple – take their existing hatches, inject some testosterone with thick slide cladding, roof rails, larger wheels and voila! We have an all-new model. The i20 Active, the Etios Cross and the Cross Polo, all seem to toe this line of thought (except the Fiat Urban Cross – but it hardly sells!).With the new WR-V, Honda has made an honest effort to create a Jazz-based crossover that stands out from its donor car. Not just in terms of its SUV-inspired looks, which gives it a different persona, especially when viewed from the front and rear. But also in the way it has gone about tweaking the suspension, raising ground clearance and adding a few more features to differentiate it from the Jazz. For information on contact details of.  Honda car dealers in Mumbai

View Price & Offers on Honda WR V at CarzPrice

Honda WR V Design & Look

Unlike some other Cross hatchbacks of its segment, the Honda WR-V gets some significant updates which has helped it get an entirely new identity. Towards the front, the WR-V features a raised bonnet while the thick chrome grille somehow reminds us of the new City. Besides the revised hood and grille the headlamp cluster too has been redesigned as well and also gets integrated LED daytime running lamps. To make the Crossover slightly beefier the WRV also features a sculpted bumper which also houses round shaped fog lamps. There are also silver finished scuff plates. Just like the front profiles the side profile too features larger 16-inch wheels wrapped with 195/60 profile tyres.Just like the front and side profile the rear profile too has been heavily modified as well as it gets different appearing L-shaped taillamps. The rear bumper too has been amended as well along with new bumpers and slightly modified tailgate.

Honda WR V Cabin & Space

There are less significant changes in Honda WR-V in terms of interiors, over the Jazz that it is based on. Interior is themed in black plastic and black fabric with a few dashes of grey and silver in the corners and trims.Seats are well bolstered around the thighs and back and feel much more supportive for long drives this car is aiming to be used for. There is a central armrest for front row passengers with an openable cubby space, which can easily house a phone and sunglasses.

Rear seats however are a surprise. They are flat and fixed and also have integrated headrests, which aren’t helpful for people who are about 6 feet tall. Rear seats are less supportive but cushioning is pretty soft. Leg room perhaps is the ultimate selling point for WR-V. With a standard driving position in the front seat, there’s space at the rear to stretch your legs or even accommodate a camping bag between the knees and front seat base.

The infotainment system is a new upgraded Digipad recently seen in the all new Honda City. The infotainment system operates on new gen Navigation software, Apple Carplay and Android Auto. The touch screen has noticeable lag and it takes patience to get used to it on the move. Honda’s party trick in the WR-V is the installation of a one touch sunroof in the top end trim to add to overall opulence of the otherwise dark cabin.The top end diesel variant gets cruise control to adds to the convenience of long highway expeditions. 363 litres of boot space without the rear seats folded down is sufficient to carry large suitcases and an ice box for the weekend.

Honda WR V Engine & Transmission

As expected, the WR-V gets the same engines as the Jazz. That means a SOHC 1.2-litre i-VTEC petrol that produces 90PS at 6,000rpm and 110Nm at 4,800rpm as well as a DOHC 1.5-litre I-DTEC turbo-diesel that puts out 100PS at 3,600rpm and 200Nm at 1,750rpm. The diesel gets a 6-speed manual and the petrol gets a 5-speed manual – however, there is no CVT option like in the Jazz.The diesel engine has got good low-end grunt and with a responsive throttle, it will happily trudge along at 25kmph in third gear. The engine is quite free-revving and the linear power delivery makes the car quite enjoyable, if not exciting, to drive around. The gearbox is typically Honda with a precise ‘click-click’ when you shift gears, while the light and progressive clutch is nice to use in stop-and-go traffic.

Additionally, the 6-speed makes the WR-V a comfortable and effortless highway cruiser. While Honda didn’t give us any figures, they are claiming best-in-class acceleration figures. They are also claiming that the WR-V diesel will offer segment-leading efficiency with a figure of 25.5kmpl. This is 1.8kmpl less than what they claim for the Jazz. Apart from the extra 50kg that the WR-V carries, this could also be down to the gearing which, Honda says, has been optimised for better acceleration. But we’ll have to wait for the road test to get real-world figures.What is obvious is that the engine is still as loud as it has always been. NVH levels are quite poor in the cabin and that’s personally quite off-putting.

On the contrary, the 1.2-litre petrol engine is super refined and creamy. It’s very quiet till around 4,000rpm at which point the sound turns to a nice raspy note which gets louder as you get to the redline. That said, the sound is the only exciting thing about it. The engine feels annoyingly underpowered and you really have to rev the nuts off of it for some decent acceleration and that can get quite annoying especially during overtakes. This, despite Honda saying that they reworked the gearing for better acceleration. That said, it shouldn’t be too much of a problem within the city. The precise gearbox and the light clutch only make the experience that much nicer in slow-moving traffic. Honda is claiming that the petrol WR-V will return an overall average of 17.5kmpl which is quite respectable.

Honda WR V Driving Dynamics

The WR-V rides on a slightly higher suspension compared to the Jazz, but this has not had any adverse effect on its handling which inspires confidence at high speeds. Body roll too is fairly contained. With its larger 16-inch wheels that ride on 195/60 profile tyres, the WR-V absorbs bumps pretty decently – certainly better than the Jazz and will handle any pothole-riddled urban street rather well.The electric power steering is from the Jazz and has been re-calibrated for the WR-V. It offers more assistance at lower speeds and can be twirled with ease. The steering is precise and offers good feedback, which makes it enjoyable at higher speeds.

Honda WR V Safety Features

All variants of the Honda WR-V get dual front airbags and ABS with EBD as standard. It also gets a rear camera with multiple viewing angles, but like the City and Jazz, you don’t get rear parking sensors.

Honda WR V Price

Honda Wrv Ex-Showroom Price in Chennai ranges from 7,77,365/- (WRV S MT Petrol) to 9,99,900/- (WRV VX MT Diesel). Get best offers for Honda Wrv from Honda Dealers in Chennai . Check for WR V price in Chennai

Honda WR V Verdict

The Honda WR-V is the first sub-4 meter Crossover from Honda which will help the Japanese Auto manufacturer to boost some sales because their other Crossover the BR-V definitely neither did not impress the Indian crowd much after its launch. The Cross hatchback looks loaded with features and although this is the beefier variant of the Jazz hatchback it gets slightly more interior space than the standard hatchback. Apply Car Loan for Honda WRV