View source for User:Amitosh/Sandbox/Student Application amitosh patternfly frontend pattern development

= Implementation of Web Components for PatternFly =
== Project Information ==
'''Organization:''' Fedora Project

'''Sub-project:''' PatternFly

'''Student:''' Amitosh Swain Mahapatra [amitosh@fedoraproject.org]

'''Possible mentor:''' Brian Leathem [bleathem@redhat.com]

== Contact Information ==
{|
|-
| Email || amitosh@fedoraproject.org
|-
| PGP Key || 09D287C8
|-
| Time zone || UTC +5:30
|-
| Freenode IRC nick || amitosh
|-
| Github || [https://github.com/Agathver Agathver]
|-
| Blog || https://amitosh.in
|-
| Twitter || [https://twitter.com/OriginalASM OriginalASM]
|}

== Proposal ==
=== Abstract ===
This project aims to implement core PatternFly widgets as  Web Components (Custom Elements), in pure ES6.
=== Introduction ===
Web Components are a collection of technologies used for creating custom reusable widgets in pure JavaScript without requiring any toolkit such as jQuery or AngularJS. The main aim of web components is to be reusable as well as to provide seamless integration with HTML DOM.

PatternFly is a project for creating a set of UI guidelines as well as its reference implementation, for building the interface of enterprise applications. It is based on popular CSS library Bootstrap to provide styles and widgets, as well as a collection of other components frequently used in enterprise applications such as charts, wizards and information cards.

PatternFly web components is an effort to package existing PatternFly widgets into easy to use, reusable packages consisting of custom elements implemented using the Custom Elements API of the web components standard.

=== Project Goals ===
# Implementing PatternFly widgets as HTML custom components.
# Interop with front end frameworks like React and Angular.
# Packaging widgets as self contained libraries, with minimal dependencies.

=== Deliverables ===
Implementation of the following widgets as HTML custom elements.
# Spinner
# Time Picker
# Date Picker
'''Stretch goals:'''
# Count Remaining Characters

=== Implementation ===
This project will implement PatternFly widgets as HTML Custom Elements, using a transitional design to support both Custom Elements v0 API as well as Custom Elements v1 API of the HTML Custom Element specification. One of the design goals is also to support the reuse of the same web components in Angular and React as well.

Following is the summary of the components that are going to be implemented during the GSoC period.

''The component names, methods, attributes and events are suggestive in nature and are likely to be changed as per the recommendations of the community.''

==== Spinner ====
The spinner component in PatternFly is used to indicate some background activity.

'''Component:''' <code>pf-spinner</code>

'''Attributes: '''
{|
|-
| '''size''' || ‘large’, ‘small’ or ‘extra-small’

The size of the spinner
|-
| '''inline''' || If present causes the spinner to be inlined with text
|}

Time Picker
The Time picker component in PatternFly is used to input a time. 

'''Component:''' <code>pf-timepicker</code>

'''Attributes:'''
{|
|-
| '''displayformat''' || ‘12hr’ or ‘24hr’.  Whether to display the time picker in 12 hr or 24 hr format.
|-
| '''outputformat''' || A format string which specifies the format of the value of the time string generated by the component.
|-
| '''mintime''' || The earliest time that can be selected using the component.
|-
| '''maxtime''' || The latest time that can be selected using the component.
|}
Date picker
The Date picker component in PatternFly is used to pick a date. 

'''Component:''' <code>pf-datepicker</code>

'''Attributes:'''
{|
|-
| '''outputformat''' || A format string which specifies the format of the value of the date string generated by the component.
|-
| '''mindate''' || The earliest date that can be selected using the component.
|-
| '''maxtime''' || The latest date that can be selected using the component.
|}

== Timeline ==
=== Phase I - Learning, ideation and preparation ===
'''May 5th - 1st June (during community bonding period):'''

* Discuss with the community to decide on the exact particulars of the implementation, code styles, possible pitfalls etc.
* Develop additional widgets, which would help me practice my concepts about web components.

=== Phase 2 - Coding ===
'''Week 1 (1st June - 6th June):'''
* Implementation and testing of the spinner component.

'''Week 2 (7th June - 13th June):'''
* Submit PR for spinner.
* Improving spinner component based on review by the community.

'''Week 3 (14th June - 21nd June):'''
* Begin implementation of the time picker component.

'''Week 4 (21nd - 26th June):'''
* Testing the time picker component.
* Prepare for 1st term  evaluation

'''Week 5 (29th June - 6th July):'''
* Submit PR for time picker.
* Improving time picker component, based on review.

'''Week 6 (7th July - 13th July):'''
* Begin implementing datepicker component.

'''Week 7 (14th July - 20th July):'''
* Continue with implementation of datepicker component

'''Week 8 (21st July - 26th July):'''
* Continue implementing the datepicker component.
* Prepare for 2nd term  evaluation

'''Week 9 (29th July - 5th August):'''
* Start writing tests for datepicker component.
* Submit PR for datepicker component.

=== Phase 3 - Improvements, Testing and Documentation ===

'''Week 10 (6th August - 12th August):'''
* Improve datepicker component based on community review.
* Revisit all the components and fix any issues that remain.

'''Week 11 (12th August - 18th August):'''
* Ensure interop of elements with Angular, React and Custom Elements v1 API.
* Buffer time for unforeseen circumstances.

'''Week 12 (19th August - 25th August):'''
* Prepare for final evaluation.

== About Me ==
=== Educational background ===
I am currently a second year B.Tech student in computer science and engineering at College of Engineering and Technology, Bhubaneswar, India. How computers and software worked have fascinated me since my primary school days. My first exposure to programming was with ‘C’ in 6th grade. Since then, I have been constantly exploring new areas in programming. I chose to study computer science, in order to satisfy my curiosity for learning new things in the field of computer science and IT, and also due to fact that I perform academically well in computer science courses, due to my interest in the subject.

=== Why did I choose this project ? ===
Web components are the future of how web apps are going to be developed in future. I am always keen to learn new technologies and learning to implement web components has been great so far.

In the due course of getting familiar with the code and development pattern of PatternFly Web components, I have been learning a lot about JavaScript and its behavior in browser . It is an exciting experience overall. I wish to have the same excitement while contributing to the project as the part of GSoC.

=== Experience ===
I have been learning HTML since 6th grade as a part of my computer science paper. I  started learning JavaScript in 8th grade. I have been a freelancer developing web pages since 2013. I have also done a few projects in AngularJS.

Last summer, I had interned at an educational startup (and subsequently worked part time of 8 months). This is where I was introduced to web components. The work involved using components from Polymer Project to build a progressive webapp for reading books and taking notes. It also involved a lot of jQuery and PHP (on the backend side).

I have worked on Loopback and MEAN stack framework in NodeJS and also possess prior ASP.NET exposure.

=== Contributions to this project ===
I have been working on implementing the accordion component.

'''Pull request:''' #30 - pf-accordion component
'''Related issue:''' #25 - pf-accordion development

I am planning to develop more widgets as components during the month of April and May, to practice my familiarity with web components. And also, after GSoC, I will be improving the components, migrating them to use Shadow DOM, when it is introduced into PatternFly web components, contributing new components during my holidays etc.

=== Contributions to open source ===
* Active contributor to a project called bcrypt - a NodeJS module.
* Member of the technical society of our college where we promote the use of FOSS technology among the students. I also help out students who decide to start using Fedora, Ubuntu or any other Linux system.
* Answering questions on StackOverflow, CodeProject and AskFedora about FOSS technologies as well as general programming and help questions.

=== Previous Google Summer of Code Experience ===
This is my first participation in Google Summer of Code programme.

=== Commitments and engagements during GSoC ===
If selected, I’ll give my full dedication to the project. I have no prior commitments during the month of June to August and will be able to provide 30 hours a week to the project.

==== Periods of unavailability and other constraints: ====
* '''May 2 to May 20:''' I have my end semester exams from during this period. Since this period lies during the community bonding period, I expect it to have very little effect on the implementation of the project. I have one paper per week, so I will be able to devote my free time to research about the web components specification, implement simpler components to gain experience and to discuss the API for the web components with the community.
* '''August 3rd week onwards:''' My classes are expected to begin from 3rd week of August. During that period, I would be able to give 20-25 hours per week.