Skill Acquisition: Web Development


Introduction

Website development can be seen as an activity to develop a form of medium in which information is put within computer network. It is done not only to appeal the viewers, but also to serve better function in order to provide understanding. For different purposes, web development involves distinct tools, process, design, and framework. Thus, it has various types of web application as the result of its development. This article centers web development as a skill with emphasis on “Node.js” application development as a background experience from the author.

However, as being said by Murugesan S., et. al. (2001) web development is considered as an authoring problem rather than an application development problem. For example, to provide information website is developed by interlinking contents. Furthermore, in a more comprehensive project of web development, there are analyses of needs, design, management, metrics, maintenance, etc.

Programming as a part of software development is involved to develop website application. The scripting language such as javascript that is used in this process should be learned. Among many ways and frameworks -including “Node.js”- to learn and master, a novice can have an opportunity to be able to develop web application. Specifically, web development can be considered as acquired skills through practice.

Node.js is a web development framework that is based on Google’s V8 Javascript engline. It focuses on utilization of asynchronous event driven in which functions and modifications on web pages are done in real time due to use of webserver on a network. Therefore, information are served not as a static web pages, but as dynamic web pages. Usually, dynamic web pages is built by scripting in PHP programming language, which is another server-side language. With Node.js, one can focus on javascript scripting language, and also take advantages of utilizing what a normal javascript cannot do, thus approaching it will be more efficient than learning another scripting language, as lined with code sharing concept by Hota (2014).

A personal experience has been obtained deliberately during undergraduate thesis process. In 2015, the author took steps in to web programming as he chose a particular research methodology which requires software development. The practice, however, is backed up by the previous background on developing software with various tools in university courses environment. Specifically practicing web development in node.js framework, it was a deliberate practice due to aim to improve the previous ability as a novice through daily effort (Ericsson et al, 1993, p.369).

Learning Method

Trial-and-error is not the only method for beginners to approach web development. Beginners tend to seek visible result that lies as a result of trial-and-error attempts. It is reasonable because web development involves visual dynamics on web that is being developed. In compared to another specific skill such as Object-oriented Programming (OOP), many sources state that OOP needs abstraction skill, which means no direct visual feedback is aimed during the process to program an object. With trial-and-error method, learners can write the script of a web page and see what would be the result -error or no error. For instance, this method is done when trying every practical and functional example of server-side javascript with “Node.js”.

Another useful method to be tried is learning by tutorial. As learners might not familiar with server-side javascript due to its nature of client-side script, novice learners should start learning from it. Tutorials are provided ranging from written books, development framework websites, until open-sourced projects where everyone has access. Tutorial helps the learners to follow some particular steps to be taken in order to produce the same result. It tends to break the project into essential steps in which explanation for each step is written as well. In other form of medium than article and text-based, Youtube (http://youtube.com) provides tutorials from various video channels.

The shift between these two learning methods mentioned above, even by looking for other methods, shows the active search to improve the performance (Ericsson, et al, 1993). One method could be an alternative to one another for web developers in any levels. If trial-and-error that is done by a proficient web developer is not working well, tutorial can replace the whole process of learning, or vice versa.  There are many types of tutorial designed for specific level of programmers. To make tutorials effective, learners should choose the proper level that is served or thoroughly look what pre-requirements should be prepared beforehand.

Deliberate Practice

Nowadays, there are facilities of learning web development intensively. Hackathon (“hack-marathon”) that associates with an intensive set of training days which requires programmers join in almost non-stop manner in order to compete with each other. Usually the organizer offers a valuable prize or project follow-ups from company. Another example is “Coding Bootcamp” that also intensively trains participants some particular skills, but with no occasional competition added. The two examples mentioned set daily duration per day during training, although as a simulation to a prolonged deliberate practice which is even for years (Ericsson, K.A., 2006 p701).

To fill the on-going deliberate practice, deliberately engaging in solving problems in workplace by also practicing could support the learning process. In author’s experience, even though no out-of-workplace special training joined, anyone can picture daily problems then projecting the solution in simple web application. In addition to practice of perceiving problems, there is also involved communication with possible client as a simulation. Furthermore, website such as Freelancer (http://freelancer.com) is for those who are interested in maintaining self-entrepreneurship through Web Development projects.

Internet as Resources

Once learners have been exposed to javascript, Hota (2014) stated that “Node.js” offers less learning curve due to a base of developers who already experienced in asynchronous programming that is typical to “Node.js”, and is accessible on the Internet.

Internet as a social media holds a unique part in process of learning. Although it is not mentioned precisely that Internet was one of effective learning resources, but characteristics mentioned by Ericsson et al (1993 p.368) that deliberate practice needs also training material and facilities. There are several websites that takes part to gather learners to share ideas, projects, and lectures. Website such as “Github” (http://github.com) which opens the possibilities to download the project and code libraries independently so that user can develop on their own computer. For those who can mostly work online, “Codepen.io” (http://codepen.io) should be an alternative to see how codes work hand in hand with the direct result. On the other hand, Youtube allows users to ask questions and request topics to be explained through video. In a more specified question-and-answer activity, Stackoverflow (http://stackoverflow) enables communication between learners, developers, and experts to give alternative answer based on a certain focus question.

Resource constraint in which direct economic costs were mentioned (Ericsson et al, 1993 p.370) should be solved by access to internet because learning resources are freely accessible. Moreover, the lower price of secondhand personal computers, also access to internet cafe and public wifi are the answers for learners’ who attempt to web developing.

Although “Node.js” framework might not be chosen as a main material in higher education course, but general web development course is usually offered as demands from industry increased. Web development is usually started from basic “Hyper-Text Markup Language” (HTML). In further advanced-basic web development course, “Javascript” may be introduced to have more dynamic web pages. From that point, web development course that is free of given framework should open the opportunity to start to learn “Node.js”, as tutorials shown basic use of HTML pages with additional functions.

Coach and Community

An example presented by Gruber, H, et al (2008) shows that even though university is among alternatives for jazz guitar players who are willing to study jazz. In that case, the present of great teachers is one of the essences of deliberate practice. It is because educators can see the learning process, personalize the style of working, and motivate the learners by nature -even though less pedagogical reasoning probably are existed in the first place. Since universities select better professional teachers from various backgrounds, pedagogical reasoning lies behind instruction. It is one reason why university teachers in Computer Science or Informatics major teach based on their previous experience. The following are some proportions about expert teachers written by Berliner (2001 p.472) and also example in their teaching based on author’s experience:

  • expert teachers excel mainly in their own domain and in particular contexts;
    Evident is that teacher might be experienced in doing project outside campus which focused on some particular domain thus, for example, continue teaching web development in PHP
  • expert teachers develop automaticity for the repetitive operations that are needed to accomplish their goals;
    For instance, teachers are used to exemplify the relatively efficient procedure backed up by their automatic response to the problem
  • expert teachers perceive more meaningful patterns in the domain in which they are experienced;
    This is why in some courses teachers might provide pattern to be followed, or teacher tends to offer some specific practice and technique of development.

The other propositions are:

  • expert teachers are more opportunistic and flexible in their teaching than are novices;
  • expert teachers are more sensitive to the task demands and social situations surrounding them when solving problems;
  • expert teachers represent problems in qualitatively different ways than do novices;
  • expert teachers have faster and more accurate pattern recognition capabilities;
  • expert teachers may begin to solve problems slower, but they bring richer and;
  • more personal sources of information to bear on the problems that they are trying to solve.

However, in case of lack of personal coach of learning “Node.js”, as stated that influences from physically present mentor is needed (Gruber, H et al, 2008 p10), here comes the demand of learning community.

“Bootcamp”, “Hackathon”, coding clubs and other kinds of web development community may support the learning process according to the participation metaphor, given that there are interactive process in cultural practices and shared learning activities as it shapes cognitive activity of the member (Sfard in Paavola S., Hakkarainen K., 2005 p.538). Although learning to program in general may be seen as acquisition metaphor due to individualistic nature of programming activity. A developer learns by following the logic of how a problem is solved, then tries to construct the knowledge cognitively. In the end this, whole process follows acquisition metaphor as explained by Paavola S., Hakkarainen K., (2005 p.537-538). There might be challenges of applying the two metaphors consecutively, while it supports each other process of forming the web development knowledge.

In Action

Ini this section, there is three difference examples on how web application development is learned by practicing. Besides to have “Node.js” installed, to ease the process, one is recommended to have a few more software. Also, a consistent manner to save proper files in their respective file extension is important (e.g. a “Filename_1” file should be saved as an html instead of txt, so should “js” extension for javascript files). Based on personal preferences and experience, those are:

  1. a text editor (e.g. Microsoft Notepad, Sublime Text (www.sublimetext.com), etc);
  2. a developer-friendly internet browser (e.g. Google Chrome, etc); and
  3. a webserver (e.g. Nginx, node.js’ Express, etc)
  4. javascript libraries (if needed)

Google Chrome is among other internet browsers with an exceptional performance and a developer console feature, thus is chosen. Also, a webserver is chosen due to different advantage and purpose. Installation of the software mentioned earlier (including “Node.js”) should be done by executing through the supposed procedure such as double-clicking it, after it is downloaded.

Beginner – HTML Hello World!

Novices should start the development without any extended purpose except to show what they code. To start with, text editor should be opened along with Google Chrome. HTML is supposed to be structured with a markup concept. For instance, to mark a text up for being bold (strong typed), a “Hello World” (without quotes) should be wrapped with tag/element “<b>” and “</b>” on its end. This principle is applied to the whole web development process, provided that HTML environment is focused. Another practical custom is the use of “Tab” key on keyboard to give more spaces than the whitespace’s length that is “Spacebar” made. The following is how a bold “Hello World!” text is shown on a HTML web page.

Goal 1
(Code)
Microsoft Notepad / etc Goal 2
(Result)
Google Chrome
 dp_1  dp_2.png
Practice_1.html Double-clicked Practice_1.html on Google Chrome

Advanced – One-way-chat application (The use of “Node.js” and websocket)

In this example, one should prepare another folder to be used. The following is the goals, files needed, and flow chart that represents the steps to be taken.

Goal A
(Folder management)
File Explorer Goal B1
(Result, before the server is active)
Google Chrome
dp_3.png dp_4.png
Final position of files and folders after done
Goal (B1), (B2), (C). Those are placed inside webserver’s “html” folder (e.g. C:\nginx\www\html)“Node_modules” is created by entering
npm install nodejs-websocket
The initial condition of HTML with a single-purposed button for giving a signal to the javascript server
Goal C
(Server monitor by node,
before and after it is worked)
Command Prompt / Terminal Goal B2
(Result, if server works)
Google Chrome
Before button in HTML clicked, it shows:
dp_6.png
dp_5.png
The view when javascript server file is opened by node. It is deliberate to write on the server and give a text-based signal back to the receiver on HTML file Final view of how HTML web page should look if the server works
File 1
(chat.js, the scripted server)
Sublime Text
1
2
3
4
5
6
7
8
9
10
console.log('This is server');
var ws = require('nodejs-websocket');
var server = ws.createServer(function(connection){
 connection.on('text', function(str){
  if (str=="Hi, server!"){  
   console.log('....someone clicked the button.')
   connection.sendText('Greeting is received')
  }
 }
)}).listen(8181)
1. Signal that node is opened
2. To request the installed package
3. To create the server that listens to 8181 port
4. To build an event-driven function that is executed if text-based signal comes
5. To filter out any other signals except what is recognized
6. Signal that satisfies the human developer because of its text based format
7. Signal for the receiver on webpage
8 Closing brackets (5)
9 Closing brackets (4)
10 Closing brackets and method that specifies what port to listen to
Here a javascript file has a purpose to maintain any signals given from the prepared webpage, as long as it connect with each other. There is a requirement of a node.js package named “nodejs-websocket”, which shows as a javascript library that is used in node application. Library simplifies the interaction between the script with built-in node.js functions –in this case an http request under the websocket. Also, an “8181 port is assigned to be listened.

File 2
(index.html, the webpage)
Sublime Text
dp_7.png

In the simple example above, it demonstrates how a client-based scripting language can also be maximized functionally to the server side by the use of Node.js. A javascript library is utilized to make the program efficient, considering the advance beginner’s level of understanding. All functions used are written as simple as possible whereas will limit the functionality. However, the simple example could represent the comprehensive use of HTML5, javascript, node.js at once. Below is flowchart to make the one-way-chat app above.

Flowchart.jpg

Learning methods are applied during an ongoing process of deliberate practice when the author followed a tutorial first time back then. The tutorial was not for a node.js development beginner as it showed the full and functional chat web application based on a websocket framework. Although the video based tutorial was used, trial-and-errors were happening during the process due to misconception and also technical mistakes such as curved brackets ({}) and semicolon (;) placement. Google Chrome’s console projects all the application activity behind the visual representation of webpage. Errors were sometimes misinterpreted and were needed to be read thoroughly in order to make meaning and build the solution. Overall, the flowchart above is the result of experiencing in many projects with similar concept of client-server communication, including undergraduate theses project.

There are two approaches used to the use of learning community. Firstly, learners can sign in as a member of an online community where developers are gathering. This elevates even the English comprehension for vivid readers due to available language that is used mainly in the website. Nevertheless, some social media features on the community website are available to bridge between asker and other developers who have the answer and approach. One example of this is CreateJS (http://community.createjs.com, recently moved), which is a community for of javascript-based animation framework developers. The forum was useful when a novice needs practical examples and problem-solving posts asked by others, as it is used rapidly during the development

The second example is when a social participation is used to improve the learners’ current ability. Given a t-shirt as a symbol, a preliminary “hackathon” in which the author joined represents not only a social identity but also social norm as all participants were familiar with technology. As a web developer, the community that gathers all participants ranging from high school students until workers to healthily compete each other gives a very good example to actualize web developing skill to stand it out among other competitors. Moreover, developers from startup companies came to motivate all teams.

Challenges

Learning plateau, as founded by Bryan and Harter in Ericsson (1993), can happen during web development skill acquisition. It is indicated when no further improvements can be reached. When practicing with tools and examples that are provided, the skill might be seen stagnant, especially if there is discovered more sophisticated project or examples that follow a particular development framework. If the only approach to learn that is practicing by example, meaning examples are roughly duplicated in a local network, it may not apply to all kind of examples. For instance, difficulties will be felt when a web developer who is used to develop without any framework, then tries to interpret an example such as from “Angular.js” or “Meteor.js” framework as if working without “Angular.js”. In this case, even when one has already used to “Angular.js” will face the plateau if no improvement made as no new approach for solving the problem also.

There are possible occurrences of not founding solution of a problem during practice, such as not being able to solve some errors shown on the monitor screen. Finding new methods are seemingly beneficial to solve learning difficulties due to different approach. Based on Ericsson et al (1993,  p.367), not being able to discover new methods sometimes been interpreted as evidence to basic cognitive or perceptual deficits. It leads to needs of specific instruction for the subject from teacher. Teacher can give individualized diagnosis of errors, which is useful instead of a general diagnosis of error.  Although “Stackoverflow” -one of Question & Answer websites- might take some role in this case, not all difficulties can be precisely answered by the other “Stackoverflow” users. From here comes the needs of a teacher who gives individualized diagnosis whether without another medium or a paid one-on-one virtual teacher such as Intenseschool (http://www.intenseschool.com/Javascript/nodejs_training_course.php).

Motivation, as one of potential variables of improving performance (Ericsson, K.A, 2006 p.695), can be decreased due to various reasons, particularly due to nature of deliberate practice. Hence, there should be another factor that backs up the situation. Social media can offer the support to motivate the learners because it has features that allows users can interact with others. In a model example of Flicker (a photography-focused social media website), features of groups, tags, comments, slideshows, albums, real-time photograph posting are mentioned as social networking aspect that are effectively used. Web developers signed up to social media such as Github (http://gihub.com), Twitter (http://twitter.com), or Instagram (http://instagram). In line with Baird, D. E., and Fisher, M (2005 p.24)’s conclusion, there learners can view and interact how proficient and expert developers improve their learning by posting their current project, thus will motivate the learners during their taken course.

In a community where members should follow shared social and learning activities, it might hinder some particular point of ones’ learning process. It happens when the norms and learning process are completely new to the new member. The new participant should find and follow essential aspect of being the member of the community, in order to be accepted. The difficulty also occurs when a new development framework is offered to run the project. To solve this kind of situation, one should regulate their learning, or offering collective method of programming, such as modular programming which team members agree to what extent they should contribute to the project -in this case a learning process.

Conclusion

Preparation time is one of significant factors in attainment of performance. Early years of preparation might be needed to foster skills to a learner. A long period that is typical to the major contribution of producing expert might be the answer of having an expert of some domain of expertise, following several examples by Ericsson et al (1993, p.366). In fact, it is less often to have individuals who are independently experts in web development to look up. Moreover, collective contributions are seen to be the most familiar phenomena of web development success. We can learn on how the social media and e-retailing websites have been developing their application throughout the years, and how they open-source the Application Programming Interface (API) to developers on internet. In the whole sense, learning web application development might be seen as a long and deliberate journey from knowing nothing about javascript, then exploring the interesting findings provided by “Node.js” framework, helped by learning community and individual persistence to keep learning and prepare the next point of improvement. Everyone can also be a developer as as long as they are sensitive to daily problems and solve it through web application.

References

  • Hota, A. K., Prabhu, D. M. (2014). NODE.JS: Lightweight, Event driven I/O web development
    [Online] http://informatics.nic.in/uploads/pdfs/26b47a73_node.js.pdf
  • Murugesan, S., Deshpande, Y., Hansen, S., & Ginige, A. (2001). Web engineering: A new discipline for development of web-based systems. In Web Engineering (pp. 3-13). Springer Berlin Heidelberg.
    [Online] https://pdfs.semanticscholar.org/1e18/291a151806c75518d7466d43264cac96864b.pdf
  • Ericsson, K. A., Krampe, R. Th., Tesch-Rämer, C. (1993). The Role of Deliberate Practice in the Acquisition of Expert Performance. Psychological Review 1993, Vol. 100. No. 3, 363-406
  • Paavola, S., Hakkarainen K. (2005). The Knowledge Creation Metaphor – An Emergent Epistemological Approach to Learning. DOI 10.1007/s11191-004-5157-0
  • Treude, C., Barzilay, O., Storey, M. (2011). How Do Programmers Ask and Answer – Questions on the Web? (NIER Track)
    [Online] https://pdfs.semanticscholar.org/f783/cb2549f75143c8e4cc92ce5dc9bc76bfb5dc.pdf
  • Gruber, H., Lehtinen, E., Palonen, T., & Degner, S. (2008). Persons in the shadow: Assessing the social context of high abilities (Research Report No. 29). Regensburg: University of Regensburg, Dept. Prof. Hans Gruber.
  • Berliner, D. C. (2001). Learning about and learning from expert teachers. International Journal of Educational Research 35 463–482
  • Baird, D.E., Fisher, M. (2005). NEOMILLENNIAL USER EXPERIENCE DESIGN STRATEGIES: UTILIZING SOCIAL NETWORKING MEDIA TO SUPPORT “ALWAYS ON” LEARNING STYLES. J. EDUCATIONAL TECHNOLOGY SYSTEMS, Vol. 34(1) 5-32, 2005-2006 [Online] http://gatortracks.pbworks.com/f/social%2520media.pdf
Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.