Simpler Microfrontends Implementation with React and ESNext

There has been a lot of talks and buzz around Microfrontends.

From https://micro-frontends.org/, Microfrontend systems are

Techniques, strategies and recipes for building a modern web app with multiple teams that can ship features independently.

The basic idea is to extend the idea of microservices to the frontend development through which a system can be divided into teams that own end to end system and independently deliver frontend applications to compose into a greater whole.

A simple illustration to explain the idea is shown as below:

Microservices with Monolith Frontend

microservices

Microservices with Micro Frontend

microfrontends

Microfrontends brings the same benefits like performance, incremental upgrades, decoupled codebases, independent deployments, autonomous teams to the frontend engineering like microservices bring to backend services.

Now the teams and the UI can be broken down smaller groups as shown in the pictures but the challenge is in integration and serving a unified experience to the users and there will always be cases where interfaces or interface components will collide as UI components can easily expand cross pages/domains.

There are already a few architectures being that are being used and proposed to achieve Microfrontend architecture. Cam Jackson’s post on Martin Fowler includes some nice approaches.

Let’s see how our take on microfrontends at Cloudfactory affects page organization.

Read More...

Making Test Driven Development work

Here are the slides for the presentation on Test Driven Development I gave at CloudFactory on a Lunch and Learn Session.

The goal of this talk was to introduce TDD as a process rather then a paradigm. It explains how TDD can provide lower defect rates, higher productivity, modular design and a much more logical and fun technique for us to solve problems. It describes the cycle of writing a test first, and application code afterwards – followed by refactoring. It tries to describe how to approach TDD: Where do I begin to develop? What exactly should I test? How should tests be structured?.

Read More...

Ember Cli and Rails And Beyond

Ember Cli and Rails Setup

Rails setup is pretty staright forward with rails new .. and new ember cli app with ember new .. but with following folder configuration

  | embercli-rails-app
  |-- rails
  |-- ember

Inside of main project folder we’ll have a folder which will contain the rails code and another folder which will contain ember code only.

We would like to have coffeescript.

For coffeescript

  npm install --save-dev ember-cli-coffeescript

and renaming .js files to .coffee and correcting the js syntax to coffee will do the trick.

Make sure that ember app is all well by using ember server and visiting http://localhost:4200.

Before proceeding, it would be nice to have some tests.

Lets create a new test at ‘ember/tests/integration/home-page-test.coffee’.

  `import Ember from 'ember'`
  `import startApp from 'cli-app/tests/helpers/start-app'`
  `import Ember from 'ember'`

  App = null

  module 'Integration - Home Page',
    setup: ->
      App = startApp()
    ,
    teardown: ->
      Ember.run(App, 'destroy')

  test 'Should have Welcome test', ->
    visit('/').then ->
      equal(find('h2#title').text(), 'Welcome to Ember.js');

Visit http://localhost:4200/tests to run the tests.

Read More...

Emberjs and Highcharts

Let’s write a reusable ember view for rendering graphs and charts powered by highcharts.

  App.HighChartsView = Ember.View.extend
    tagName: 'div'
    classNames: [ 'highcharts' ]
    chartConfig = {}

    setConfig: (type)->
      config = {
        chart:
          type: type
        title:
          text: @title || 'Highcharts'
        xAxis:
          categories: @dataset.categories || []
        yAxis:
            title:
              text: @yAxisTitle
        series: @series()
      }
      # Merge highcharts config if it is present
      Ember.merge(config, @highChartConfig) if @highChartConfig
      @set('chartConfig', config)

    series: ->
      @dataset.data

    prepareConfig: ->
      # if custom config is present then directly set it to chartConfig
      if @customHighChartConfig
        @set('chartConfig', @customHighChartConfig)
      else
        type = @type || 'line'
        @setConfig(type)

    didInsertElement: ->
      @prepareConfig()
      @renderHighchart()

    renderHighchart: ->
      @$().highcharts(@chartConfig)

Usage:

  {{ view App.HighChartsView dataset=dataset title="Sample Analytics" type="line" yAxisTitle="Temperature C" }}

The dataset can be set at controller or may be at route.

  App.IndexController = Ember.ArrayController.extend
    dataset: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      data: [{
                name: 'Tokyo',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
            }, {
                name: 'New York',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
      }

Usage with control over config

  {{ view App.HighChartsView dataset=dataset highChartConfig=highChartConfig title="Sample Analytics" type="line" }}
  App.IndexController = Ember.ArrayController.extend
    highChartConfig: {
      yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
      },
      tooltip: {
          valueSuffix: '°C'
        }
      }
Read More...

Hangman Game with EmberJs

I built hangman game with emberjs, quick prevew. The game deals with more of view stuffs than other parts, I would like to share some thoughts and tricks I learned during the process.

hangman game with emberjs

I am not an ember expert so the way I have done may not be the optimal way of doing things in ember. Instead of walking through each steps, the code is well commented you can easily walk through, here I will describe striking stuffs.

Read More...