To create a custom class that is lifecycle aware inherently, we can use a set of libraries provided under jetpack lifecycle.

For example, I want to create a timer, which invokes a method on each interval, and also, it should be lifecycle aware so it dies with its owner.

Firstly, we will create an interface that extends LifecycleOwner, this interface is implemented all new androidx. components.

public interface OnIntervalListener extends LifecycleOwner {
    void onTimerInterval();
}

Now, we create out actual timer,

/**
 * @implNote An implementation of lifecycle aware timer, can be attached to Activity or fragment
 */
public class LifecycleAwareTimer implements Runnable, DefaultLifecycleObserver {

    public interface OnIntervalListener extends LifecycleOwner {
        void onTimerInterval();
    }

    private final Handler mHandler = new Handler(Looper.getMainLooper());

    private final long mInterval;

    private final OnIntervalListener mOnIntervalListener;

    public LifecycleAwareTimer(long interval, @NonNull OnIntervalListener onIntervalListener) {
        mInterval = interval;
        mOnIntervalListener = onIntervalListener;

        mOnIntervalListener.getLifecycle().addObserver(this);
    }

    @Override
    public void run() {
        mOnIntervalListener.onTimerInterval();
    }

    @Override
    public void onResume(@NonNull LifecycleOwner owner) {
        mHandler.removeCallbacksAndMessages(null);
        mHandler.postDelayed(this, mInterval);
    }

    @Override
    public void onPause(@NonNull LifecycleOwner owner) {
        mHandler.removeCallbacksAndMessages(null);
    }

    @Override
    public void onDestroy(@NonNull LifecycleOwner owner) {
        mHandler.removeCallbacksAndMessages(null);
        mOnIntervalListener.getLifecycle().removeObserver(this);
    }
}

Now, you can use it creates a new instance from Activity or Fragment and it will die once its owner dies.

The Android Interface Definition Language (AIDL) is similar to other IDLs: it lets you define the programming interface that both the client and service agree upon in order to communicate with each other using interprocess communication (IPC).

Aidl consists of 3 parts:

1. AIDL file

2. Client application

3. Server application

Creating AIDL file

1. Enable build feature in your build.gradle.

    buildFeatures {
        aidl = true
    }
   

2. Create a new AIDL file using File -> New -> AIDL -> AIDL File

3. Let's name it ICalculator.aidl

4. Declare aidl methods:

    interface IExampleAidlInterface {
        int add(int a, int b);
    }
   

Create an AIDL server

An AIDL server is an app that does the actual work and sends back the result to requesting clients. One service can connect with multiple clients via Binders.

Steps:

1. Create a service, e.g. CalculatorService extends Service

2. Create an Implementation of ICalculator.Stub, lets name it CalculatorImpl

3. Implement methods:

    object CalculatorImpl : ICalculator.Stub() {
        override fun add(a: Int, b: Int): Int {
            return a + b
        }
    }
   

4. Expose your stub implementation with a service binder:

    class CalculatorService : Service() {
        override fun onBind(intent: Intent): IBinder {
            return CalculatorImpl
        }
    }
   

Now your service is ready to be consumed by your clients, now let's create a client application.

Create an AIDL client

An AIDL client is an app that binds to an AIDL service, calls API, and shows a response inside its views.

Steps:

1. Create a service connection:

    private var aidlService: ICalculator? = null
    private val serviceConnection = object : ServiceConnection {
        override fun onServiceConnected(name: ComponentName?, service: IBinder?) {
            aidlService = ICalculator.Stub.asInterface(service)
            Toast.makeText(applicationContext, "Service Connected", Toast.LENGTH_LONG).show()
        }
   
        override fun onServiceDisconnected(name: ComponentName?) {
            aidlService = null
            Toast.makeText(applicationContext, "Service Disconnected", Toast.LENGTH_LONG).show()
        }
    }
   

2. Connect to AIDL service via Binders.

    val serviceIntent = Intent()
    serviceIntent.component = ComponentName(BuildConfig.AIDL_PACKAGE, BuildConfig.AIDL_SERVICE)
    bindService(serviceIntent, serviceConnection, BIND_AUTO_CREATE)
   

3. Call methods of AIDL after successful connection:

    aidlService?.add(2, 2)?.let {
        Toast.makeText(
            applicationContext,
            String.format(Locale.getDefault(), "Sum is: %d", it),
            Toast.LENGTH_LONG
        ).show()
    }
   

Limitations

There is one BIG gotcha with AIDL services, which is when the system is in doze mode, your service app might not start to respond to requests.

Here is an example application using AIDL in real life 😎

We have a few choices here, either we create multiple fields for each property, which is hard to scale but easier to understand.

Here is a code sample for that:

fun main() {
    order(true, true, false)
}

fun order(hasOrderedCheeseBurger: Boolean, hasOrderedFries: Boolean, hasOrderedSoda: Boolean) {
    println("Has Ordered CHEESEBURGER : ${hasOrderedCheeseBurger}"); // true
    println("Has Ordered FRIES : ${hasOrderedFries}"); // true
    println("Has Ordered SODA : ${hasOrderedSoda}"); // false
}

As you can see, we had to send 3 different parameters to know what this user had ordered and imagine, if, in future we need to add another item, let's say SANDWICH then we need to add another parameter.

Now, instead of passing multiple parameters, we can use bit manipulation to combine multiple parameters into a single parameter.

val CHEESEBURGER = 2; // 00000010
val FRIES = 4;        // 00000100
val SODA = 8;         // 00001000

fun main() {
    val ordered = CHEESEBURGER or FRIES;

    order(ordered)
}

fun order(what: Int) {
    val hasOrderedCheeseBurger = what and CHEESEBURGER == CHEESEBURGER;
    val hasOrderedFries = what and FRIES == FRIES;
    val hasOrderedSoda = what and SODA == SODA;
    println("Has Ordered CHEESEBURGER : ${hasOrderedCheeseBurger}"); // true
    println("Has Ordered FRIES : ${hasOrderedFries}"); // true
    println("Has Ordered SODA : ${hasOrderedSoda}"); // false
}

Here, bitwise allows us to add as many values as we need into a single parameter.

Whey we need whenNew() ?

whenNew() allows us to inject our fake or mock instead of actually creating a new object of said class.

This works great, we just need to add our class in @PrepareForTest annotation and PowerMock will inject our mock. Just like that.

Here is an example class:

// Example Source Class
public class ExampleClass {
    public int getHeight() {
        // Lets say we have a generic method which provides different result base on the provided id
        final CustomClass customClassInstance = new CustomClass();
        return customClass.getHeight();
    }
}

and here is a test case using whenNew() injection.

@RunWith(PowerMockRunner.class)
@PrepareForTest({
    ExampleClass.class
})
public class ExampleClassTest {

    private ExampleClass classUnderTest;

    @Before
    public void setUp() throws Exception {
        // Create constructor of ExampleClass
        classUnderTest = new ExampleClass();
    }

    @Test
    public void getHeight_shoudReturnHeightOfView() throws NoSuchMethodException {
        final int expectedHeight = 100;
        // Given
        final CustomClass mckCustomClass = Mockito.mock(CustomClass.class);
        Mockito.when(mckCustomClass.getHeight()).theReturn(expectedHeight);
        // Make sure you match exact parameters while mocking (same as we do for Mockito.mock statements).
        // There is also withArguments(first, second, ....)
        // and withAnyArguments() for cases when you don't care for arguments passed.
        PowerMockito.whenNew(CustomClass.class).withNoArguments().thenReturn(mckCustomClass);

        final int actualResult = classUnderTest.getHeight();

        Assert.assertEquals(expectedHeight, actualResult);
    }
}

Now let's come to the problem...

Let's say you have the following class to test:

// ClassToTest
public class ClassToTest {
    // heavy method
    private void doInBackground() {
        new Thread() {
            @Override
            public void run() {
                final CustomClass customClassInstance = new CustomClass();
                int height = customClass.getHeight();
                // ... some heavey operation on height
            }
        }.start();
    }
}

Now, in the above example, a new instance of CustomClass is created inside a nested scope (Thread), hence modifying bytecode of ClassToTest will no longer work as new CustomClass() is not inside its scope.

What to do?

Powermock has other tools to deal with such situations, firstly, you need to add CustomClass in @PrepareForTest() and suppress() constructors and stub() getHeight() method to modify its behaviour according to your test requirements.

Here is example code:

@RunWith(PowerMockRunner.class)
@PrepareForTest({
    ExampleClass.class,
    CustomClass.class
})
public class ExampleClassTest {

    private ExampleClass classUnderTest;

    @Before
    public void setUp() throws Exception {
        // Create constructor of ExampleClass
        classUnderTest = new ExampleClass();
    }

    @Test
    public void getHeight_shoudReturnHeightOfView() throws NoSuchMethodException {
        final int expectedHeight = 100;
        // Given
        PowerMockito.suppress(CustomClass.class.getConstructors());
        PowerMockito.stub(CustomClass.class.getMethod("getHeight")).toReturn(expectedHeight);
        // ...
    }
}

P.S. PowerMock has suppress() , sub() and replace() methods to modify individual elements of any class. Please read more about methods declared in PowerMockito class and see if you find an alternate solution to your use case.

Post inspired by RecyclerCalendarAndroid Lib

RecyclerView

The theory is simple, we need each day of the calendar rendered as one cell of the RecyclerView.

To achieve this, we need to first prepare list of all dates, but there is a problem, we are missing a few things:

1. Header Cell for Month with span size of 7.

2. Preceding empty cell (if the month start from Wednesday, we need to add an empty cell with a span of 2)

3. Succeeding empty cell (if the month ends on a Friday, then we need to add an empty cell with a span of 2)

Now we need to achieve this,

we need to iterate from our start date to the end date:

while (startCalendar.time.before(endCalendar.time) || startCalendar.time == endCalendar.time) {
    //...
}

Now, inside out while loop, we check if the date is the first date of the month, we add our empty cell before we add an actual cell with a date.

val calendarEmptyHeader: RecyclerCalenderViewItem =
    RecyclerCalenderViewItem(
        date = startCalendar.time,
        spanSize = 7,
        isEmpty = false,
        isHeader = true
    )
calendarItemList.add(calendarEmptyHeader)

val calendarEmptyWeek: RecyclerCalenderViewItem =
    RecyclerCalenderViewItem(
        date = startCalendar.time,
        spanSize = 1,
        isEmpty = true,
        isHeader = false
    )
if (dayOfWeek - 1 < 0) {
    dayOfWeek = 7 + (dayOfWeek - 1)
    calendarEmptyWeek.spanSize = dayOfWeek
} else {
    calendarEmptyWeek.spanSize = dayOfWeek - 1
}
if (calendarEmptyWeek.spanSize > 0) {
    // Is span size is greater then 0, then add empty cell
    calendarItemList.add(calendarEmptyWeek)
}

Now, after you added an empty cell, just add the actual date and increment the start date by 1 day

val calendarDateItem: RecyclerCalenderViewItem =
    RecyclerCalenderViewItem(
        date = startCalendar.time,
        spanSize = 1,
        isEmpty = false,
        isHeader = false
    )
calendarItemList.add(calendarDateItem)
startCalendar.add(Calendar.DATE, 1)

After doing all that in the while loop, we now have a list with all the dates, headers and empty cells.

Use this list as input to your RecyclerView and render each date, month and empty cell with different views, customize them as per your need.

Or

Simply use this library, customize your views as per your need, supports events, and add additional views and animations, the possibilities are endless.

There are mainly 2 ways you can create and attach a transition.

1. Create a res/anim resource and attach it to fragment transaction via setCustomAnimations

2. Create a res/transition resource and attach it to fragment via setEnterTransition and setExitTransition

via setCustomAnimations

Simplest way to set custom transition animation is via setCustomAnimations which accepts 4 animation files, one for each transition.

val fragment = FragmentB()
supportFragmentManager.commit {
    setCustomAnimations(
        enter = R.anim.slide_in,
        exit = R.anim.fade_out,
        popEnter = R.anim.fade_in,
        popExit = R.anim.slide_out
    )
    replace(R.id.fragment_container, fragment)
    addToBackStack(null)
}

All transitions will be part of your res/anim folder.

Pros:

• Simplest way to add a transition.

• Supports all build-in animations such as scale, Fade, translate etc.

• Handles most common scenarios.

Cons:

• Cannot fine-tune transitions based of Views. Transition will be applied to whole view.

To overcome the above limitation, android has another method to attach a transition.

Via setEnterTransition Or setExitTransition

setEnterTransition and setExitTransition work differently than setCustomAnimations as they accept Transition Object instead of animation, we need to create transitions in res/transition folder.

Pros:

• Instead of running animation on complete view, a transition will run transition on all the child view's and their child views if they have any background.

• We can exclude a view from transition with excludeTarget(R.id.view_to_exclude, true) . Transition will run on all views except this view and its children.

• Similarly, you can add a view to transition using addTarget(R.id.rv_bottom_widget_list) . Transition will only run on this view and exclude all other views in the fragment.

Now we can come to the part where we run multiple transitions on same fragment.

Running Multiple Transitions At Once

We can use TransitionSet to create a set of all the transitions that we want to run together. The only caveat is:

You can only run one type of transition only once per view

Q. What does it mean?

A. For example, if you are running Fade transition on a layout then that it's child, a imageView cannot have another Fade transition which goes on for a longer duration. You have only one choice, remove imageVIew from 1st transition and add only imageView in the second Fade Transition.

// Remove imageView from parent transition, this will remove Fade transition only from imageView
val firstTransition = new Fade().excludeTarget(R.id.imageView, true)
// add second fade transition to imageView so second transition will only run on imageView
val secondTransition = new Fade().addTarge(R.id.imageVIew)

Add delay to transition

• With setStarteDelay : You can add delay with setStartDelay(long delay). It will ask the transition to run after a specified delay.

    new Fade().setStartDelay(1000)
  

• with setOrdering : You can also create a TransitionSet and make it execute sequentially so each transition will execute one after another.

    TransitionSet()
        .setOrdering(TransitionSet.ORDERING_SEQUENTIAL)
  

• With Interpolator : interpolator allows you to return different time value instead of a linear time. With this, you can return time value as zero until you want to start your animation.

    public class SlideInterpolator implements TimeInterpolator {
        public SlideInterpolator() {
        }
  
        @Override
        public float getInterpolation(float input) {
            float out;
            if (input < 0.5f) {
                out = 0;
            } else {
                out = input;
            }
            return out;
        }
    }
  

test should never throw an exception to this level

Cause of these errors are usually NullPointer or some other Exception which is not handled properly and statement is not clear where this Exception might be.

Now we can use Debugger to find exact line which is causing this failure.

Here are the steps on how:

1. Press ctrl+shift+F8 or search for 'View Breakpoints'

You will see a dialog like this:

1. Check 'Any Exception' checkbox. It will now tell debugger to pause on any line that throws any uncaught exception.

2. Debug you test case and you will get the exact line that is causing this failure.

We can avoid this by using ArgumentMatcher and ArgumentCaptor.

Here is a simple example:

// This is a simple method that has to be mocked
final int addition = calculator.getAddition(2, 3);

// For cases, where you do not know exact parameter then you can use Mockito.anyInt()
Mockito.when(mckCalculator.getAddition(Mockito.anyInt(), Mockito.anyInt())).thenReturn(5);

These any matchers comes too handy when parameters are either computed by program or you simply want to assert if correct parameter are passed to the method.

Similar to any(), we also have type specific matchers, but keep in mind these matcher will not work if your argument is null.

Here is a list of all other matchers available to you:

Mockito.anyInt(), Mockito.anyLong(), Mockito.anyString(), Mockito.anyBoolean(), Mockito.anyByte(), Mockito.anyChar(), Mockito.anyFloat(), Mockito.anyDouble(), Mockito.anyShort(), Mockito.anyList(), Mockito.anySet() and Mockito.anyMap()

Lets see an example: We have a TaskManager.class which will be mocked eventually.

public class TaskManager {
    private Map<String, Task> taskMap = new ConcurrentHashMap<>();
    public Task createTask(String name) {
        final task = new Task();
        taskMap.put(name, task);
        return task;
    }

    public void deleteTask(String name) {
        taskMap.remove(name);
    }

    public void executeTask(String name, Runnable runnable) {
        // Some long running task
        runnable.run();
    }
}

We have another class which uses TaskManager.class internally, lets call it ExampleWorker. We have to write tests for ExampleWorker.

public class ExampleWorker {
    private final String TASK_NAME = "exampleWorkedTask";

    private final TaskManager mTaskManager;
    private final Task mTask;

    public ExampleTask(TaskManager taskManager) {
        mTaskManager = taskManager;
        mTask = mTaskManager.createTask(TASK_NAME);
    }

    public Task getTask() {
        return mTask;
    }

    public void deleteTask() {
        mTaskManager.deleteTask(TASK_NAME);
        mTask = null;
    }

    public void runTask() {
        mTaskManager.executeTask(TASK_NAME, new Runnable() {
            @Override
            public void run() {
                // Do something here
            }
        });
    }
}

We can write test for ExampleWorker as below:

public class ExampleWorkerTest {
    private ExampleWorker classUnderTest;

    private TaskManager mckTaskManager;

    @Before
    public void setUp() throws Exception {
        mckTaskManager = Mockito.mock(TaskManager.class);

        classUnderTest = new ExampleWorker(mckTaskManager);
    }

    @After
    public void tearDown() throws Exception {
        classUnderTest = null;
    }

    @Test
    public void constructor_shouldCreateTask() {
        // Then
        final Task actualResult = classUnderTest.getTask();
        Assert.assertNotNull(actualResult);
    }
}

Now comes the fun part where we try to test deleteTask() method which will internally call TaskManager's deleteTask(taskName) method.

We can write simple tests with ArgumentMatcher.

@Test
public void deleteTask_shouldRemoveTask() {
    // Given
    // There are multiple ways to mock same statement, use eany one of these three based on your requirement
    // You can match exact parameter
    Mockito.doNothing().when(mckTaskManager).deleteTask("exampleWorkedTask");
    // You can match anyString(), but it will not work when string is null
    Mockito.doNothing().when(mckTaskManager).deleteTask(Mockito.anyString());
    // You can match any(), it will work even if parameter String is null
    Mockito.doNothing().when(mckTaskManager).deleteTask(Mockito.any());

    // When
    classUnderTest.deleteTask();

    // Then
    final Task actualResult = classUnderTest.getTask();
    Assert.assertNotNull(actualResult);
}

But what if we want to assert on the parameters passed while calling deleteTask(taskName) method, we can use ArgumentCaptor

@Test
public void deleteTask_shouldRemoveTask_assertWithArgumenCaptor() {
    // Given
    final ArgumentCaptor<String> taskNameArgumentMatcher = ArgumentCaptor.forClass(String.class);
    // You can create a captor and validate
    Mockito.doNothing().when(mckTaskManager).deleteTask(taskNameArgumentMatcher.captor());

    // When
    classUnderTest.deleteTask();

    // Then
    // Now we can get the value from taskNameArgumentMatcher and assert it with expectedValue
    final String actualTaskName = taskNameArgumentMatcher.getValue();
    Assert.assertEquals("exampleWorkedTask", actualTaskName);
}

But guess what, you can also get parameters used with ArgumentMatcher same as ArgumentCaptor. Here is an example:

@Test
public void deleteTask_shouldRemoveTask_assertWithArgumenMatcher() {
    // Given
    final AtomicReference<String> taskNameReference = new AtomicReference<>();
    Mockito.doAnswer(invocation -> {
        taskNameReference.set(0, invocation.getArgument(0, String.class));
        return null;
    }).when(mckTaskManager).deleteTask(Mockito.anyString());

    // When
    classUnderTest.deleteTask();

    // Then
    // Now we can get the value from taskNameArgumentMatcher and assert it with expectedValue
    final String actualTaskName = taskNameReference.get();
    Assert.assertEquals("exampleWorkedTask", actualTaskName);
}

P.S. ArgumentMatcher and ArgumentCaptor both work in a similar way difference is just with the syntax. ArgumentCaptor gives clear API to assert the values passed while ArgumentMatcher was general purpose matchers that can do everything.

This blog will only talk about when and how you need to use @PrepareForTest. If you need to know more about other things PowerMock can do, read this one first

PrepareForTest annotation

PrepareForTest has one job, it will creates a reflection of your class at bytecode level. It allows you to manipulate your source code such that you can change behavior (implementation) of declared methods.

This comes handy when you are working with class or methods that are now allowed to be mocked by Java Reflection.

Here are some f the use cases for PrepareForTest:

1. mock static methods

   @RunWith(PowerMockRunner.class)
   @PrepareForTest({
    ClassWithStaticMethods.class,
   })
   public class ClassToTest {
    @Before
    public void setUp() throws Exception {
        PowerMockito.mockStatic(ClassWithStaticMethods.class);
        PowerMockito.when(ClassWithStaticMethods.staticMethod()).thenReturn(someValue);
    }
   }
   

2. mock final classes/methods: Mockito cannot mock final methods even if you have created mock of that class. To mock these methods, we need to prepare that class and mock it with PowerMockito.mock().

   @RunWith(PowerMockRunner.class)
   @PrepareForTest({
    FinalClass.class,
    ClassWithFinalMethods.class,
   })
   public class ClassToTest {
    @Test
    public void testFinalMethods() throws Exception {
        final FinalClass mckFinalClass = PowerMockito.mock(FinalClass.class);
        PowerMockito.when(mckFinalClass.someMethod()).thenReturn(someValue);
   
        final ClassWithFinalMethods mckClassWithFinalMethods = PowerMockito.mock(ClassWithFinalMethods.class);
        PowerMockito.when(mckClassWithFinalMethods.someFinalMethod()).thenReturn(someValue);
    }
   }
   

3. Inject with PowerMockito.whenNew() When you need to inject a mock instead of creating an actual instance of a class, you can use PowerMockito.whenNew(). This will inject your mock whenever new instance is created in your source class.

   // Example Source Class
   public class ExampleClass {
    public int getHeight() {
        // Lets say we have a generic method which provides different result base on the provided id
        final CustomClass customClassInstance = new CustomClass();
        return customClass.getHeight();
    }
   }
   

   In this example class, we are creating CustomClass without any injection mechanism, we can inject our mock by adding ExampleClass in PrepareForTest and using PowerMockito.whenNew():

   @RunWith(PowerMockRunner.class)
   @PrepareForTest({
    ExampleClass.class
   })
   public class ExampleClassTest {
   
    private ExampleClass classUnderTest;
   
    @Before
    public void setUp() throws Exception {
        // Create constructor of ExampleClass
        classUnderTest = new ExampleClass();
    }
   
    @Test
    public void getHeight_shoudReturnHeightOfView() throws NoSuchMethodException {
        final int expectedHeight = 100;
        // Given
        final CustomClass mckCustomClass = Mockito.mock(CustomClass.class);
        Mockito.when(mckCustomClass.getHeight()).theReturn(expectedHeight);
        // Make sure you match exact parameters while mocking (same as we do for Mockito.mock statements).
        // There is also withArguments(first, second, ....)
        // and withAnyArguments() for cases when you don't care for arguments passed.
        PowerMockito.whenNew(CustomClass.class).withNoArguments().thenReturn(mckCustomClass);
   
        final int actualResult = classUnderTest.getHeight();
   
        Assert.assertEquals(expectedHeight, actualResult);
    }
   }
   

4. To suppress(), stub() or replace() any method of a Class. You can modify behavior of methods declared in any class, You can:
5. suppress() methods and constructors.

   // Suppress Constructor
   PowerMockito.suppress(CustomLibClass.class.getConstructors());
   // Suppress Method, it will return null if method has a return.
   PowerMockito.suppress(CustomLibClass.class.getDeclaredMethod("someMethod"));
   

6. stub() methods to return different value.

   PowerMockito.stub(CustomLibClass.class.getDeclaredMethod("someMethodThatOnlyWorksOnRumtime")).toReturn(2);
   

7. replace() methods to return different value depending on parameter supplied.

   PowerMockito.replace(View.class.getDeclaredMethod("someMethodThatWillReturnDifferentValue", int.class)).with(new InvocationHandler() {
     @Override
     public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
         final int viewId = (int) args[0];
   
         if (viewId == ViewFactory.text_view) {
             // return mock of TextView
             return Mockito.mock(TextView.class);
         } else if (viewId == ViewFactory.image_view) {
             // return mock of ImageView
             return Mockito.mock(ImageView.class);
         }
         // else you can call real method as well
         return method.invoke(proxy, args);
     }
   });
   

Although Mockito is most popular Mocking Library for Java Developers, But there are certain cases where Simple Mockito does not work. For Example, if your codebase uses any Singleton, you cannot mock them with Simple Mockito.

There are many other use cases, such as:

1. Mock Static Methods

2. Mock Final Classes and Methods

3. Inject mock for object creation with whenNew()

4. suppress(), stub() or replace() any method of a Class.

5. Suppress static initialisation.

6. Invoke private methods.

7. Inject field with Whitebox

1. PowerMockRunner

You must annotate each class you test with PowerMockRunner

@RunWith(PowerMockRunner.class)
public class ClassToTest {
}

2. PrepareForTest

Each class you add in @PrepareForTest will generate an different bytecode that can be manipulated by PowerMock.

@RunWith(PowerMockRunner.class)
@PrepareForTest({
    StaticClass.class,
    FinalClass.class,
    ClassWithFinalMethod.class
})
public class ClassToTest {
}

PreparingForTest unlocks class for a wide variety of things such as mocking final classes, classes with final, private, static or native methods that should be mocked and also classes that should be return a mock object upon instantiation.

You can read more about what @PrepareForTest unlocks from here

3. SuppressStaticInitializationFor

If you are working with classes which have static initializers such as:

package com.example;

public class ClassWithStaticInitializer {
        private static Handler mHandler = new Handler();
}

As mHandler belongs to ClassWithStaticInitializer.class not instance of ClassWithStaticInitializer, JVM will initialize this mHandler as soon as execution starts, thus we will not get a chance to mock it with whenNew(). In this case, we can suppress its initialization and later set its value with Whitebox.

Here is an example to suppress mHandler in ClassWithStaticInitializer.class:

@RunWith(PowerMockRunner.class)
@SuppressStaticInitializationFor({
        "com.example.ClassWithStaticInitializer"
})
public class ClassWithStaticInitializerTest {
        // now when we call
        @Before
        public void setup throws Exception {
                // At this stage, ClassWithStaticInitializer.mHandler will be null
                Whitebox.setInternalState(ClassWithStaticInitializer.class, "mHandler", mckHandler);
        }
}

tip: if you see any error with StackTrace containing similar looking line com.examlpe.ExampleClass.<clinit>. It means there is an static initializer, just add com.examlpe.ExampleClass in your SuppressStaticInitializationFor annotation.

4. PowerMockito.suppress()

suppress() is one of the most powerful API's provided by PowerMock.

With suppress() you can manipulate bytecode to skip executing any method or constructor.

For example, lets say you had an class which extended an library or code that you don't own, you can suppress its constructor.

// Example Source Class
public class ExampleClass extends CustomLibClass {
      public ExampleClass() {
            System.out.println("class initialised");
      }

      public void someMethod() {
            super.someMethod();
      }
}

Here, our source class extends CustomLibClass which we do not need to test. But creating a object of ExampleClass will also call constructor of CustomLibClass. This can be avoided if we tell Powermock to suppress constructor of CustomLibClass.

// Test of Example Source Class
@RunWith(PowerMockRunner.class)
@PrepareForTest({
    ExampleClass.class
})
public class ExampleClassTest {

    private ExampleClass classUnderTest;

    @Before
    public void setUp() throws Exception {
        // We should suppress constructor of CustomLibClass
        // There are multiple ways to do that
        // 1. Suppress with matching constructor, in below case it will only suppress constructor without any parameter
        PowerMockito.suppress(MemberMatcher.constructor(CustomLibClass.class));
        // Or using Java Reflection
        PowerMockito.suppress(CustomLibClass.class.getConstructor());
        // 2. Suppress all declared constructor
        PowerMockito.suppress(MemberMatcher.constructorsDeclaredIn(CustomLibClass.class));
        // Or Using Java Reflection API's
        PowerMockito.suppress(CustomLibClass.class.getConstructors());

        // Create constructor of ExampleClass, it will not call constructor of CustomLibClass
        classUnderTest = new ExampleClass();
    }

    @Test
    public void someMethod_shouldDoNothing() {
        // This is just an example, it is not necessary for an example test to test something :D
        PowerMockito.suppress(CustomLibClass.class.getDeclaredMethod("someMethod"));
    }
}

***Note: *** keep in mind, if you need to manipulate behavior (byte code) of any class, as we are doing in case of suppress constructor, we need to add ExampleClass.class in @PrepareForTest.

5. PowerMockito.stub()

suppress() works best for void methods or constructors, but what if need to return something. For that we have stub().

// Example Source Class
public class ExampleClass extends CustomLibClass {
    public int someMethod() {
        final int valueFromSuper = super.someMethodThatOnlyWorksOnRumtime();
        return valueFromSuper * 2;
    }
}

Here, we have a method with that return something, and to test our method we need get a fixed value from CustomLibClass.someMethodThatOnlyWorksOnRumtime(). To achive that, we can use stub().

@RunWith(PowerMockRunner.class)
@PrepareForTest({
    ExampleClass.class
})
public class ExampleClassTest {

    private ExampleClass classUnderTest;

    @Before
    public void setUp() throws Exception {
        // Create constructor of ExampleClass
        classUnderTest = new ExampleClass();
    }

    @Test
    public void someMethod_shouldReturnFour_whenCustomLibSomeMethodThatOnlyWorksOnRumtimeReturnTwo() throws NoSuchMethodException {
        // Given
        PowerMockito.stub(CustomLibClass.class.getDeclaredMethod("someMethodThatOnlyWorksOnRumtime")).toReturn(2);

        // When
        final int actualResult = classUnderTest.someMethod();

        // Then
        // As we stubbed someMethodThatOnlyWorksOnRumtime() to return 2, our result will be 2 * 2 = 4
        Assert.assertEquals(4, actualResult);
    }
}

***Note: *** keep in mind, if you need to manipulate behavior (byte code) of any class, as we are doing in case of stub method, we need to add ExampleClass.class in @PrepareForTest.

5. PowerMockito.replace()

stub() works best when we don't care about the parameters and want same result irrespective of parameter passed.

With replace() we can go one step ahead of stub(), depending upon the supplied parameters, we can return different results. Let's see another similar example:

// Example Source Class
public class ExampleClass extends Screen {
    public int getHeaderView() {
        // Lets say we have a generic method which provides different result base on the provided id
        final TextView textView = findViewById(ViewFactory.text_view);
        textView.setText("Header");
        final ImageView imageView  = findViewById(ViewFactory.image_view);
        imageView.setImage(BitmapFactory.getUserProfileImage());
        return new HStack(textView, imageView);
    }
}

Now, if we want to test our method with dynamic values, maybe you need to return different values based on parameter.

@RunWith(PowerMockRunner.class)
@PrepareForTest({
    ExampleClass.class
})
public class ExampleClassTest {

    private ExampleClass classUnderTest;

    @Before
    public void setUp() throws Exception {
        // Create constructor of ExampleClass
        classUnderTest = new ExampleClass();
    }

    @Test
    public void getHeaderView_shoudReturnHStack() throws NoSuchMethodException {
        // Given
        PowerMockito.replace(View.class.getDeclaredMethod("someMethodThatWillReturnDifferentValue", int.class)).with(new InvocationHandler() {
            @Override
            public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
                final int viewId = (int) args[0];

                if (viewId == ViewFactory.text_view) {
                    // return mock of TextView
                    return Mockito.mock(TextView.class);
                } else if (viewId == ViewFactory.image_view) {
                    // return mock of ImageView
                    return Mockito.mock(ImageView.class);
                }
                // else you can call real method as well
                return method.invoke(proxy, args);
            }
        });

        // When
        final HStack actualResult = classUnderTest.getHeaderView();

        Assert.assertNotNull(actualResult);
    }
}

***Note: *** keep in mind, if you need to manipulate behavior (byte code) of any class, as we are doing in case of replace method, we need to add ExampleClass.class in @PrepareForTest.

6. PowerMockito.whenNew()

There are some cases where source code directly create a new instance of object without any injection mechanism. JVM will create an instance with actual class with actual methods. For these cases, we can use PowerMockito.whenNew() method to

Similar to Mockito's when() statement, we can tell PowerMock to inject our mock instead of creating new instance of real object.

Here is an example:

// Example Source Class
public class ExampleClass {
    public int getHeight() {
        // Lets say we have a generic method which provides different result base on the provided id
        final CustomClass customClassInstance = new CustomClass();
        return customClass.getHeight();
    }
}

In above example, CustomClass instance is created without any mechanism to inject it, lets see how can we tell PowerMockito to inject our mock.

@RunWith(PowerMockRunner.class)
@PrepareForTest({
    ExampleClass.class
})
public class ExampleClassTest {

    private ExampleClass classUnderTest;

    @Before
    public void setUp() throws Exception {
        // Create constructor of ExampleClass
        classUnderTest = new ExampleClass();
    }

    @Test
    public void getHeight_shoudReturnHeightOfView() throws NoSuchMethodException {
        final int expectedHeight = 100;
        // Given
        final CustomClass mckCustomClass = Mockito.mock(CustomClass.class);
        Mockito.when(mckCustomClass.getHeight()).theReturn(expectedHeight);
        // Make sure you match exact parameters while mocking (same as we do for Mockito.mock statements).
        // There is also withArguments(first, second, ....)
        // and withAnyArguments() for cases when you don't care for arguments passed.
        PowerMockito.whenNew(CustomClass.class).withNoArguments().thenReturn(mckCustomClass);

        final int actualResult = classUnderTest.getHeight();

        Assert.assertEquals(expectedHeight, actualResult);
    }
}

***Note: *** keep in mind, if you need to manipulate behavior (byte code) of any class, as we are doing in case of whenNew() method, we need to add ExampleClass.class in @PrepareForTest. Note Keep in mind, whenNew() will not work when new instance was created inside a nested scope.

7. Whitebox.invokeMethod()

Used to call an private method, just a wrapper on Java Reflection API's

// Example Source Class
public class ExampleClass {
    private int getHeight() {
        // Lets say we have a generic method which provides different result base on the provided id
        final CustomClass customClassInstance = new CustomClass();
        return customClass.getHeight();
    }
}

We can use Whitebox.invokeMethod() to execute that method, here an example:

@RunWith(PowerMockRunner.class)
@PrepareForTest({
    ExampleClass.class
})
public class ExampleClassTest {

    private ExampleClass classUnderTest;

    @Before
    public void setUp() throws Exception {
        // Create constructor of ExampleClass
        classUnderTest = new ExampleClass();
    }

    @Test
    public void getHeight_shoudReturnHeightOfView() throws NoSuchMethodException {
        final int expectedHeight = 100;
        // Given
        final CustomClass mckCustomClass = Mockito.mock(CustomClass.class);
        Mockito.when(mckCustomClass.getHeight()).theReturn(expectedHeight);
        // Make sure you match exact parameters while mocking (same as we do for Mockito.mock statements).
        // There is also withArguments(first, second, ....)
        // and withAnyArguments() for cases when you dont care for arguments passed.
        PowerMockito.whenNew(CustomClass.class).withNoArguments().thenReturn(mckCustomClass);

        final int actualResult = Whitebox.invokeMethod(classUnderTest, "getHeight");;

        Assert.assertEquals(expectedHeight, actualResult);
    }
}

***Note: *** you should not call invokeMethod() unnecessarily, try to follow code execution flow to get to any private method.

8. Whitebox.setInternalState()

PowerMockito allows you to inject value to globally declared member fields, this is also a wrapper around Java Reflection API's.

Whitebox.setInternalState(classUnderTest, "mCustomClassObject", (CustomClass) null);

***Note: *** You should not set values left and wright with setInternalState() method, this should only be used when there is some if condition that is always true and you need to test else condition. for e.x. a null check when that object cannot be null at that time.

8. Whitebox.getInternalState()

Similar to setInternalState() you can get value of any global field at my time with getInternalState() method.

This method is really useful to test any void methods, we can get any state change caused by that void method and write our assertion on that.

for example:

// Example Source Class
public class ExampleClass {

    private int mHeight = 0;

    public void clear() {
        // this is a void method that updated height and does not return anything.
        mHeight = 0;
    }
}

With method's like clear() that return void but change state of class, we can get value of mHeight and check if it was unset or not.

Here is how we would achieve that:

@RunWith(PowerMockRunner.class)
@PrepareForTest({
    ExampleClass.class
})
public class ExampleClassTest {

    private ExampleClass classUnderTest;

    @Before
    public void setUp() throws Exception {
        // Create constructor of ExampleClass
        classUnderTest = new ExampleClass();
    }

    @Test
    public void getHeight_shoudReturnHeightOfView() throws NoSuchMethodException {
        // Given

        // When
        classUnderTest.clear()

        // Then
        final int mHeight = Whitebox.getInternalState(classUnderTest, "mHeight");;
        Assert.assertEquals(0, mHeight);
    }
}

1. Mockito.mock()

Creates a mock of any class. By default, it will return default value for methods and fields when not mocked.

For Example: Primitive data types such as byte, short, int, long, float, double, boolean and char will return default value i.e 0 or false

Non-primitive data types such as String, Arrays and Classes return null when they are not mocked.

// with annotation
@Mock
private ClassName mock;

// Or with static method
final ClassName mock = Mockito.mock(ClassName.class);

// mock methods that returns something
Mockito.when(mock.sampleMethod()).thenReturn(sampleVal);

// mock method to throw Exception
Mockito.when(mock.sampleMethod()).thenThrow(SampleException.class);

// Mock void methods
Mockito.doNothing().when(mock).method();

// you can get invocation parameters with .thenAnswer()
Mockito.when(mock.sampleMethod(Mockito.any(OtherClass.class))).thenAnswer((Answer<ThirdClass>) invocation -> {
      final OtherClass parameter1 = invocation.getArgument(0);
      return thirdClassObject; 
});

// Verify interactions
Mockito.verify(mock, Mockito.times(1)).sampleMethod();

// Verify, method should not be invoked even once
Mockito.verify(mock, Mockito.never()).sampleMethod2();

// Verify, no methods should be called on given mock
Mockito.verifyNoMoreInteractions(otherMockedClass);

2. Mockito.spy()

It is similar to mock() but instead of return default value it will call the actual implementation when not mocked.

// with annotation
@Spy
private ClassName spy;

// Or with static method
final ClassName spy = Mockito.spy(ClassName.class);

// mock methods that returns something
Mockito.doReturn(value).when(spy).method();

// mock method to throw exception
Mockito.doThrow(new ExceptionClass()).when(spy).metohd();

// mock void methods
Mockito.doNothing().when(spy).method();

3. Mockito.mockStatic()

Now with Mockito 3, you can mock Classes with static methods.

try (MockedStatic<Foo> dummyStatic = Mockito.mockStatic(ClassName.class)) {
    dummyStatic.when(() -> ClassName.method("param1"))
               .thenReturn("someValue");
    // when
    System.out.println(ClassName.method("param1"));
    //then
    dummyStatic.verify(
            () -> ClassName.method("param1"),
            times(1), 
    );
}

4. ArgumentMatcher

Basic Rule to match any statement with Mockito is to correctly match its parameters. If any of the parameter did not match then instruction will not be mocked.

// example statement
final int addition = calculator.getAddition(2, 3);

// you have to match exact parameters, in this case (2,3)
Mockito.when(mckCalculator.getAddition(2, 3)).thenReturn(5);

// If you mock for (3,4), you mocked result will not be returned
Mockito.when(mckCalculator.getAddition(3, 4)).thenReturn(5);

// For cases, where you do not know exact parameter then you can use Mockito.anyInt()
Mockito.when(mckCalculator.getAddition(Mockito.anyInt(), Mockito.anyInt())).thenReturn(5);

Similarly we have Mockito.any(), Mockito.anyLong(), Mockito.anyString(), Mockito.anyBoolean(), Mockito.anyByte(), Mockito.anyChar(), Mockito.anyFloat(), Mockito.anyDouble(), Mockito.anyShort(), Mockito.anyList(), Mockito.anySet() and Mockito.anyMap()

5. ArgumentCaptor

You can also get value of parameters of mocked methods, you can then Assert for their value.

Below is the same example of calculator class.

// example statement
final int addition = calculator.getAddition(2, 3);

// Create captor
ArgumentCaptor<Integer> argumentCaptor = ArgumentCaptor.forClass(Integer.class);

Mockito.when(mckCalculator.getAddition(argumentCaptor.capture(), argumentCaptor.capture())).thenReturn(5);

final int firstNum = argumentCaptor.getValue();
Assert.assertEquals(2, firstNum);

// You can get second num by calling getAllValues()
final int secondNum = argumentCaptor.getAllValues()[1];
Assert.assertEquals(3, secondNum);

After we create a Pdf, we should be able to show contents of Pdf to User, to do that we can use PdfRenderer class and get bitmap of every page inside Pdf.

Here is a simple function you can use to get Pdf pages as Bitmap

  /**
     * Convert PDF to bitmap, only works on devices above LOLLIPOP
     *
     * @param pdfFile pdf file
     * @return list of bitmap of every page
     * @throws Exception
     */
    public static ArrayList<Bitmap> pdfToBitmap(File pdfFile) throws Exception, IllegalStateException {
        if (pdfFile == null || pdfFile.exists() == false) {
            throw new IllegalStateException("");
        }
        if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.LOLLIPOP) {
            throw new Exception("PDF preview image cannot be generated in this device");
        }
        if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.LOLLIPOP) {
            return null;
        }

        ArrayList<Bitmap> bitmaps = new ArrayList<>();

        try {
            PdfRenderer renderer = new PdfRenderer(ParcelFileDescriptor.open(pdfFile, ParcelFileDescriptor.MODE_READ_ONLY));

            Bitmap bitmap;
            final int pageCount = renderer.getPageCount();
            for (int i = 0; i < pageCount; i++) {
                PdfRenderer.Page page = renderer.openPage(i);

                int width = page.getWidth();
                int height = page.getHeight();

                /* FOR HIGHER QUALITY IMAGES, USE:
                int width = context.getResources().getDisplayMetrics().densityDpi / 72 * page.getWidth();
                int height = context.getResources().getDisplayMetrics().densityDpi / 72 * page.getHeight();
                */

                bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
                page.render(bitmap, null, null, PdfRenderer.Page.RENDER_MODE_FOR_DISPLAY);

                bitmaps.add(bitmap);

                // close the page
                page.close();
            }
            // close the renderer
            renderer.close();
        } catch (Exception ex) {
            ex.printStackTrace();
        }
        return bitmaps;
    }

To make your work easier i have created a Library to generate dynamic PDF using above methods View on Github

But creating PDF from static data has a big disadvantage. You cannot set data at runtime, i.e. you cannot set text from DB or load image from internet.

Creating PDF: Advanced

To solve this problem:

• We will create empty Activity with LinearLayout of size [595xwrap_content], we will get reference of that LinearLayout and Add our Views programmatically.
• We only need above LinearLayout so we can calculate height of views we are about to add. As Views created programmatically cannot give height they will take after rendering. i.e. rendering of each View is mandatory.
• Now we know why we need to first render View to layout, let's proceed:
• Let's sat we need to add a TextView to Pdf, we will call it 'textView1'.
• 'textView1' will be added to 595xwrap_content LinearLayout, So it can render and we take a note of its height.

private final Map<String, int> viewToHeightMap = new HashMap<>();

final LinearLayout layout595xwrap_content = findViewById(R.id.layout595xwrap_content);

final TextView textView1 = new TextView(context);
layout595xwrap_content.add(textView1);
textView1.post(new Runnable() {
  void run() {
    layout595xwrap_content.put('textView1', textView1.getHeight())
  }
})

• Accordingly add all view to 595xwrap_content LinearLayout one-by-one and take a note of height of each view.
• Create LinearLayout of size 595x842px which will be Single Page in Pdf. Add Views one-by-one until height sum reaches 842px.
• When 842px height is reached, again create new LinearLayout of size 595x842px which will be Second Page in the Pdf and so on.
• After you have create List of LineatLayouts as Pdf Pages, we simply have to use methods in previous part to generate Pdf.

In Next Part we will generate preview of any Pdf File using PdfRenderer

To make your work easier i have created a Library to generate dynamic PDF using above methods View on Github

As i was looking for a library to create PDF natively on Android but couldn't found one that is free to use.

Some time ago, i had a use case where i needed to create PDF on device and unfortunately no free to use library was available at that time which can create PDF's on user's device.

So, i digged into Android's Printing custom documents where i came across PdfDocument which can generate PDF from View.

Here is how it is done:

1. We start by creating a PdfDocument

   // Create PDF Document.
   PdfDocument pdfDocument = new PdfDocument();
   

2. Create a Page in PdfDocument

   PdfDocument.PageInfo pageInfo = new PdfDocument.PageInfo.
                        Builder((int) PDF_PAGE_WIDTH, (int) PDF_PAGE_HEIGHT, i + 1).create();
   

3. Create a view to be printed on PDF

   TextView view = new TextView(context);
   view.setText("PDF Example");
   

4. Draw view on the page

   Canvas pageCanvas = page.getCanvas();
   pageCanvas.scale(1f, 1f);
   int pageWidth = pageCanvas.getWidth();
   int pageHeight = pageCanvas.getHeight();
   int measureWidth = View.MeasureSpec.makeMeasureSpec(pageWidth, View.MeasureSpec.EXACTLY);
   int measuredHeight = View.MeasureSpec.makeMeasureSpec(pageHeight, View.MeasureSpec.EXACTLY);
   contentView.measure(measureWidth, measuredHeight);
   contentView.layout(0, 0, pageWidth, pageHeight);
   contentView.draw(pageCanvas);
   

5. Finish the page

   pdfDocument.finishPage(page);
   

6. Save pdf to file

   File pdfFile = new File(mFilePath);
   // Write PDFDocument to the file.
   FileOutputStream  fos = new FileOutputStream(pdfFile);
   pdfDocument.writeTo(fos);
   // Close output stream
   fos.close();
   // close the document
   pdfDocument.close();
   

Above code will create a simple PDF with one page that contains TextView inside it.

Now let's start creating an actual PDF...

Creating PDF: Simple

PdfDocument API will renders any views to PDF. It is as simple as creating an activity, getting its view and rendering PdfDocument of that view.

A Simple PDF page is of height="842px" and width="595px"

Note: As dp and sp are device dependent, make sure you create all of your layout in px as it will look same in all devices.

Steps:

1. Create an Activity which will have a vertical LinearLayout with height="842px" and width="595px".
2. Add all views with static data inside it.
3. Make sure no view exceeds allotted height as it will be trimmed.
4. If you want to create new page just repeat 1-3.
5. In your onCreate(), get reference of all LinearLayout and create PDF (using step 4) with each layout as one page.
6. Done.

P.S. in next chapter we will create more advanced PDF and dynamically insert data and create multi page PDF

To make your work easier i have created a Library to generate dynamic PDF using above methods View on Github

Now we will try something simpler and which works across our application and not bound to a Object.

It has some interesting use cases like listening to Route Change so you can change page header and show logged in user info Or listening an event when next page is loaded.

Event emitter can be achieved with 3 simple steps:

1. Register event
2. Trigger event
3. Unregister that event

So, let's Start:

Initialisation

First thing first, we need a global variable to hold all events and their callbacks like this:

// events property will hold our events and all the listeners it has.
this.events = {};

And if you are using ES6 classes, we have to declare this class as singleton, to do that we simply create a global variable and check if variable is initialised or not.

let eventManagerInstance = null;
export default class EventManager {
  constructor() {
    if (!eventManagerInstance) {
      console.log("event inttialised");
      eventManagerInstance = this;
      // events hold our events and their callbacks
      this.events = {};
      // eventTypes can be used to keep track of all the events that can be used by this event manager.
      this.eventTypes = {
        ROUTE_CHANGED: "changeRoute",
        SCROLL_DIRECTION_CHANGED: "scrollDirectionChanged",
        SCROLL_LOAD_NEXT_PAGE: "scrollLoadNextPage"
      };
    }
    return eventManagerInstance;
  }
}

Register event in Event Manager

To register a event we need 2 parameters, a unique name for event and a callback function.

/**
   * Register to a event
   *
   * @param {string} eventName Name of event to register for
   * @param {Function} fn callback function
   */
  on(eventName, fn) {
    console.log("event On: " + eventName);
    this.events[eventName] = this.events[eventName] || [];
    this.events[eventName].push(fn);
  }

Trigger that event

After we set up a event listener we can send data via triggers like this,

/**
   * Trigger a event with data
   *
   * @param {string} eventName Event to call
   * @param {Object} data optional data to pass
   */
  trigger(eventName, data) {
    console.log("event triggered: " + eventName);
    if (this.events[eventName]) {
      this.events[eventName].forEach(function(fn) {
        fn(data);
      });
    }
  }

Unregister that event

Once we are done listening to a particular event we should be able to unregister.

  /**
   * Un-Register from a event
   *
   * @param {string} eventName Name of event to de-register from
   * @param {Function} fn callback function to be removed
   */
  off(eventName, fn) {
    console.log("event Off: " + eventName);
    if (this.events[eventName]) {
      for (var i = 0; i < this.events[eventName].length; i++) {
        if (this.events[eventName][i] === fn) {
          this.events[eventName].splice(i, 1);
          break;
        }
      }
    }
  }

Here is the full implementation of Event Manager class.

// This class is implemented as SINGLETON(singleton)
let eventManagerInstance = null;

export default class EventManager {
  constructor() {
    if (!eventManagerInstance) {
      console.log("event inttialised");
      eventManagerInstance = this;
      this.events = {};
      this.eventTypes = {
        ROUTE_CHANGED: "changeRoute",
        SCROLL_DIRECTION_CHANGED: "scrollDirectionChanged",
        SCROLL_LOAD_NEXT_PAGE: "scrollLoadNextPage"
      };
    }
    return eventManagerInstance;
  }

  /**
   * Register to a event
   *
   * @param {string} eventName Name of event to register for
   * @param {Function} fn callback function
   */
  on(eventName, fn) {
    console.log("event On: " + eventName);
    this.events[eventName] = this.events[eventName] || [];
    this.events[eventName].push(fn);
  }

  /**
   * Un-Register from a event
   *
   * @param {string} eventName Name of event to de-register from
   * @param {Function} fn callback function to be removed
   */
  off(eventName, fn) {
    console.log("event Off: " + eventName);
    if (this.events[eventName]) {
      for (var i = 0; i < this.events[eventName].length; i++) {
        if (this.events[eventName][i] === fn) {
          this.events[eventName].splice(i, 1);
          break;
        }
      }
    }
  }

  /**
   * Trigger a event with data
   *
   * @param {string} eventName Event to call
   * @param {Object} data optional data to pass
   */
  trigger(eventName, data) {
    console.log("event triggered: " + eventName);
    if (this.events[eventName]) {
      this.events[eventName].forEach(function(fn) {
        fn(data);
      });
    }
  }
}

How to use EventManager class

Using event manager is simple, you just have to subscribe to a event like this:

// Get eventManager instance
this.eventManager = new EventManager();

// Declare Event Callback Function, so we can unregister it as sometime.
this.eventCallbackhandler = function(eventData) {
  console.log(eventData);
};

// Subscribe to ROUTE_CHANGED event
this.eventManager.on(
  this.eventManager.eventTypes.ROUTE_CHANGED,
  this.eventCallbackhandler
);

To Trigger ROUTE_CHANGED from different component, we just have to

emitEvent() {
  const eventManager = new EventManager();
  eventManager.trigger(eventManager.eventTypes.ROUTE_CHANGED, {
    eventSource: "EventEmitterComponent"
  });
}

Here is a working sample on codesandbox.io

RxJS is javascript implementation of Reactive Extension, it allows you to use Observer pattern in your web app.

RxJS is much more than what we are going to learn here, that is why the name (RxJS at its basic)

At its basic Observer pattern lets you subscribe to changes in subject with the help of events.

First we will focus on Subscribers and Events:

Subscriber:

Object has a property named subscribers to manage subscribers who want to listen to changes in our subject.

let subscribers= []

When a subscriber arrives, object adds it to subscribers and when a subscriber wants to unsubscribe, subject should remove subscriber from his subscribers

Event:

When data of subject is changed or when subject wants to inform changes to its subscribers it triggers an event. When an event is triggered, it is duty of a subject to inform every subscriber about the event. To do that we just have to iterate over all subscribers and execute their callbacks.

this.subscribers.forEach(function(fn) {
  fn(data);
});

So let's come to the final step of a Observable Pattern and that is Subject

Subject:

A subject which just an Object which informs its changes to all of its subscribers.

Here is an example of a general Observable Subject will extend.

export default class ObservableSubject {
  constructor() {
    this.subscribers = [];
  }

  getAllSubscribers() {
    return this.subscribers;
  }

  /**
   * Register to a event
   *
   * @param {Function} fn subscriber callback function
   */
  subscribe(fn) {
    this.subscribers.push(fn);
  }

  /**
   * Un-Register from a event
   *
   * @param {Function} fn callback function to be removed
   */
  unsubscribe(eventName, fn) {
    if (this.subscribers) {
      for (var i = 0; i < this.subscribers.length; i++) {
        if (this.subscribers[i] === fn) {
          this.subscribers.splice(i, 1);
          break;
        }
      }
    }
  }

  /**
   * Trigger a event with data
   *
   * @param {Object} data optional data to pass
   */
  trigger(data) {
    if (this.subscribers) {
      this.subscribers.forEach(function(fn) {
        fn(data);
      });
    }
  }
}

So, let's make a observable User which will extent ObservableSubject

import ObservableSubject from "./ObservableSubject";

export default class User extends ObservableSubject {
  setName(name) {
    this.name = name;
    this.trigger({
      user: {
        name: this.name,
        email: this.email
      }
    });
  }

  getName() {
    return this.name;
  }

  setEmail(email) {
    this.email = email;
    this.trigger({
      user: {
        name: this.name,
        email: this.email
      }
    });
  }

  getEmail() {
    return this.email;
  }
}

And this concludes a basic RxJs implementation.

Complete example is over at codesandbox

Routing is the process of selecting a path for traffic in a network or between or across multiple networks.

Im pretty sure that you all know what Router is and what it does. But, how to make one?

It's 4 basic steps:

• Add click handler to every anchor tag <a>

  document.addEventListener(
        "click",
        function(event) {
          if (event.target.tagName === "A") {
            event.preventDefault();
            var href = event.target.href;
            console.log(href);
          }
  }, false);
  

• On click handler, make get request to href of <a> and load html to current page.

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    history.pushState([], href, href);
    // Here we are replacing current page html using new page html
    document.getElementById("app").innerHTML = xhr.responseText;
  }
  };
  xhr.open("GET", href, true);
  xhr.send(null);
  

• Push new page to history

  // Add new history entry
  history.pushState([], title, href);
  

• Add a navigation handler to know when user pressed back and forward on browser.

  // Listen to browser history event
  window.addEventListener("popstate", function(e) {
  // Download new page's html and set it to current page 
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      document.getElementById("app").innerHTML = xhr.responseText;
    }
  };
  xhr.open("GET", window.location.pathname, true);
  xhr.send(null);
  });
  

Here is code sample on codesandbox

Above example can easily be implemented as a <Link/> Component in react.

import React, { Component } from 'react';

export default class Link extends Component {

    constructor(props) {
        super(props);
        this.state = props;

        this.linkClicked = this.linkClicked.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        // You don't have to do this check first, but it can help prevent an unneeded render
        if (nextProps.href !== this.state.href) {
            this.setState({ href: nextProps.href });
        }
        if (nextProps.title !== this.state.title) {
            this.setState({ title: nextProps.title });
        }
    }

    linkClicked(event) {
        if (!this.state.href || this.state.href.length <= 0) {
            event.preventDefault();
            return false;
        }
        if (typeof window != 'undefined') {
            event.preventDefault();
            history.pushState(this.state.title, this.state.title, this.state.href);
            window.title = this.state.title;
            history.pushState([], this.state.href, this.state.href);
            // Here we are replacing current page html using new page html
            // Set new state for your component here
        }
    }

    render() {
        return (
            <a href={this.state.href} title={this.state.title} style={this.state.style} className={this.state.className} onClick={this.linkClicked}>
                {this.props.children}
            </a>
        );
    }
}

If you are coming to this story directly, i’ll suggest to take a look at part 1, part 2 and Part 3 of this series.

So, last time i left you saying,

“Be indistinguishable from native apps.”

As a web developers we were successful in convincing user to leave there Native Desktop Apps for a web app, Now only few people use an native email client over Gmail. But we are still not able to make user leave there native mobile app for a mobile web app.

This is because a native app feels more comfortable smooth and responsive than a web app. A native app has Push Notification for engagement, Device storage for offline access and much more. But this is changing quickly as web can do more things, check what web can do today.

* Progressive Web App

PWA (Progressive Web App) is the next step in making web feel more native to a device.

PWA give you access to native capabilities such as:

1. Offline Storage (Service Worker)
2. Push Notification (Service Worker)
3. Install as Native (App Manifest)
4. Open app links (App Manifest)

To use PWA you must be using https

PWA has 2 main Service Worker and Web App Manifest

1. Service Worker:

Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.

To read more about service worker goto MDN. They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.).

2. Web App Manifest:

The web app manifest provides information about a web application in a JSON text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience). PWA manifests include its name, author, icon(s), version, description, and list of all the necessary resources (among other things).

To read more about web app manifest goto MDN.

Other Enhancements:

As we know javascript executes all operations in a single thread. It becomes a problem while going more intensive tasks such as image processing. To overcome this situation we can transfer that task to Web Worker which will execute that task in a background thread. You cannot touch any DOM element from Web Worker and only transfer data using messages. To read more about Web Worker goto MDN.

If you are coming to this story directly, i’ll suggest to take a look at part 1 and part 2 of this series.

So, last time i left you saying,

“Not everything has to be done on server.”

We are living in a new age of web development, previously everything was done on server side (Rendering, routing etc). After introduction of AJAX), web development got a whole new way to create and manage user interaction. All the likes, adding comment does not needed a page refresh.

But without using a standard development pattern like MVC, it was getting hard to manage bigger and bigger applications.

Javascript Frameworks:

The Dawn Of Web Frameworks begins in 2009 when a guy at google started working on a js framework the made 18,000 lines of jquery code to 2,000 angularjs code (That app was google feedback).

The reason why they are so successful because:

1. The use a well proven app development pattern (MVC, MVVC, MV* etc).
2. Only load parts of web page that is changing (Single page application).
3. Reusing web components.
4. If you are using node js server you can user isomorphic javascript for a single codebase.
5. Takes care of your routing.

Leaders:

There are more than 100 frameworks in market, leaders are:

1. Angular
2. React
3. Vue
4. Meteor (we will be excluding this)
5. Backbone
6. Ember
7. Polymer

Here is a benchmark of these frameworks fighting for glory,

[## Javascript Frameworks Benchmarks

Duration for updating all 1000 rows of the table (with 5 warmup iterations).

stefankrause.net](http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html?source=post_page-----4ec0d4fde428----------------------)

I won't tell you to use a specific framework over other, you can look at the benchmarks and decide it for yourself.

So, now back to how you can boost your web app’s performance. Using a Javascript framework helps you from generating those heavy HTML pages on server but it also increase time for first meaningful paint.

The way our web app rendered is:

1. Get Container (simple page).
2. Load Javascript framework.
3. Load Controllers.
4. Get template (not in case of React).
5. Get api data.
6. Render template with data.

Which is even slower than older methods, just get HTML and BAMM first meaningful paint is here.

But it is still good because, everything that changes from here will be blazing fast and what can never be matched with traditional server pages.

But there is a solution for above problem → Server Side Rendering.

Server Side Rendering:

In server side rendering, web app’s are rendered as HTML from server and after serving that 1st page client apps kicks in and takes control of application from there. So, it is a mix of old methods with new technology.

Server side rendering also helps in keeping a single code base, you can achieve this with phantomJs (it has a npm module).

But i will suggest take one which handles server side rendering itself, this will boost your app performance big time.

Webpack:

Loading multiple javascript files surely takes more time than all file combined as one. Webpack helps you achieve that.

Javascript frameworks are big topic in itself, I will not going to explain you every one of them.

Choose one Choose Wisely:

1. One way to choose is, Just have a look at every frameworks homepage, go with the one loads faster.
2. If you are new to Javascript stay away from things you don't understand (means stay away from angular 2 or reactjs).
3. Some people also go for creating a minimal framework themself (They say they only needed that much, so why to include 50kb more).
4. Other way would be to get one which has everything you need.

Personally i would suggest to go for reactjs as they get new and shiny things first. (For now i am so much invested in angularjs, that i cannot leave it. But soon i will give vuejs a try).

OK, it time for another shower thought here:

“Be indistinguishable from native apps.”

Native apps always have a sweet spot in user’s heart, let's change that in next chapter → Browsers .

If you are looking to boost performance of you web application, then do read part 1 of this series.

So in last part i left you after saying;

“Best way to use database is, not using it at all.”

Reading database is nothing but reading a well organised file (that is why they are persistent, duh). With use of some amazing algorithms, they are queried, read and written.

But reading a file comes with a cost in terms of cpu utilization and delay to serve those requests. This does not seem big problem when you are serving 4–5 requests per second, but as you reach something like 20–30 requests per second your database starts to show some strange behaviour in serving those requests.

Suppose you run a web app like twitter (which serves 143,199 tweets per sec and for read let's multiply that with 0.2 of 313M Monthly active users which comes close to 8964257.4M reads per sec), It is not possible to query database for every new request, so, solution to this problem is in-memory databases.

in-memory database

Server today do not have any boundaries (not literally), they have huge processing power, petabytes of petabytes of storage and some terabytes of RAM. With this amazing specs we get liberty to do a lot of operations in runtime and store a lot of things in memory.

Reading and writing to memory is faster than anything else, with this idea came concept of in-memory databases.

There are 2 major solutions for in-memory database:

1. Redis
2. Memcached

There are more but these are the famous once, and that's what i care about.

Memcached is a little part of Redis, redis is much more than a in-memory key pair database, it has powerful data types, transactions with optimistic locking, fast message channels and much more.

Twitter also uses redis, let me tell how:

1. Tweets made are stored in redis with an associated key.
2. Tweets are then pushed to users unique timeline which is also stored in redis (this could be the reason why you cannot update your tweet).
3. There are more questions like what happens to timeline when user follows another user or unfollows a user, but this is how they give you amazing response time.

So, key points to note here:

1. Anything which has a large read request but less write request can be stored in a in-memory database.
2. They can be blog, post or something like a tweet but not who liked post, comments of a post (these generally have a direct access with URL like /postid, /videoid).

If RAM is not a problem then there is no reason to not use a in-memory database.

Some more things that can be done on server side:

1. Choose a good server side language, because implementation to handle requests are done by those things, they handle your threads and all sorts of other stuff.
2. Choose a language that can take proper advantage of your server capabilities. That means, it should use 64 bit data bus if provided, use all 8 or 16 cpu cores if provided.
3. Here as well, you can use distributed system to form a cluster of servers use it as a load balancer.

Now, some more golden words by me:

“Not everything has to be done on server.”

Our server is stronger than ever so does our users devices, we will see how to use its power for some more performance boost with our client app in next chapter → Client App.