Update & Translate Overview Docs (#3040)

content/en/blog/ web/_index.md

@@ -0,0 +1,7 @@
+---
+title: "Web"
+linkTitle: "Web"
+weight: 32
+description: "Developing Dubbo Web applications running in the browser using Javascript"
+---
+

content/en/blog/ web/web-announcement.md

@@ -0,0 +1,267 @@
+---
+title: "Can web browser pages access Dubbo and gRPC microservices? Dubbo-js alpha version officially released"
+linkTitle: "Can web browser pages access Dubbo and gRPC microservices? Dubbo-js alpha version officially released"
+tags: ["web", "dubbo-js", "browser"]
+authors: ["Cai Jianyi"]
+date: 2023-10-07
+description: "Dubbo-js has officially released its first alpha version supporting the Dubbo3 protocol in September, which has the potential to fundamentally change the architecture and communication patterns between microservices' front-end and back-end, allowing you to access back-end Dubbo RPC services directly from browser pages or web servers."
+---
+
+Based on the Triple protocol defined by Dubbo3, you can easily write browser and gRPC-compatible RPC services, allowing these services to run simultaneously on HTTP/1 and HTTP/2. The [Dubbo TypeScript SDK](https://github.com/apache/dubbo-js/) supports defining services using IDL or language-specific approaches and provides a lightweight API to publish or invoke these services.
+
+Dubbo-js has officially released its first alpha version supporting the Dubbo3 protocol in September, which promises to transform the architecture and communication models between front-end and back-end of microservices, enabling direct access to back-end Dubbo RPC services from browser pages or web servers. The project is rapidly evolving, and developers interested in participating in the apache/dubbo-js project are welcome to search for the DingTalk group: **29775027779** to join the developer group.
+
+![Can web browser pages access Dubbo and gRPC microservices](/imgs/blog/2023/9/web/img.png)
+# Browser Web Application Example
+This example demonstrates how to develop a web application running in the browser using dubbo-js, where the web page calls back-end services developed in dubbo node.js to generate page content. This example showcases both IDL and non-IDL coding modes.
+
+![Can web browser pages access Dubbo and gRPC microservices](/imgs/blog/2023/9/web/img_1.png)
+## IDL Mode
+### Prerequisites
+First, we will use Vite to generate our front-end project template, which includes all the necessary feature support we'll need later.
+
+```shell
+npm create vite@latest -- dubbo-web-example --template react-ts
+cd dubbo-web-example
+npm install
+```
+
+Due to using Protocol Buffer, we first need to install the relevant code generation tools, including `@bufbuild/protoc-gen-es`, `@bufbuild/protobuf`, `@apachedubbo/protoc-gen-apache-dubbo-es`, and `@apachedubbo/dubbo`.
+
+```shell
+npm install @bufbuild/protoc-gen-es @bufbuild/protobuf @apachedubbo/protoc-gen-apache-dubbo-es @apachedubbo/dubbo
+```
+
+### Define Services Using Proto
+
+Now, define a Dubbo service using Protocol Buffer (IDL).
+
+Create the util/proto directory under src and generate the file
+
+```shell
+mkdir -p src/util/proto && touch src/util/proto/example.proto
+```
+
+Write the content
+
+```protobuf
+syntax = "proto3";
+
+package apache.dubbo.demo.example.v1;
+
+message SayRequest {
+  string sentence = 1;
+}
+
+message SayResponse {
+  string sentence = 1;
+}
+
+service ExampleService {
+  rpc Say(SayRequest) returns (SayResponse) {}
+}
+```
+
+This file declares a service called `ExampleService`, defining the `Say` method along with its request parameter `SayRequest` and return value `SayResponse`.
+
+### Generate Code
+
+Create a gen directory as the target directory for generated files
+
+```shell
+mkdir -p src/util/gen
+```
+
+Run the following command to generate the code files in the gen directory using plugins like `protoc-gen-es`, `protoc-gen-apache-dubbo-es`
+
+```shell
+PATH=$PATH:$(pwd)/node_modules/.bin \
+  protoc -I src/util/proto \
+  --es_out src/util/gen \
+  --es_opt target=ts \
+  --apache-dubbo-es_out src/util/gen \
+  --apache-dubbo-es_opt target=ts \
+  example.proto
+```
+
+After running the command, you should see the following generated files in the target directory:
+
+```
+├── src
+│   ├── util
+│   │   ├── gen
+│   │   │   ├── example_dubbo.ts
+│   │   │   └── example_pb.ts
+│   │   └── proto
+│   │       └── example.proto
+```
+
+### Create App
+
+First, install `@apachedubbo/dubbo-web`
+
+```shell
+npm install @apachedubbo/dubbo-web
+```
+
+Now we can import the service from the package and set up a client. Add the following content in App.tsx:
+
+```typescript
+import { useState } from "react";
+import "./App.css";
+
+import { createPromiseClient } from "@apachedubbo/dubbo";
+import { createDubboTransport } from "@apachedubbo/dubbo-web";
+
+// Import service definition that you want to connect to.
+import { ExampleService } from "./util/gen/example_dubbo";
+
+// The transport defines what type of endpoint we're hitting.
+// In our example we'll be communicating with a Dubbo endpoint.
+const transport = createDubboTransport({
+  baseUrl: "http://localhost:8080",
+});
+
+// Here we make the client itself, combining the service
+// definition with the transport.
+const client = createPromiseClient(ExampleService, transport, { serviceGroup: 'dubbo', serviceVersion: '1.0.0' });
+
+function App() {
+  const [inputValue, setInputValue] = useState("");
+  const [messages, setMessages] = useState<
+    {
+      fromMe: boolean;
+      message: string;
+    }[]
+  >([]);
+  return (
+    <>
+      <ol>
+        {messages.map((msg, index) => (
+          <li key={index}>{`${msg.fromMe ? "ME:" : "Dubbo Server:"} ${msg.message}`}</li>
+        ))}
+      </ol>
+      <form
+        onSubmit={async (e) => {
+          e.preventDefault();
+          // Clear inputValue since the user has submitted.
+          setInputValue("");
+          // Store the inputValue in the chain of messages and
+          // mark this message as coming from "me"
+          setMessages((prev) => [
+            ...prev,
+            {
+              fromMe: true,
+              message: inputValue,
+            },
+          ]);
+          const response = await client.say({
+            sentence: inputValue,
+          });
+          setMessages((prev) => [
+            ...prev,
+            {
+              fromMe: false,
+              message: response.sentence,
+            },
+          ]);
+        }}
+      >
+        <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
+        <button type="submit">Send</button>
+      </form>
+    </>
+  );
+}
+
+export default App;
+```
+
+Run the following command to obtain the sample page
+
+```shell
+npm run dev
+```
+
+### Start Server
+
+Next, we need to start the server. You can develop the server in any language supported by Dubbo, such as Java, Go, or Node.js. Here we will use a Node.js server embedded with Dubbo services, detailed in the [Node.js Development of Dubbo Backend Services](https://github.com/apache/dubbo-js/tree/dubbo3/example/dubbo-node-example) guide.
+
+However, we need to make an additional modification to the Node.js example: import @fastify/cors to solve the CORS issue for front-end requests.
+
+```shell
+npm install @fastify/cors
+```
+
+The modification in the server.ts file should include
+
+```typescript
+...
+import cors from "@fastify/cors";
+
+...
+async function main() {
+  const server = fastify();
+  ...
+  await server.register(cors, {
+    origin: true,
+  });
+  ...
+  await server.listen({ host: "localhost", port: 8080 });
+  ...
+}
+
+void main();
+```
+
+Finally, run the code to start the service
+
+```shell
+npx tsx server.ts
+```
+
+## Non-IDL Mode
+In upcoming versions, we will continue to provide non-IDL mode communication support for easier access to non-IDL back-end services. Here, we will quickly look at the use of non-IDL mode.
+
+Again, first install `@apachedubbo/dubbo`, `@apachedubbo/dubbo-web`
+
+```shell
+npm install @apachedubbo/dubbo @apachedubbo/dubbo-web
+```
+
+Now you can start a client and initiate a call. The code in App.tsx is mostly identical to the IDL mode, with the following differences:
+
+```typescript
+// ...
+// set backend server to connect
+const transport = createDubboTransport({
+  baseUrl: "http://localhost:8080",
+});
+// init client
+const client = createPromiseClient(transport);
+
+function App() {
+  // ...
+  // call remote Dubbo service
+  const response = await client.call(
+    "apache.dubbo.demo.example.v1.ExampleService",
+    "say",
+    {
+      sentence: inputValue,
+    });
+}
+```
+
+Run the following command to get the sample page
+
+```shell
+npm run dev
+```
+# Summary
+Access back-end Dubbo RPC services directly from browser pages or web servers! The upgrade of the Dubbo Triple protocol and the release of the Dubbo JavaScript SDK provide a significant enhancement to the entire microservices ecosystem, expecting to see it change the entire microservices architecture and front-end and back-end communication patterns in the future.
+
+Dubbo-js has just released the first alpha version supporting the Dubbo3 Triple protocol in September, and the project is rapidly evolving. Developers interested in participating in the apache/dubbo-js project are welcome to join the organization through the following methods:
+
+- Search for DingTalk group: **29775027779** to join the developer group.
+- Follow the public account `apachedubbo`, reply "dubbojs" to accept the invitation to join the development team.
+

content/en/blog/_index.md

@@ -1,13 +1,14 @@
 ---
 title: "Apache Dubbo Blog"
-linkTitle: "BLOG"
+linkTitle: "Blog"
 menu:
   main:
-    weight: 30
+    weight: 3
 ---
 
 
 This is the **blog** section. It has two categories: News and Releases.
 
 Files in these directories will be listed in reverse chronological order.
 
+

content/en/blog/integration/_index.md

@@ -0,0 +1,6 @@
+---
+title: "Ecosystem Integration"
+linkTitle: "Ecosystem Integration"
+weight: 11
+description: "Blogs related to Dubbo ecosystem integration"
+---  

content/en/blog/integration/dubbo-admin.md

@@ -0,0 +1,89 @@
+---
+title: "Introduction to the New Dubbo Admin"
+linkTitle: "Introduction to the New Dubbo Admin"
+date: 2019-01-07
+tags: ["Ecosystem", "Java"]
+description: >
+    The current version of Dubbo Admin includes most of the functions from previous versions, including service governance, service query, and supports new service governance features in Dubbo 2.7.
+---
+
+```
+github: https://github.com/apache/dubbo-ops
+```
+The previous versions of Dubbo Admin were outdated and lacked maintenance for a long time. Therefore, a major refactoring of the project was carried out mid last year, with the following structural changes:  
+* The backend framework was replaced from webx to spring boot.
+* The frontend uses Vue and Vuetify.js as the development framework.
+* Removed velocity templates.
+* Integrated swagger for API management features.
+
+The current version of Dubbo Admin includes most of the functions from previous versions, including service governance and service query, while supporting the new service governance features introduced in Dubbo 2.7.
+
+## Configuration Specifications  
+In Dubbo 2.7, the configuration center and registration center have been separated, and a metadata center has been added, leading to updates in the configuration methods for Dubbo Admin. The configuration in `application.properties` is as follows:   
+```properties
+admin.registry.address=zookeeper://127.0.0.1:2181
+admin.config-center=zookeeper://127.0.0.1:2181
+admin.metadata-report.address=zookeeper://127.0.0.1:2181
+```
+It is also possible to specify the addresses for metadata and registration centers in the configuration center, just as in Dubbo 2.7. For example, the configuration path and content are as follows: 
+```properties
+# /dubbo/config/dubbo/dubbo.properties
+dubbo.registry.address=zookeeper://127.0.0.1:2181
+dubbo.metadata-report.address=zookeeper://127.0.0.1:2181
+```
+The addresses in the configuration center will override the local `application.properties` settings.
+
+## Feature Introduction  
+The features mainly continue from previous versions, including service query and governance. Version 2.7 brings significant improvements to service governance, most of which will be reflected in Dubbo Admin.
+
+### Tag Routing  
+Tag routing is a new feature introduced in Dubbo 2.7, configured per application, allowing different labels to be assigned to various servers, as shown in the configuration below:
+
+![tag](/imgs/blog/admin/route.jpg)
+
+During invocation, the client can set different tag names using `setAttachment`, for example, `setAttachment(tag1)`. The client can then select among the three machines shown in the image, enabling traffic isolation and gray releases.
+
+### Application-Level Service Governance  
+In Dubbo 2.6 and earlier, all service governance rules were at the service granularity. To apply a rule to the application level, all services under the application needed to be matched with the same rules, which was cumbersome. Therefore, in Dubbo 2.7, application-level service governance operations have been added, allowing conditions (including black/white lists) and dynamic configuration (including weight and load balancing) to be configured at the application level:  
+
+![condition](/imgs/blog/admin/conditionRoute.jpg) 
+
+The above image shows the condition routing configuration, which can be filled in according to application name and service name, and can also be queried by these dimensions.  
+
+![weight](/imgs/blog/admin/weight.jpg)  
+
+Condition routing, tag routing, and dynamic configurations are written in `yaml` format, while other rule configurations still use a form format.
+
+#### About Compatibility  
+From Dubbo 2.6 to Dubbo 2.7, significant changes occurred in service governance. Dubbo Admin is compatible with both versions:  
+* For service-level configurations, entries will be written in both Dubbo 2.6 (URL) and Dubbo 2.7 (configuration files) formats to ensure that Dubbo 2.6 clients can correctly read and parse the rules. 
+* Application-level configurations, including tag routing, will only be written in the Dubbo 2.7 format, as Dubbo 2.6 doesn't have this feature, so there is no need for backward compatibility.
+* Dubbo Admin will only read configurations in the Dubbo 2.7 format, meaning that all configurations made on Dubbo Admin can be read, but legacy URLs in the Dubbo 2.6 format cannot be read.
+* For the same application or service, each rule can only be configured once; otherwise, the new one will overwrite the old.
+
+### Configuration Management  
+Configuration management is also a newly added feature in Dubbo 2.7, with both global and application-level configurations:  
+* Global Configuration: 
+
+![config](/imgs/blog/admin/config.jpg)  
+
+Global configurations can specify the registration center and metadata center addresses, as well as the timeout settings for both server and client, and these settings take effect globally. In addition to writing configurations, this section can also be used for viewing them. If using zookeeper as the registration and metadata center, the directory structure of the configuration files can also be viewed.  
+* Application, Service Configuration  
+
+![appConfig](/imgs/blog/admin/appConfig.jpg)  
+
+Application-level configurations can specify settings for applications or services within applications, requiring a distinction between providers and consumers. `dubbo.reference.{serviceName}` represents the configuration for the service consumer, and `dubbo.provider.{servcieName}` represents the configuration for the service provider. The priority is service > application > global. The addresses for the registration and metadata centers can only be specified in the global configuration, which is the recommended method in Dubbo 2.7.  
+
+### Metadata and Service Testing  
+Metadata is a newly introduced element in Dubbo 2.7, mainly utilized within Dubbo Admin and appears in two primary areas:  
+* Service Detail Display:
+
+![metadata](/imgs/blog/admin/metadata.jpg)  
+
+Compared to previous versions, Dubbo 2.7 adds complete signature records for service methods, therefore the service detail has also been enhanced with method details, including method name, parameter list, and return value information.  
+* Service Testing: 
+
+![test](/imgs/blog/admin/test.jpg)
+
+More importantly, metadata provides a data foundation for service testing, enabling real service providers to be called directly on the page for convenience, eliminating the need to set up a Dubbo environment or write consumer code just for service invocation.
+