The Jungle Through Javascript Frameworks
Total Page:16
File Type:pdf, Size:1020Kb
The jungle through Javascript frameworks. Jonatan Karlsson Henrik Ölund Web Programming Web Programming 2013, BTH, Blekinge institute of 2013, BTH, Blekinge institute of technology technology Advanced topic in Web development, PA1426 Advanced topic in Web development, PA1426 HT15 HT15 Karlskrona, Sweden Karlskrona, Sweden [email protected] [email protected] PA1426 Revision C, Advanced topic in Web development 2015-11-05 Abstract In this article we have planned to dive into Javascripts world where new framework comes out “every day”. We will take the reader into a world where nothing are for granted and everything is a non-standard. In the current situation, there is a [3] tremendous amount of Javascript frameworks and that makes it difficult for a layman to choose the right framework, for the right task and this is something we will try figure out and explain to the reader. Keywords: Javascript, Framework, MV*, Client-side, React, Mithril, Backbone.js, Ember.js 1 PA1426 Revision C, Advanced topic in Web development 2015-11-05 Abstract 1. Introduction 1.1 Background 1.2 Intention 1.3 Method First part Does the framework follow the MV*-pattern? Is the framework popular on google? Have the framework risen in popularity since 2013? Does the framework have any corporation that backs them? Second part 2. Result 2.1 Which frameworks did we select? 2.2 Not included 2.3 React What philosophies have pushed this framework forward? What kind of problem does this framework solve? Which famous products has been created with this framework? Does the framework handle HTTP-request in a neat way? 2.4 Ember.js What philosophies have pushed this framework forward? What kind of problem does this framework solve? Which famous products has been created with this framework? Does the framework handle HTTP-request in a neat way? 2.5 Backbone.js What philosophies have pushed this framework forward? What kind of problem does this framework solve? Which famous products has been created with this framework? Does the framework handle HTTP-request in a neat way? 2.6 Mithril What philosophies have pushed this framework forward? What kind of problem does this framework solve? Which famous products has been created with this framework? Does the framework handle HTTP-request in a neat way? 3. What defines a great framework? 4. Discussion 4. Conclusion 5. Summary 6. Future works 7. Abbreviations 8. References 2 PA1426 Revision C, Advanced topic in Web development 2015-11-05 1. Introduction 1.1 Background Today there are web technologies everywhere and these technologies are growing rapidly in the software industry. Technologies such as HTML, CSS and Javascript are [1] used more than ever . Almost everyone in europe has access to a web browser and [2] are using it to view web sites and as you probably know , the language of web browsers is Javascript. To produce high quality javascript application it’s very beneficial to use frameworks. Some might argue that is essential. They can help the structure the architecture and code to keep it modular and reusable. It helps the developers in the team to share the same common pattern on the application code. A framework can also help the team with providing useful features like “Templating”, “Data-binding”, “Routing” and “Security”. [3] Choosing a framework might be exhausting, there are tons of them . They are being updated, maintained and developed on every day. What should you even look for? 1.2 Intention In this article we hope to enlighten the layman on which framework is the best to select for a client-based application that consume a REST-api. In this context the phrase layman is a person working on a corporation and have gotten a new project where he should create a web based application that consumes a REST-api. The person in question have little experience regarding the javascript-frameworks since before but know the syntax of the language. 1.3 Method First part We will start with doing a selection of which four frameworks to investigate. The [3] selection will be based on data from stats.js.org and the selection of the frameworks we will choose from that site will be based on four questions; Does the framework follow the MV*-pattern? We chose this question criteria because we are only interested in frameworks that follows the MV* pattern. MV* is a acronym for different Modul View, insert something that a blogger finds good, design pattern. Examples of the something is “Presenter”, [4] “ViewModel” and the more common ending; “Controller” . Essentially it’s the same thing, but different words for solving problems with the architecture for the framework. 3 PA1426 Revision C, Advanced topic in Web development 2015-11-05 Is the framework popular on google? This is very important while choosing a framework because it is the most common [5] search engine in Sweden . And therefore we used google trends to verified the selected frameworks popularity. Have the framework risen in popularity since 2013? The selection of frameworks should be popular. We can’t go and investigate a framework that is less than, let's say, three weeks old. It doesn’t make sense in a real world corporation to use a framework like that. In “every” young software there will be [6] bugs, if not fully tested (which can never happen ) , and this cannot be done in a short period of time. The framework will have “child diseases” and bugs in it. But if it is popular the possibility of the framework being tested in most situations and in depth is greater than a newly developed framework. Does the framework have any corporation that backs them? It is important that a framework is backed by a big corporation. Usually a big corporation has developers that are experienced in web development and therefore has knowledge of what is great and what isn’t. Second part In the second part of the method we will collect data from each framework then try to get a understanding of each framework by asking ourselves these questions; 1. What philosophies have pushed this framework forward? 2. What kind of problem does this framework solve? 3. Which famous products has been created with this framework 4. Does the framework handle HTTP-request in a neat way? When we have collected the data and interpreted it, we will write a personal paragraph about the findings based on the ultimate framework from our point of view. We will also use a benchmarking tool to compare the rendering speed where the framework will render a TODO-application. 2. Result 2.1 Which frameworks did we select? We have chosen to research three popular frameworks and one framework that is a up-and-comer. The first one we selected was React due to being used in one of the [7] most visited website on the world wide web w ww.facebook.com and the popularity [8] for React has risen steadily over the last year . The second one we have chosen to investigate is Ember.js. Yahoo!, Linkedin, twitch, Netflix, Microsoft and Kickstarter are developed using Ember and the list goes on and on. There are a lot of big 4 PA1426 Revision C, Advanced topic in Web development 2015-11-05 [9] corporations using the framework and due to that the selection of the Ember framework was natural since it also follow the other criteria too. The third one is a favorite to one of our colleague. So this one was almost a must for us. The framework our colleague always talks about is Backbone.js. As any other framework selected for researching in this article this too follow the agreed upon criterias and it’s also ranked quite high on [8] stats.js.org/ even though the popularity on google has gone down . The last [8] framework we have chosen to include is Mithril. It’s not as popular as the others but [10] [11] it has many strong points such as a great documentation , good code examples , [12] and great performance . 2.2 Not included There are many frameworks we could have chosen but it was out of scope for this paper. The only framework we thought about changing was Mithril with Angular. You have probably heard about Angular before since it is the most popular framework [8] [13] today . It’s backed and developed by Google and they use the framework to develop their own sites. The amount of jobs where angular knowledge is a [14] requirement is quite high . We chose not to include the most popular framework [15] because the amount of research papers and articles is very high and we would rather use a something new and fresh that fits our criteria. 2.3 React What philosophies have pushed this framework forward? “We built React to solve one problem: building large applications with data that changes over time.”[16] What kind of problem does this framework solve? [17] React is built for easy creation of the composable and dynamic user interface. And because of this people likes to think of it as the V in the MVC.[16] Which famous products has been created with this framework? Facebook.com, instagram.com and imgur.com.[18] Does the framework handle HTTP-request in a neat way? No, React doesn’t handle creations of HTTP-request in a neat way. In fact if you building a website in React you have to use an external dependency for making the HTTP-request. [19] 5 PA1426 Revision C, Advanced topic in Web development 2015-11-05 2.4 Ember.js What philosophies have pushed this framework forward? The focus for Ember.js is ambitious web applications.