일곱가지 2017년 최고의 웹 개발 프레임워크 

7 Best Frameworks For Web Development in 2017

Most of modern web developers have own list of frameworks and libraries which make their work faster, more efficient and convenient. These are the tools they are used to work with and like. But building an edge over others necessitates every self-respecting programmer to be aware of latest web development technologies, new web application frameworks and libraries and implement them. A successful and productive developer has to be fast, reliable and use best practices to save time on things that can be automated. Deadlines matter for business. In this article I will discuss some web development trends in 2017, specifically - the most popular web frameworks of the year, some of their features and their pros and cons. Hopefully this will help influence what to choose for practice and work.

Backend Frameworks

Django

Django is a full-stack open-source framework powered by Python and supports Python version up to 3.4. Full-stack means it provides all stuff needed “out of the box”. Templates, server side, it even generates an admin panel to configure your website without editing the code - kind of CMS but not CMS. So you likely won’t need any other third-party framework to build a powerful website (CSS frameworks don’t count).

Features and advantages

All key features are included initially with the framework. Django follows a Model-Template-View (very similar to MVC) architecture to divide logic and views. One of its advantages is using Object Relational Mapper (ORM) to map project’s objects with database tables. As Django natively supports common database engines (MySQL, PostgreSQL, SQLite, Oracle, SQL Server, DB2 and others with additional drivers), it makes migration between them very simple, you won’t need to rewrite or adapt the code – the framework will map everything itself. Cool, isn’t it?

For newbies, if you want to experiment with Django – you don’t need to have a separate web server installed, Django comes with its own lightweight development server.

Some disadvantages

• Focusing too much backwards compatibility somewhat reduces its development speed, often it's hard to integrate new shiny buzzwords into the system.
• Django is a monolithic framework and keeps you within given patterns.
• You always get entire relatively large structure even if you make a simple landing page.
• Setting up asynchronous processes for chats and real-time games is possible but fairly complex (search django-celery)

Who chooses it

This framework has proved itself and is being used in many high-loaded websites like Pinterest and NASA. But Django has also been utilised by thousands of medium websites and startups for its convenience, sufficient functionality “from the box”, good documentation, and big community ready to help.

Ruby on Rails (RoR)

 

One more famous and reliable open-source MVC framework, created with Ruby. Before starting with RoR it would be advisable to familiarise yourself with Ruby. RoR was created to make coding of web-based applications simpler and faster. It allows the coder to write significantly less code than other frameworks. Probably, the main full-stack competitor of Django.

Features and advantages

RoR declares a fundamental rule: Convention Over Configuration - Rails always knows what you gonna do and keeps you aside from editing of multiple config files. If the first point is more or less clear, how does RoR implement the second one? Rails expects that coders use unified configuration rules and default patterns. Simply put, if a developer uses “standard” best practices (in names, code structure etc) everything will work automatically like magic.

For example, a model class Company will usually be defined in the file “company.rb” in the app/models directory, and linked to table “companies” in the database.

Convention over configuration gives us benefits to write much less code. As well as Django, Rails follows MVC concept and provides default structure for the database, the web service and web pages. You can use general relational and non-relational database engines with drivers included originally .

Some disadvantages

• A barrier to entry for beginners - a lot of to learn before productive use
• Ruby requires more server capacity and resources than Python or PHP.

Who chooses it

Rails is a good tool for professionals to build any kind of web applications, from basic websites to high-traffic web portals or internal corporate application f.e. DMS. Like Django, RoR has a lot of standard tools in original package, that should be sufficient to develop heavy apps. A lot of various-sized startups and large enterprises like AirBnB have chosen it.

Express

Express.js is an open-source framework for Node.js to build classical web applications with server side and API. Roughly speaking it’s a standard server framework for projects that use javascript on the backend.

If you are new in web development and only know some javascript (and basic tools like HTML, CSS) Express would be the easiest framework to start with.

On the other hand javascript might be a little bit quirky sometimes, so for complete newbies I'd suggest to start with Python or Ruby on the backend.

Features and advantages

Express provides a simple interface to create usual websites and webapps. Primarily it helps to organize the routing of your application and use templates by putting in least efforts. You don’t need to be concerned with low level protocols, processes, etc. Unlike Rails and Django, which have a strong position on applications building, Express has no "best way" to do something. It is very flexible and pluggable.

Express+Node is quick but basically for applications which require many online connections like chats or online games, or when you need to get data from database quickly.

Some disadvantages

• You have to install tens of additional libraries and packages to get all necessary features for development, which are included in Django or RoR initially.
• Be aware of compatibility issues - as there are a number of additional packages for Node and Express, an update of a module can force you to update another one (with which it interacts), and this update can require another one and so on.
• Node processes are non-blocking and asynchronous, which works great when application makes requests to external data sources and only slightly modifies the data. It won't work for heavy computation as single computation will block other requests until completed.
• Sometimes Javascript doesn't make any sense

Who chooses it.

Express is better for developing simple web services and APIs rather than web portals or high-loaded calculating backends. But with the increase in demand of Node.js, Express is expected to reach new heights in future. PayPal and MySpace have chosen it for particular services within their websites.

For those who wants to practice in web dev and create some simple web services, Express is a good choice to start with: you don’t need much preparation, no need to learn Python or Ruby, just Node and so familiar JavaScript. But you may need a lot of packages for your project later.

Frontend frameworks

Angular

Angular is a javascript open-source framework designed specially for single-page web apps and mobile application development, using MVC architectural pattern. It is not a full-stack, but just a frontend framework dealing basically with your webpages.

Angular is an evolution of AngularJS, this is not a new version but completely new framework. Google released already Angular 4 on Github.

Features and advantages

What does it do? Standard HTML deals with static data, but Angular extends it and allows to use dynamic data to create a web application rather than static html web site.

Angular application is based on components (stored in modules) - a combination of HTML and TypeScript code which define what your web page will display. How it works in simple words: component is a kind of object where you define:

• what (which HTML tags/objects, their values)
• how (logic)
• where (custom tag in your index.html where component's content should be placed)

things should be displayed. You can link as many components as you want to a web page replacing different custom tags. Following this way provides online view updating due to event, logic stored in component or if data changed.

Some disadvantages

• No backward compatibility to Angular 1.x
• Entry barrier - get familiar with TypeScript first
• May seem not SEO-friendly, just like others frontend frameworks below, because necessary for indexing texts are not in html directly. But it worth to say that new Angular has solved this issue with server rendering features in the original package, just some knowledge required.

Who chooses it.

I would say Angular is, probably, the most powerful framework to build single-page web and cross-platform mobile applications because it have a lot of features “in the box” and you don’t need to worry about choosing and updating many plugins, install and work. You can use it also for common websites or landing pages, but not for those ones you want to see in top of Google or Yahoo search.

Angular is supported by Google and its large community - one of the most popular framework on Github. Some of the well-known companies had chosen Angular are The Guardian, HBO, Sony and PayPal (in Checkout procedure). With a rapid development pace, easy code integration, readiness for unit testing Angular can certainly be you choice for next project.

React

As you may notice Javascript is everywhere now so it’s not surprising that Javascript frameworks and libraries are in trend. React is one of them, created and supported by Facebook. Although React is actually not a full-stack framework, it provides only View-level (templating language) and some callback functions to render HTML code, it’s a powerful frontend tool.

Some features and advantages

React is all about fast view renders. Updating DOM is slow especially when you try to display or update big amount of data. React allows to re-render not whole set of DOM elements but just changed ones.

Imagine, you need to display on a web page a list of thousand users and their last login time, and it should be updated online. Typically, you need to read JSON or AJAX from the server every second and update your page - re-render thousand DOM elements (users). What React does is finds and re-draws only users whose login time has changed. This makes the app really fast.

When you develop an app using React it creates a Virtual DOM next to the real one with same structure, and when html should be updated, it updates first Virtual DOM, then finds differences between it and the real DOM, and only then re-draws real HTML elements. Any component created with React works with Virtual DOM.

Everything you create with React is a component - a javascript file containing JSX and all necessary logic inside. You can build whole HTML page where each element can be a component (buttons, headers, checkboxes, lists, tables etc) and define their view and behavior in corresponding js files. You can use same components in differents pages.

Some disadvantages

You can’t create a powerful application with full-featured server side using React, it’s cool just for manipulation of views. Moving to other frameworks can require rewriting of all HTML. Using it with Node you will need to add a lot of packages. Just like with Express. It’s quite complicated to move complex designs from photoshop or any sketch to JSX files. JSX can drive some coders-designers crazy.

Who chooses it

Facebook has created it so it uses it, also for Instagram. This is a good evidence of React’s utility. But to develop a multifunctional full-featured web portal or application you will need something more that pure React, probably Express or even Django for server side. Just leave frontend to React, it’s the fastest tool in this.

Facebook hopes to enable “web apps with 60 fps and animations” with the major React Fiber update in 2017.

Vue.js

Like React, Vue is more a JavaScript library that provides ViewModel layer of MVVM pattern. It links a model and a view and provides two-way data binding. Vue is open source and is being developed and supported by community. It has been learning from the mistakes and successes of React & Angular.

Some features and advantages

Vue is built around components idea, like React is. One of Vue’s most valuable features is its reactivity. Models are just plain JavaScript objects and when you modify them, the view updates immediately. Very similar to React but different technology is used - direct DOM element manipulation using kind of “watchers” to identify exact element to be re-rendered.

Unlike React, Vue doesn’t use JSX in components files, it uses HTML, styles and javascript in different own sections: <template>, <script> и <style>. This syntax is more friendly to designers and it’s easier to read it.

Vue is designed for fast UI development. You can use it separately for frontend prototyping or together with other libraries, frameworks or even add it easily to your existing project for UI customization.

Some disadvantages

Not enough features “in the box” - to build f.e. single-page application which handles data from server you will need additional tools and libraries for: routing, state-management, server communication and a build tool like Webpack

It’s new so there’s much less documentation and plugins than for other competitors.

Who chooses it.

Vue perfectly fits for single page applications and is being used in lots of them. Lots of startups, outsourcers, small and medium-sized websites uses it to get advantages in UI speed. One of famous Vue users is Gitlab. Vue is lightweight, flexible and easy to learn, I guess it’s a good choice for beginners for their next projects. Especially if you want to focus on frontend and UI.

Meteor

Meteor is a full-stack framework that uses javascript both for frontend (as others) and for backend designed for developing realtime applications for web and mobile. You just have to build a normal web application with Meteor and it is automatically real time. Works on Node.

Some features and advantages

Javascript everywhere, so a front-end developer can also work on the back-end comfortably with Meteor without switching between Ruby/Python/PHP or other languages.

This is a key feature - one code is supported on a client and a server. Write code on client’s side as if it were running on the server and had direct access to database. No need to use REST to get data. You can define yourself which functions should be performed on client’s side and which on server’s one, and split the code.

The core is DDP protocol used for realtime transfer of JSON objects across application’s frontend, server part and DB (MongoDB default and enough). This is the feature that provides realtime update. Meteor has totally autonomous app compiler. You just need node.js, whole application can be compiled to archive and deployed everywhere where node.js is running. You don’t depend on any hosting provider because your platform always deploys with your app.

Some disadvantages

You’ll need additional node modules while developing, so it will be necessary to pay attention on their updates and compatibility Maybe not good of you need to develop an app for Windows Phone It works well only with MongoDB DDP is not used anywhere else. It’s advantage - should be used for whole app, not just for front or backend.

Who chooses it

With Meteor, you can create a frontend, backend and a database, all in Javascript what gives you a cross-platform advantage (web, Apple iOS, Android). As Meteor is perfect for building realtime web apps, it’s been chosen by hundreds startups and medium companies for fast MVP releases. Meteor requires just knowledge of Javascript so can be used by beginners who wants to practice in web and mobile development at once.

Conclusion

Both backend and frontend directions are popular and not going anywhere soon, so you can really work with what appeals more to you.

On the backend side I'd suggest using Django or RoR as they have proved to be reliable for for both startups and complex large scale applications. Starting with Express seems risky to me because the lack of solid project structure and well-defined approaches won't help learning the best practices.

On the frontend React and Angular are good future-proof choices. Vue is a lot simpler to start with, but it's less popular, which may create complexities in finding a contract.

I must confess, I don't truly "get" Meteor. It seems very promising, but it's a lot more risky to invest time in it rather than other frameworks listed here.

 

[출처] https://gearheart.io/blog/7-best-frameworks-for-web-development-in-2017/