docs: rework key concepts (#521)

Add description for components in Key concepts with links to Using Components and Creating Components and reorder the listing for key concepts

* rebase server again

* weird rebase

_data/sidebars/lb4_sidebar.yml

@@ -35,33 +35,34 @@ children:
 
   - title: 'Application'
     url: Application.html
+    output: 'web, pdf'
 
   - title: 'Server'
     url: Server.html
     output: 'web, pdf'
 
-  - title: 'Sequence'
-    url: Sequence.html
-    output: 'web, pdf'
-
-  - title: 'Routes'
-    url: Routes.html
+  - title: 'Context'
+    url: Context.html
     output: 'web, pdf'
 
-  - title: 'Schemas'
-    url: Schemas.html
+  - title: 'Dependency injection'
+    url: Dependency-injection.html
     output: 'web, pdf'
 
   - title: 'Controllers'
     url: Controllers.html
     output: 'web, pdf'
 
-  - title: 'Context'
-    url: Context.html
+  - title: 'Routes'
+    url: Routes.html
     output: 'web, pdf'
 
-  - title: 'Dependency injection'
-    url: Dependency-injection.html
+  - title: 'Sequence'
+    url: Sequence.html
+    output: 'web, pdf'
+
+  - title: 'Schemas'
+    url: Schemas.html
     output: 'web, pdf'
 
   - title: 'Repositories'

pages/en/lb4/Concepts.md

@@ -15,15 +15,17 @@ the central class for setting up all of your module’s components, controllers,
 servers and bindings. The Application class extends [Context](Context.html), and
 provides the controls for starting and stopping itself and its associated
 servers.
-- [**Sequence**](Sequence.html): A stateless grouping of [Actions](Sequence.html#actions) that control how a Server responds to requests.
+- [**Server**](Server.html): Represents implementation for inbound transports and/or protocols such as REST over http, gRPC over http2, and graphQL over https. It typically listens for requests on a specific port, handle them, and return appropriate responses.
+- [**Context**](Context.html): An abstraction of all state and dependencies in your application, that LoopBack uses to “manage” everything. It's a global registry for everything in your app (configurations, state, dependencies, classes, and so on).
+- [**Dependency Injection**](Dependency-Injection.html): Technique that separates the construction of dependencies of a class or function from its behavior, to keep the code loosely coupled.
+- [**Controller**](Controllers.html): Class that implements operations defined by application’s REST API. It implements an application’s business logic and acts as a bridge between the HTTP/REST API and domain/database models. A Controller operates only on processed input and abstractions of backend services / databases.
 - [**Route**](Routes.html): Mapping between your API specification and an Operation (JavaScript implementation). It tells LoopBack which function to invoke() given an HTTP request.
+- [**Sequence**](Sequence.html): A stateless grouping of [Actions](Sequence.html#actions) that control how a Server responds to requests.
 - [**Schema**](Schemas.html): Represents the definition of a model in LoopBack, with respect to the datasource juggler. The `@loopback/repository` module provides special decorators for adding metadata to TypeScript/JavaScript classes to use them with the legacy implementation of Datasource Juggler.
-- [**Controller**](Controllers.html): Class that implements operations defined by application’s REST API. It implements an application’s business logic and acts as a bridge between the HTTP/REST API and domain/database models. A Controller operates only on processed input and abstractions of backend services / databases.
-- [**Context**](Context.html): An abstraction of all state and dependencies in your application, that LoopBack uses to “manage” everything. It's a global registry for everything in your app (configurations, state, dependencies, classes, and so on).
-- [**Dependency Injection**](Dependency Injection.html): Technique that separates the construction of dependencies of a class or function from its behavior, to keep the code loosely coupled.
 - [**Repository**](Repositories.html): Type of Service that represents a collection of data within a DataSource.
 - [**Decorator**](Decorators.html): Enables you to annotate or modify your class declarations and members with metadata.
-- [**Server**](Server.html): Represents implementation for inbound transports and/or protocols such as REST over http, gRPC over http2, and graphQL over https. It typically listens for requests on a specific port, handle them, and return appropriate responses.
+- **Component**: A package that bundles one or more Loopback extensions.
+  - See [Using components](Using-components.html) and [Creating components](Creating-components.html) for more information.
 
 {% include note.html title="Review Note" content="_Perhaps this should include some of the material in <a href='Thinking-in-LoopBack.html'> Thinking in LoopBack</a>_.
 " %}