"Nodejs development Crypto currency" of 12: Static Web Development panorama Scan

Objective

In the previous introductory section, the application of Nodejs in front-end development is introduced, and the specific project shows that Nodejs is widely used in the field of Bitcoin client. To introduce Nodejs, everything was created from scratch, without the introduction of a front-end framework. But in the concrete project practice, the front-end has the frame to choose, the efficiency and the experience will have the obvious promotion.

Specific to the front-end framework, my choice is ember.js. Ember to develop a general feeling of flying, if asked the front-end framework which strong, I will not hesitate to say Ember . (specifically why, the Internet is still debated, this article does not discuss)

This article focuses on the type of static Web site, the technology selection of billion book official website, as well as the development of the official website of the Ember experience of the use of several large pits.

Billion book official website introduction 1. Resource Information

Billion Book official website: http://ebookchain.org Source: https://github.com/Ebookchain/ebookchain.org

As follows:

This is a simple static web site, if you do not consider extensibility, pure use of HTML + div + javascript form, for the better front end of the art, is half a day of time.

Of course, for me, people who are used to developing products in the background do not actually spend much time. From the installation of the use, building engineering, to plug-in development, the introduction of third-party libraries, all understand a bit, so it has a very refreshing feeling.

2. Functional characteristics

What special features do you want for a static website? Good-looking, can convey the product information, not on the line? However, since it is a study, we have to get some features. Billion book, the main realization of the following several functions ( these features, many sites have, I put it together, so, billion book website can be used as an init project ):

• Navigation animations : When scrolling through a page, the header of the site is dynamically adjusted. This I have pulled out, made the Ember plug-in, source address: Https://github.com/imfly/ember-cli-animated-header

• scrolling Event : Ember There is no handling of the Scroll event. This provides Ember with the Scroll ability to respond to events, extracting the plug-in here: Https://github.com/imfly/ember-cli-scroller

• svg animation : When you open the site, you will see the first page ebookchain of the animation effect;

• Full page Display : Scrolling page, the page will follow the screen, one by one, automatically fit the screen size. The encapsulated plugin is here: Https://github.com/imfly/ember-cli-fullPagejs

• Multi-lingual support : The English and Chinese languages are available, the default is English, I also go international fan;

• Module Layout : Product features, partner part (even footer part) directly with the JSON data, completely in accordance with the MVC pattern separation, add, modify, delete, expand are very convenient, no need to move the knife page;
• Automatic Construction : One-click Export static page, merge compressed js,css and other files;
• One-click Deployment

Multi-lingual support and extensibility are clearly more beneficial than purely static pages. Careful little partner, you will find that similar homepage is very many, some basically exactly the same. In fact, many are directly copy others static page, with the billion book official website code, the establishment of similar homepage, extension and modification will be much simpler.

3. Technology selection

To develop a static website, there are many options available, and I tried the following three kinds:

(1) Develop your own design

In order to continue the previous work, an application was originally built on the basis of an instance program provided by the introductory Department of the Nodejs development crypto currency to output static pages. Write to the end, found in walking ember-cli and other existing products, the old way, decisively give up. (The code has been deprecated and deleted)

(2) Use of third-party products

This kind of product, someone called static site generator, the first popular is WordPress. However, based on Nodejs and is widely concerned on GitHub, there are wintersimith,assemble,metalsmith,hexo,docpad and so on. This kind of products are mostly for technical personnel, to have the ability to learn to master the basic installation and use.

This kind of product features, is to help you solve the theme, transformation and deployment work, the content creation to you left, greatly simplifies the static page generation process. It works the same way I am now using gitbook-summary to compose ebooks. Try out two of them, there is no easy to go, therefore, is not my dish.

(3) with the development framework

Personalized products, of course, have to develop their own design, but the structure of the code and later processing, can be left out of the framework products. In this way, the efficiency of the development design is ensured, and the greater freedom of code processing can be obtained. The disadvantage may be that the technical threshold will be higher.

Billion book choose to use Ember as the front-end development framework, involving the products include: the official website, the client platform. Can share the parts, all extracted, independent of the basic components, easy to share the use of products, will greatly improve the product line development progress. Try a bit ember, feel very good, no longer it gu.

Old hatred with Ember's forget

Before contact with Ember, it should be 1.0 version of the previous things, said it will have to be more than 2 years. Originally Ruby on Rails fiery, out of the discourse Forum is to Ror for the backstage, with ember development of the front end, very cool, really a bit ambitions of the feeling (Ember propaganda slogan).

However, a trial, with the background of the idea to develop front-end applications, a little tear, a lot of things are not the way. Mechanically back-end MVC pattern, in addition to make development more complex, feel not too big breakthrough. In addition, Ember is the most tightly packaged front-end framework, a large number of ready-made third-party development packages on the market can not be directly introduced into use, but also become a criticism of the place.

This time, in order to develop 亿书 the official website, but also to the future client development to choose a technical solution, re-looked at the ember. Do not see, a look, I have a go, is simply in accordance with their own expectations in the improvement, try a bit, more than a cool word. Really thanks, these steadfast work team, they are really very ambitions . We have to learn to appreciate the beautiful things.

Understand Ember a few confusing deep "pits"

For some small partners, the learning curve of Ember is still steep. Here to pull a few ember "bad" habit, not a trial will be poured cold water. Introductory article, there are many online, it is not repeated. Here is a hint, I understand, need to remind the small partners to pay attention to the place, simply say.

1. What is a front-end framework?

Seemingly advanced things, in fact, is just a JS file. Therefore, you can use the same as other JS files, in your own page to be introduced and used. Since it is called the framework, it is clearly provided 特定的规则 , so the focus of learning it is to master these rules. Mastery is not good, nature will fall into the "pit".

Why do you say that because Ember official documents is not a good thing, it does not have a whole concept, sometimes it is impossible to know "why so." Even the details of the introduction, is not so thin, sometimes need to combine the source to understand. Moreover, the version, API changes too fast. These were raised two years ago and are still not much improved. The team is how "insisted" a bunch of buddies.

2. Be sure to use its command-line tool EMBER-CLI

This will not hesitate, although you can use the JS file directly, but there is no ember-cli such a powerful command line tool, the difficulty of using ember will be steep. This tool makes it very kind to develop Ember applications, such as developing daemons, especially friends who are accustomed to using Ruby on rails. This tool (or through plugins) does everything from building a project, generating all kinds of logic code, to testing, deploying, and so on.

Not used to command line development? When I didn't say.

3. Install using the Ember-inspector plugin on the browser

This has to be. In Ruby on Rails, the resulting routing information can be viewed on the command line. However, for front-end applications, only the front-end can be viewed. Through this tool, you can master the generated routing, controller, view components and other types of object information, as well as the corresponding relationship between them, but also click on the corresponding object, to view the corresponding method and the loaded data. More important, the Ember default generated routes and views are also listed, such as Indexroute,

4.Ember the MVC model advocated by the VC

In the Ember MVC model, the previous version, M : Representative model, V : view (plus helper,component), C : Controller, the routing route exists separately. After the 2.0 version, this mode changed, VC part gradually eliminated, replaced by router + model + component form.

Or, the content of V becomes COMPONENT,C content in the router. Personally, this should be rational return, because in the previous version, the controller can do things, router can still do, leaving the controller can only be a concept of implementation, essentially useless.

Of course, the current version retains the Controller and view (which can be used by plugins), but it doesn't have to be used.

5. With the components, there's no more. Global template layout and partial template partial existence

It's important to understand this. On the one hand, Ember claims to be future-oriented, and the UI component component developed today can be used later. In later versions, the status of the components is more important. So, before the article may be a list, such as: Post-item processing, is to write a local template partial to achieve reuse, today with the component is good. Partial is no longer supported.

On the other hand, APPLICATION.HBS itself is equivalent to a Layout.hbs file, as a single page application, naturally there is no so-called layout of the existence, which is different from the background use handlebar.js. Its rendering level is as follows:

This picture, right vote simply describes the Ember view rendering process, the dynamic image will be more intuitive. In fact, it can be more complicated, and put some hook methods into it, so that the Ember data transfer, view rendering and other processes will be more intuitive.

6. Mastering the hooks of the routing, model, UI components and other parts is the only way to play Ember.

Design an independent static page, certainly no difficulty, so the simple Hello World program can not see anything. The reality is that multiple models of associated operations, routing state transfer changes, UI components of the interactive nesting, plug-ins and the main program of good expansion is the norm in development, processing them simple, it is really simple.

This part, it is necessary to summarize separately, have the opportunity to say, ^_^.

7. Local plug-in development, the most easily overlooked gestures

This is not ember problem, but Ember plugin is NPM package, natural NPM problem is also its problem. Our locally developed debug NPM package (or EMBER-CLI plugin) is typically used npm link with npm link npm-name two commands to bring the developed NPM package into the project. The easiest thing to ignore is that after you run the command, you should also package.json add a dependency on the package in the project ember-cli-pluginName: ‘*‘ .

In fact, there is no need to set it. But this is the surest way to do it. It is recommended to take this small step as a fix 约束 , which will save a lot of time (I was in the pit this time for most of the day).

Summarize

Here is the billion book official website development experience, just one weeks of experience, and can not understand the essence of it, if you read the feeling is not so, it must not be ember problem, but the author of my ability to limit.

Ember is a product worth mastering, this is a primer, the next two, plan to plot its rendering process and hook method, introduce its plug-in development, and slowly complement the client development part of the content.

When writing this article, the source code involved is still in the collation, the document and test is not added, the function is not sound, if you like Ember, welcome to participate in the project or star.

Link

This series of articles is updated immediately, to keep up to date, please follow the link below

Source Address: Https://github.com/imfly/bitcoin-on-nodejs

ebook reading: http://bitcoin-on-nodejs.ebookchain.org

Related to the source code, if found useful, welcome through the star Collection

Billion book official website Source: https://github.com/Ebookchain/ebookchain.org

Full Screen page plugin: Https://github.com/imfly/ember-cli-fullPagejs

Animation effect Navigation: Https://github.com/imfly/ember-cli-animated-header

Ember Scrolling Event: Https://github.com/imfly/ember-cli-scroller

Reference

Ember Official website: https://emberjs.com

EMBER-CLI Official website: http://ember-cli.com

Billion Book official website: http://ebookchain.org

"Nodejs development Crypto currency" of 12: Static Web Development panorama Scan