public

Loading...

Build Your Frontend Architecture with Components

published by Piktochart Team

Want to create a visual like this?

Get Started
Build your Frontend Architecture with
Components
Just like building LEGO
TM
Albert Mulia Shintra
Frontend Asst. Team Leader
01/28
Today's Menu
- Introduction to CBA

- How Piktochart Frontend go towards CBA

- Our Take Away & Challenges
02/28
(Component Based Architecture)
What is
Component?
  • An independent piece of software that is reusable and composable to make a meaningful application.
  • Think of component like a Lego Block, whom does not have any purpose until it's combined with other blocks and become meaningful.
Combine the <blocks> to make a <house>
03/28
Thinking in Component
  • Independent - Able to be used on their own, without cross-dependency with other components.
Source: http://www.hedleysmith.com/posts/thinking_in_components.html
Example: can use <pikto-button> component everywhere without the need to load other component.
"I can go anywhere I want!"

"I don't need other to follow me!"
04/28
Thinking in Component
  • Clearly defined -Define Useful but limited scope name of the component that represent what is the component about.
Source: http://www.hedleysmith.com/posts/thinking_in_components.html
Example:

<pikto-save-button>

<pikto-button>
05/28
Thinking in Component
  • Encapsulated - Components should 'wrap up' their functionality within themselves and provide set ways of implementation.
Source: http://www.hedleysmith.com/posts/thinking_in_components.html
Example:

<pikto-button style="color: 'teal'; font-size: 18px;">Save</pikto-button>


<pikto-button color="teal" size="medium">Save</pikto-button>
06/28
Thinking in Component
  • Reusable - Components are often built with reusability in mind.
Source: http://www.hedleysmith.com/posts/thinking_in_components.html
"I can be used everywhere"
07/28
Component Based Architecture
  • Everything can be componentized
  • Relationship Between Component : Parent-Child Relationship
  • Component define its own lifecycle, view and data independently
08/28
Component Based Architecture
  • Everything can be componentized
Define each part of the app into a component
09/28
Component Based Architecture
  • Everything can be componentized
Define each part of the app into a component
<sidepane-assets>
<editor-canvas>
<editor-header>
<editor-toolbar>
10/28
Component Based Architecture
  • Relationship Between Component : Parent-Child Relationship
Only parent can define child properties, and listen to published child events. No sibling relationship, parent will listen to child's event to be passed to another child if needed
Sidepane  Assets
Editor Header
Editor Toolbar
Editor Canvas
Editor Page
11/28
Component Based Architecture
  • Component define its own lifecycle, view and data independently  
https://ci.apache.org/projects/wicket/guide/6.x/guide/componentLifecycle.html
12/28
How Piktochart Frontend go towards CBA
Let me tell you a story...
13/28
How Piktochart Frontend go towards CBA
History:

- We started from native Javascript with MVC Concept

- HTML templates are rendered by backend environment

- Use jQuery to modify DOM and handle UI interfaces and interaction
14/28
How Piktochart Frontend go towards CBA
Basically, our code was built with something like this:


15/28
How Piktochart Frontend go towards CBA
Problem we faced:
- Inconsistent templating, some created by JS, some by HTML

- Need to manually write function script to update view

- CSS codes for specific templates are separated, hard to modularize
16/28
How Piktochart Frontend go towards CBA
Then, we're moving towards CBA as to:

- Utilize Reactivity Concept of View Templating and Application State

- Standarize our templating, fully rendered by Frontend
Reference: https://medium.freecodecamp.org/is-mvc-dead-for-the-frontend-35b4d1fe39ec
17/28
How Piktochart Frontend go towards CBA
To build CBA, we decided to use Framework:
18/28
How Piktochart Frontend go towards CBA
Why          ?
1. Support:

- HTML Template

- Modular CSS

- Component Lifecycle
19/28
How Piktochart Frontend go towards CBA
Why          ?
2. Useful Official Ecosystem, like:

a. vue-cli to create vueJS app boilerplate

b. vue-router for component routing

c. vuex for state management

d. vue-test-utils for unit testing

and more...
Source: https://github.com/vuejs/vue#ecosystem
20/28
How Piktochart Frontend go towards CBA
Why          ?
3. Rising Trend and Support in JS Community
Source: State of JS
Trend of VueJS.

More developers aware and would like to use it.

On 2016, 33% aware of vueJS and 10% using it,

On 2017, 51% aware of vueJS and 19% using it.
2016
2017
Discord Channel for Community Support
21/28
How Piktochart Frontend go towards CBA
1. With Application State concept in VueJS, we can utilize view to render based on state.
22/28
What's Changed
How Piktochart Frontend go towards CBA
2. Separate parts of template into component.
23/28
What's Changed
How Piktochart Frontend go towards CBA
3. Modularize HTML, JS, and CSS of the app to be split by components
24/28
What's Changed
Consider to move to CBA when:
  • You are building a large scaled apps
  • You are likely going to maintain the app in long term
  • You are building the app in teams, not solo
Our
Take Away
25/28
Our
Take Away
Challenges faced:
  • Redefining the FE application structure  
  • Consideration of migrating old code vs rewrite new code
  • Implementing SSR of Frontend Template for SEO
  • Component Management
26/28
If you're up for Challenge
We Are
HIRING

Frontend & Backend Developer
27/28
Thank You
for your attention!
made by
28/28