Be a Better Developer

Creating multilingual website w/ React & Redux

Fri, 26 Feb 2016 00:00:00 -0800

Here is another post in series about React. This time I’m exploring Redux. I assume you know what Redux is already (otherwise, read redux.js.org to learn about it). If you haven’t read my blog post Creating multilingual website w/ React & Flux - I’d recommend you go through it, because I will be doing exactly the same thing here but using Redux instead of Flux.

My target

I want to create a simple multilingual website. I need to have:

source structure and process suitable for mid-sized project
fast update of UI on language change (desirably without page refresh)
easy testable solution
explore Redux

I’ll use ES6 where it is suitable, I automate dev process using Gulp.

Result

The main purpose of this project is to get my hands on Redux, thus the output is not that important, but you can check the result here. This is how it looks.

Two menus: left and right - left scrolls to different anchors in html, the right menu switches the language.

Working code in GitHub.

Clone & install

Just download the code and run from within react-redux-example directory

$npm install

If you are using Visual Studio Code - you can build it using ⇧⌘B (on Mac), otherwise use:

$gulp build

If you don not have Gulp installed on your machine, you should install it globally before moving forward:

$npm install gulp -g

To view a result on your local machine, just open index.html from react-redux-example/dist folder in a browser.

Code walk-through

Let me guide you through this example step by step. Here is a list of actions:

Step 1. Setting development environment

I use Visual Studio Code as my IDE. For development tasks such as run tests, build, deploy - I use gulp, you can check my tasks configuration in react-redux-example/gulpfile.js.

Step 2. Supportive functions

On my website I want to show the content in three languages. I have created data/content.json file to hold the text in structured form so I could manipulate it easily later. This is my simplified ‘database’.

To retrieve data from my ‘database’ (I mean from my json) I have created a fake API function in api.js. Later on I’ll just call my API to get data. It is as simple as this: This is the place you should put a call to your real API or database to retrieve your actual data.

Step 3. UI components

My UI consist of very few simple components: it’s a couple of containers to show text and a menu to navigate through that text as well as change the language of the text being shown.

For that I have created 4 React components: Menu, About, Home and Page. In the picture above, you can see my components tree.

Home and About components are only for information display purpose, they do not have any logic inside, they just get data through props and simply show it.

This is how home.jsx looks like:

And here I have my about.jsx:

Menu component also gets content through props, but in addition to that, it gets the function that should be called on language switch.

To bring these components together I have a wrapper component Page. It’s job is to create Home, Menu and About and pass correct data to each of these components. Page itself gets all the content it shares to child components, through props as well. I’ll show code for the Page in Step 5. Redux.

Step 4. Bringing it all together

So I have a very simple almost empty index.html with a placeholder div page defined, which later will hold my react component.

Finally, I have a app.jsx file. The content of which I’m gonna explain in the next step (Step 5. Redux), since it involves Redux. Basically in this file I render my Page react component into my page div and pass data to it.

Step 5. Redux

After all preparations are done, we can move forward and start with Redux.

For Redux in this example I use two libraries: Redux and React-Redux. If you haven’t done it already - go ahead and install them:

$npm install redux react-redux --save

This is what I want to achieve: when new language is selected in the Menu component, action is invoked and the state is changed (to hold a content in different language) and the new content from a state is being passed to Page and from there down to all children.

Here is how I would do that using Flux.

The flow looks similar when using Redux with some differences: Flux Store’s role is covered by Reducer, there is no Dispatcher and no support for multiple stores in Redux.

Let’s map this diagram items with my code.

In my actions.js file I have one action, named switchLanguage, it holds action_type and a property language (to pass the value of user’s selected language for the content to be shown):

And action_type is a simple constant defined in action_types.js file

Then, in reducer.js file I have defined initial state named initialState for my app - it holds a text in default language (English) retrieved from my database. And I have a function named reducer, that returns me a new state according to the given action. So if reducer is called with switchLanguage action as a parameter, it will return me the content of the page in a language provided as a property in action.

Now we have an initial state of the app, the description of state’s mutation (action) and a function to handle this mutation (reducer). Let’s move on to the presentation part.

As I mentioned before, I have app.jsx as an entry point of my app. If I were not using Redux, I would simply render my Page component into my page div like this:

Since I’m using Redux, I need to do a bit more here. First, I need to create complete state of my app (usually called store). For this I’m using Redux helper function createStore: it takes my reducer and returns me state (read Redux documentation for more about this function and Redux API). Second, I need to pass my store to my Page component. Here I’m using Provider from React-Redux module (for more on this topic read React-Redux documentation). Provider takes your app’s store and your components and passes store to those of components, that are ‘connected to store’ using connect() function (from React-Redux lib). Here is the code:

And the final part of this puzzle - Page component, which is ‘connected to store’ and gets the store from Provider.

Here is it’s code:

As you probably have noticed, in my app.jsx when creating Page component I do not pass any props to it, only to Provider, but inside the Page I refer to props. This is enabled by React-Redux: from one side, in Page I have connected Page to store using connect() function, and in app.jsx I use Provider, which actually pass store to my Page.

The trickiest part for me was the usage of connect(), it does both: makes your component subscribed to store updates and handles dispatching for provided function.

Literature

While exploring Redux and making my first Redux app work - I’ve read many blog posts, watched video tutorials and browsed many github repositories. Here is the list of resources, that I’ve found most useful:

My earlier posts in React series:

Serverless system architecture using AWS, React and Node.js

Fri, 22 Jan 2016 00:00:00 -0800

This post is about my most recent freetime-killer “DIY project” - Price tracker, which has a beautiful serverless architecture that I want to share with all of your.

The story behind this app: I want to buy some items (such as skiing goggles, or new luggage set, or shoes), I want to get them for the best price and these items are not urgent for me so I can wait for a price drop. But I don’t want to hunt for sales and constantly check online stores for price decrease. I’ve got better things to do :)

So I’ve developed a system, which tracks price changes for my desirable products in online stores (which I trust to buy from) and notifies me over the email when price drops.

Architecture

There are three major parts of the system:

Website - to view the products and recent prices in different shops
Watcher - a job scheduled to scrape online shops and track price changes every couple of hours
Notifier - a job to watch changes to the price and notify me over the email when the price drops

In addition to these parts - there is a database to hold all my products, shops and price changes.

Technologies

In autumn 2015 I won a $100 AWS credit as a HackersRank prize in an algorithms coding contest and I decided to make a good use of it. So the platform of a choice to build this system is AWS. In addition to that, lately I am focused on everything JavaScript, thus the language of a choice is JavaScript: both for a frontend - React.js and backend - Node.js.

Here is the architecture:

Implementation

The sources are in Github at LenaBarinova/PriceTracker. Now shortly about how I implemented each of my three major system components.

Website

My Website - is a quite simple Single Page Application done in React using Flux pattern to handle UI changes. Website gets information about the products via a REST API implemented through AWS API Gateway, which calls AWS Lamdba function (written in Node.js) to actually get data from database. I use DynamoDB as a database, storing all of my products as JSON objects. UI is built using Bootstrap and some more advanced css styles to create flipping cards effects for products.

Here’s how it looks:

Tests for UI are written in Mocha. Website is hosted in Amazon S3. For deployment I use Gulp and many Gulp plugins to transpose, convert from ES6, concatenate and minify my JavaScript files, run tests, bundle all together and upload to S3 bucket.

Watcher

Watcher is AWS Lambda function implemented in Node.js. It queries a database, gets all the products and runs scrapers for each product to retrieve a new price from online stores. Scraper function is specific for each store, it loads shop’s html and gets/parses price fields using jQuery selectors. If there is change in price - product is updated with a new price and persisted to DynamoDB.

Watcher is scheduled to run every 4 hours using AWS CloudWatch Events.

Notifier

One more AWS Lambda function which listens to events in DynamoDB and if there is a price decrease - it sends email notification using AWS SNS service.

All AWS Lambda functions are written in JavaScript and tested using Mocha. Deployment is as easy as running “gulp deploy” task - it runs tests, gets all dependant node modules, zips all files together and uploads my JavaScript code to AWS as Lamdba functions.

Pros and Cons

Though it’s nice not to have a server and run everything on different services, and Lambda is a kind of magic, there are some drawbacks to it. In my case it’s perfect for Watcher and Notifier, but not that good for a data retrieval from DynamoDB. The problem is that in order to run Lambda function there is a lot of work done in the background (container creation, environment configuration, etc.) before actually running my function, that takes some time. When the task is a background job - it’s totally fine, but with UI - it gives me undesirable lag before loading my products for the first time. I don’t worry about it now, because I’m the only user of this system and visit this site once a week or so, but if someday there is more users than me, I’ll definitely look into it and refactor this part of the system.

Besides this small issue, everything else works as a charm. And with deployment automation - it is a real pleasure to work on this “project”.

Happy Architecting!

P.S.: If you want to hear more about any part of this system - just leave a comment. And if you by any chance would like to try PriceTracker yourself - let me know, I’d be happy to set up it for you.

Testing React components using Shallow Rendering

Tue, 24 Nov 2015 00:00:00 -0800

This is a continuation of Getting started w/ React & Mocha blog post. Here I’ll shortly describe one more alternative how to test a React component.

Set-up

Code for this example can be found on GitHub. After downloading the code, run

$npm install

followed by

$npm test

or this gulp command:

$gulp build

If you are using Visual Studio Code - you can build it using ⇧⌘B (on Mac).

Testing

So I have this react component, named VeryFirstDiv:

In my previous post to test it I was creating fake DOM using JSDOM library and then rendering my testable component into this fake DOM (Read more about it here).

This time I’ll only use React TestUtils add-on and rather new feature of it - Shallow Rendering.

Shallow rendering is an experimental feature that lets you render a component “one level deep” and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.

In my test I create an instance of Shallow Renderer:

let renderer = ReactTestUtils.createRenderer();

Then, render my VeryFirstDiv component using this renderer

renderer.render(<VeryFirstDiv />);

and get the output:

myDiv = renderer.getRenderOutput();

At this point you can check anything you fancy. I’ll for example want to test whether it is of a type ‘div’ and does it have a class named “veryFirstDiv” Here’s my test:

For a comparison, I’ve created same test as in using DOM version:

Summary

Testing using Shallow Rendering is faster. You can even notice it on this small example: my test using fake DOM runs for ~50ms, while using Shallow Rendering test takes only 10ms. I believe the gain is even more significant on big projects. And as a pleasant side effect it doesn’t require additional libraries.

Happy Testing!

Creating multilingual website w/ React & Flux

Fri, 20 Nov 2015 00:00:00 -0800

My post on Getting started w/ React & Mocha just made it up to the Top 1 of all my blog posts, reaching 1000 uniqueue views, so I decided to continue these series.

My target

This time I want to create a simple multilingual website. I need to have:

source structure and process suitable for mid-sized project
fast update of UI on language change (desirably without page refresh)
easy testable solution

I’ll use ES6 where it is suitable, I automate dev process using Gulp.

Result

This is how the final result looks like:

Working code in GitHub. To check the website, follow this link.

tl;dr

Just download the code and run

$npm install

If you are using Visual Studio Code - you can build it using ⇧⌘B (on Mac), otherwise use:

$gulp build

To run a server locally I use http-server:

$http-server -a localhost -p 8000

For those, who are in a hurry to get started with Flux you can skip all preparation steps and go straight to Using Flux.

My actions

To create this multilingual website I followed these steps:

Step 1. Simple HTML

So I started by creating my website as a simple HTML, using Bootstrap, to have the basic static page structure, which I could split to the React components later. That’s how my index.html look like:

Step 2. React components

First I installed React and ReactDOM.

$npm install react react-dom --save

Then I prepared everything that is needed for jsx and ES2015 transformations:

$npm install babel gulp browserify vinyl-source-stream babelify babel-preset-es2015 babel-preset-react --save-dev

For Babel to transform React files and ES2015 - created .babelrc file with these settings:

Created gulp file with a build task. Here it is:

Now moving to React. In my page I identify three components:

Menu
Home section
About section

I created these three components, adding additional one to wrap these three. In this step I added everything in one file app.jsx (will refactor it in further steps). So my app.jsx file looks like this: Note: when using html in React don’t forget to rename class to className.

Added a placeholder for my react components instead of all the html tags in my index.html and added reference to react and react-dom libraries as well as to my app.js file, which is being produced for me after running

$gulp build

or ⇧⌘B (in VSCode on Mac).

So my index.html now is this:

browse files in GitHub at this point

Step 3. Content from JSON

What I decided to do now is to move all the content text to JSON file and load the text I have created helper API. The main idea behind this is that later this loading from JSON could be replaced by calling real API to retrieve needed data.

This is how my data content.json file looks like:

This is my helper API, which load JSON into array and then returns it filtered by language.

So now I update my React components to use text from my API. I decided to call API method from my wrapper component and then pass down needed parts to child components via props. This is my app.jsx:

In addition I appended gulpfile.js with new task to delete previously generated app.js file. This is how gulpfile.js looks like now:

For this I needed to install del library:

$npm install del --save-dev

Step 4. Flux

So finally, all preparation tasks are done and we can move forward and add Flux. First let’s start with installation.

$npm install flux --save

I follow the flow that is being recommended by Flux: Picture is taken from Flux manual.

Let’s map this diagram items with my code. So starting from left to right, I’ve got two actions:

initApp - I call this in my app entry point to load content using default language ‘en’ (I say it’s an action on the left, very first box in the diagram)
switchLanguage - I dispatch this action on click in language menu (I say it’s an action above the Store on the diagram)

My actions.js file:

Then I have a dispatcher:

In my store I hold the content and register some callbacks with dispatcher to be invoked on specific actions. My store.js file:

And last, but not least - view. So here I have two components that are related to this flow:

Menu component - invokes SWITCH_LANGUAGE action on menu item click and passes selected language (this covers View -> Action -> Dispatcher -> Store loop on the diagram)
Page component - listens to the store changes and when change is happening - gets updated content (this covers Upper Action -> Dispatcher -> Store -> View loop on the diagram).

This is my updated Menu component:

And here it is my Page component:

Step 4. Refactoring and Tests

I won’t be giving any detailed instruction here, but what I did - is refactored my code:

Changed source file structure
Split react components to different files
Added minification step to the gulp task
Now working on tests, and I think, that they deserve a separate blog post.

The last version of this example may be found on GitHub.

I just love how it works you can experience this smooth language change here.

Hello world, Python

Thu, 01 Oct 2015 00:00:00 -0700

Today I started exploring Python. For those who know me - Yes, Python! Bear with me - I’ve got my solid reasons for that (will share it one day).

In this short blog post I just want to share how I setup my IDE - Visual Studio Code on MacOS to handle my Python adventure.

First, I’ve installed Python.

Then, created app.py file with “hello world” code in it and setup VSCode task to run this script, as so:

From a Command pallete (⇧⌘P) hit “Configure Task Runner”.
In a task.json file added this:

You should change python command path (if not default as mine) as well as args according to your setup, I just simply have my whole script in app.py file.

Finally, as this is the only task in my VSCode tasks list - it runs on ⇧⌘B.

Simple as that!

Sharing a blog post hosted on GitHub Pages

Mon, 17 Aug 2015 00:00:00 -0700

I am hosting all of my personal blogs on GitHub Pages now (here are some reasons why: ‘Static HTML is the new black’). With it comes a challenge when I try to share new posts on social media.

I want to have a nice share dialog with description and image of my blog post. Like so:

In order to archive this, I had to add some code to my Jekyll templates and implement some workarounds with urls and domain configuration. That’s how I did it.

First, I added meta tag generation to a head part of my post html:

I get all the open graph meta tags being generated as FB and other social media systems expect it to:

But once I try to share my blog post or scrape url with Open Graph Object Debugger I get Error parsing input URL, no data was cached, or no data was scraped.:

After spending some time searching for the reasons why this is happening, I found that, Github sometimes return a 302 (Redirect status code) instead of a 200 (OK) in order to avoid DDoS attacks. Same issue is described in this blog post.

To fix it, in addition to GitHub’s IPs I’ve added www subdomain through CNAME pointing to my GitHub address lenabarinova.github.io in my domain configuration.

Now I use url with www prefix when I want to share my blog post on social media and it works just fine - I get desirable share dialog:

With this workaround I can share my posts using nice summary and image in a share dialog.

Update 10/17/2015

By the way in my gh-pages branch on a GitHub I have CNAME configured using subdomain + domain, like this: www.bebetterdeveloper.com

Getting started w/ React & Mocha

Thu, 16 Jul 2015 00:00:00 -0700

11/23/2015: I updated this blog post as well as the code to support the newest version of React, ReactDOM, ReactTestUtils, Mocha, JSDOM, Babel. The changed are really minor, but may be frustraiting for some. For those, who are interested in how should this code be written using older version of these libs (React 0.13.3, Mocha 2.0.1, JSDOM 3.1.2, Mocha-JSDOM 1.0.0, Babel 5.1.13) please clone this commit from GitHub.

It took me half day to setup [almost] empty environment for React app development with testing done using Mocha. I decided to share my findings here so it would remain.

My target

I wanted to create an environment for further React development. The things that I needed to have:

source structure, that would be suitable for medium-sized project
build scripts, that would do all needed transformations, run tests, show the output of my app
Mocha as a test framework of choice

For build scripts I prefer to use gulp.

tl;dr

You can find working code here. Just download it and run

$npm install

followed by

$npm test

If you are using Visual Studio Code - you can build it using ⇧⌘B (on Mac).

How I did it

I started with these three stages:

Prepare the environment
Create first React component
Add Mocha tests

Step 1. Prepare the environment

First install Node.js (if you don’t have it yet). In your project directory (react-mocha-example in my case) through Terminal do:

$npm init

and follow the instruction. Then run this command to install libraries to setup the working environment:

$npm install react react-dom babel babel-preset-es2015 babel-preset-react gulp gulp-load-plugins browserify babelify babel-core vinyl-source-stream gulp-open --save-dev

Now your package.json should look like this:

Add .babelrc file to your project root with these settings:

Create gulpfile.js to configure build steps: I’m using gulp-load-plugins for easy and fast use of different gulp plugins. It enables me to access all the plugins I have listed in package.json file without ‘require’ each of them separately.

So now everything is ready to start really writing a code. Create index.html file:

Run build command: either using ⇧⌘B (from Visual Studio Code on Mac) or command line:

$gulp build

And you should get Chrome opened with very first version of our app.

Step 2. Create first React component

Create a components directory and component.jsx file in it:

Add this componenet to DOM (I did it in app.jsx file in my project root directroy react-mocha-example)

Run build task and we can see our React component in a browser.

Step 3. Adding first Mocha test

This was the trickiest step for me. I found a couple of good articles on the topic. These are my favourite:

Ok, let’s begin. First, we need to install Mocha. To do it, run npm install command with –save-dev, this way your package.json file will be kept updated with all the dependances you use:

$npm install mocha --save-dev

Create test directory and a first empty-test.js, which just asserts true all the time.

You can try whether it works just running Mocha from command line from you project root folder:

$mocha

You should get this output:

Now let’s add test running step in our gulp configuration. For this I used gulp-mocha - a gulp plugin wrapper around Mocha.

Now add a new ‘test’ step in gulpfile.js to run mocha:

Before moving on to testing our React component, we need to take care of a couple of things.

First - DOM mocking. You can find very good explanation about how to mock DOM in this blog post. To follow this example we need to install jsdom and mocha-jsdom. I’ve created dom-mock.js file (it’s a bit different from what is given in the article, I adopted it to be compatible with the newest JSDOM version).

Second - install React TestUtils add-on:

$npm install react-addons-test-utils --save-dev

And finally - the test! I’ve created component-test.js file in test directory:

Run build. Hurray! The test is passing:

You can also configure your package.json - to run tests from command line using npm. For this add test section in your package.json like this:

Now you can run:

$npm test

That’s it! You can download the latest code for this example from GitHub.

Happy Testing!

ES2015 + React using Gulp

Tue, 14 Jul 2015 00:00:00 -0700

1/4/2016: I have updated this blog post by adding steps to install needed libraries and added command list for easy and fast start.

Recently I started exploring new features of ECMAScript 2015 while using React. So here is how I set-up my dev environment with gulp. I have 2 simple steps (running one after other in this sequence):

Transform XLS files: I precompile React JSX template files into plain JavaScript using gulp-react:
Transform ES2015 files: I take JavaScript files, produced after first transformation and turn them into ES5 files using gulp-babel:

Before running these tasks be sure you have all necessary packages installed on your machine:

$npm install gulp gulp-react gulp-babel gulp-open

Here it all gathered and chained together:

In addition to two transformation tasks I like to open output in browser, for this I use gulp-open.

I use Visual Studio Code as my IDE, so I have set this gulp task named “build” as a build task in VS Code settings.

And now once I change code and want to check it - I just press ⇧⌘B (on Mac) and the result is in front of me.

To try it working on your machine:

git clone git@github.com:LenaBarinova/react-es6-gulp-example.git
cd react-es6-gulp-example
npm install gulp gulp-react gulp-babel gulp-open
gulp build

Sorting: Heap Sort

Mon, 24 Feb 2014 00:00:26 -0800

I have already demonstrated one of the binary heap usage scenarios – priority queue. Today I want to show another binary heap usage example – heap sort. The algorithm consist of two steps:

on the given set of numbers ensure max-heap invariant (the value of each node is not bigger than value of its parent with biggest element at the root)
while heap is not empty remove first (max) item from the max-heap

The first part is almost identical to the way we ensured binary heap invariant during delete operation. In order to make second step space efficient, we need do following things:

swap first (max) item with the last one in the max-heap
decrease size of the max-heap by 1
ensure max-heap invariant starting from the first item

Let’s sort items [3 4 1 3 5 1 2]. As always I’ll use colors to specify parent, child or items to be swapped:

Step #1

The binary tree constructed from the given items does not conform max-heap invariant:

     3
   4   1
  3 5 1 2

To ensure max-heap invariant for the given set we need to take each node in the tree (except leafs) and recursively ensure it is bigger than any of the child nodes. As a reminder, our binary heap stores items starting from index 1, so we need to temporarily add null item at the beginning: [null 3 4 1 3 5 1 2]

[null 3 4 1	3 5 1 2]
[null 3 4 2	3 5 1 1]

[null 3 4 2	3 5 1 1]
[null 3 5 2	3 4 1 1]

[null 3 5 2	3 4 1 1]
[null 5 3 2	3 4 1 1]
[null 5 3 2	3 4 1 1]
[null 5 4 2	3 3 1 1]

At this point we have binary max-heap:

     5
   4   2
  3 3 1 1

Step #2

Swap first (max) item with the last one and ensure max-heap invariant:

[null 5 4 2 3 3 1 1	]
[null 1 4 2 3 3 1	5]
[null 1 4 2 3 3 1	5]
[null 4 1 2 3 3 1	5]
[null 4 1 2 3 3 1	5]
[null 4 3 2 3 1 1	5]

[null 4 3 2 3 1 1	5]
[null 1 3 2 3 1	4 5]
[null 1 3 2 3 1	4 5]
[null 3 1 2 3 1	4 5]
[null 3 1 2 3 1	4 5]
[null 3 3 2 1 1	4 5]

[null 3 3 2 1 1	4 5]
[null 1 3 2 1	3 4 5]
[null 1 3 2 1	3 4 5]
[null 3 1 2 1	3 4 5]
[null 3 1 2 1	3 4 5]

[null 3 1 2 1	3 4 5]
[null 1 1 2	3 3 4 5]
[null 1 1 2	3 3 4 5]
[null 2 1 1	3 3 4 5]

[null 2 1 1	3 3 4 5]
[null 1 1	2 3 3 4 5]
[null 1 1	2 3 3 4 5]

[null 1 1	2 3 3 4 5]
[null 1	1 2 3 3 4 5]

[null 1	1 2 3 3 4 5]
[null	1 1 2 3 3 4 5]

Finally we remove leading null item and we have sorted items! Implementation (tests) of the heap sort is heavily based on the binary heap implementation:

Complexity: O(n·logn)

Data Structure: Max Priority Queue

Sat, 15 Feb 2014 00:00:00 -0800

Today I will implement another important abstract data type – priority queue. Priority queues are used:

in heap sort
to track top N elements in a very long sequence
to merge K ordered sequences and produce single ordered sequence

Usually priority queues have following functions:

insert() – to add new item with a priority
deleteMin() or deleteMax() – to remove an item with min/max priority
findMin() or findMax() – to get an item with min/max priority
length() – to get the number of items in the priority queue

As a foundation I’ll use in the last post described efficient data structure – binary heap (in fact, max-heap). Overall, priority queue can be seen as a generalization of stack and queue data structures. Stack can be implemented as a max priority queue where priority of each inserted element is monotonically increasing and queue – where priority of each inserted element is monotonically decreasing.

The implementation of max priority queue (tests) is almost identical to the max-heap implementation:

Complexity:

insert - O(logn)
deleteMin/deleteMax - O(logn)
findMin/findMax - O(1)