Smukt og kraftfuldt instrumentbræt: Ant Design Pro 2.0 frigivet og introduceret Umi

Efter frigivelsen af ​​1.0 har Ant Design Pro modtaget omfattende opmærksomhed og vedtagelse i branchen. Antallet af stjerner på GitHub er steget hele vejen til 11.686, og hundredvis af midt- og back-end-applikationer drevet af Ant Design Pro er også landet inden i Ant Financial.

Udviklingen på 2,0 har været i gang de sidste 8 måneder. Ved hjælp af 38 fantastiske bidragydere spikrer vi sammen 600 forpligtelser, masser af nye funktioner og en samlet arkitekturopgradering. Nu annoncerede vi stolt Ant Design Pro 2.0. Specifikt bragte vi fire nye sider, flere layouts for at berige brugsscenarierne. Vi opgraderede vores stillads fra roadhog til umi2 og tilføjede en cool opsætningsskuffe. Kom og check vores projekt her:

  • Startside: http://pro.ant.design/
  • Preview til instrumentbræt: http://preview.pro.ant.design/
  • GitHub: http://github.com/ant-design/ant-design-pro

Nye sider

Som den mest indflydelsesrige webdesignspecifikation for XiHu District har en elegant, smuk og godt designet side altid været vores største fordel. I V2 bragte vi også en række sideopdateringer og optimeringer, herunder:

  • Trin for trin Modal
  • Oplysning Modal
  • Personligt centrum
  • Personlige indstillinger

Nyt layout og tema

I V2 har vi en række layouts indbygget. Du kan kombinere en række sider for at imødekomme dit krav med enkel konfiguration. Der vil altid være en, du kan lide. For at gøre det lettere for alle at se resultaterne hurtigere udviklede vi en cool opsætningsskuffe til at skifte tema med bare få skift. Efter at have bekræftet med de ønskede stilarter, kan du kopiere indstillingskoden og indstille dem som standard. At ændre tema var aldrig så let! Vigtigere er det, at hele processen er online, og du behøver aldrig at genstarte stilladsprocessen. Bare slap af og nyd nem og øjeblikkelig temaskift!

Stillads ved hjælp af umi

umi er baseret på routing, understøtter next.js-lignende konventionel routing og forskellige avancerede routingfunktioner, såsom routing-niveau on-demand-indlæsning. Derefter med et komplet pluginsystem, der dækker alle livscyklusser fra kildekode til at opbygge produkt, er umi i stand til at understøtte forskellige funktionelle udvidelser og forretningsbehov, og i øjeblikket har umi næsten 50+ plugins i både samfund og inden for virksomheden.

umi er den grundlæggende front-end ramme for Ant Financial, og har tjent hundreder eller tusinder af applikationer direkte eller indirekte, inklusive java, node, mobilapp, hybrid app, ren front-end aktiver app, CMS app og mere. umi har tjent vores interne brugere meget godt og håber, at han også kan betjene eksterne brugere.

Det har følgende funktioner:

  • Out of box , indbygget reaktion 、 react-router osv
  • Next.js-lignende og fuldt udstyrede routingkonventioner understøtter også konfigureret routing
  • Komplet pluginsystem, der dækker enhver livscyklus fra kildekode til produktion
  • Høj ydeevne, understøttelse af PWA, ruteniveaukodedeling osv. Via plugin
  • Understøtt statisk eksport, tilpasning til forskellige miljøer, såsom konsoleapp, mobilapp, æg, Alipay-tegnebog osv.
  • Hurtig dev opstart, support aktivere dll og hard-source-webpack-plugin med config
  • Kompatibel IE9, baseret på umi-plugin-polyfills
  • Support TypeScript, inklusive d.ts-definition og umi-test
  • Dyb integration med dva, support-duck-bibliotek, automatisk indlæsning af model, kodespaltning osv

Loading On-demand-lastesupport

On-demand-belastning bliver super let i V2. Gør bare følgende konfiguration i babel-plugin-import:

{
    biblioteknavn: 'ant-design-pro',
    bibliotekKatalog: 'lib',
    stil: sandt,
    camel2DashComponentName: false,
  }

Du kan bruge Ant Design Pro-komponenter som antd, og vi anbefaler kraftigt, at du bruger denne metode til at reducere størrelsen på din bundtpakke betydeligt.

import {Resultat} fra 'ant-design-pro';
ReactDOM.render (, mountNode);

Best International praksis bedste praksis

V2 leverer bedste praksis for internationalisering baseret på umi-plugin-locale. Du behøver kun at placere den tilsvarende js-fil (som en-US.js / zh-CN.js) i src / locales, og internationaliseringsrelaterede funktioner vil være tilgængelige i koden!

import {
  formatMessage,
  setlocale,
  getLocale,
  FormattedMessage,
} fra 'umi / locale';
eksportstandard () => {
  return 
}

Hvad er det næste

I fremtiden vil vi være mere opmærksomme på ydeevne og brugervenlighed af Ant Design Pro. Og ved hjælp af umi vil vi prøve at undersøge komponentmaterialisering. Yderligere vil vi fortsætte med at forbedre dokumentationen for at reducere omkostningerne ved brug. Bedre udseende og let at bruge har været og vil altid være vores retning, og vi vil fortsætte med at kæmpe for det.

Særlig tak

Tak til alle bidragydere, der indsendte fejl, åbnede PR'er, reagerede på problemer, skrev dokumentation og meget mere! Særlig tak til følgende community-partnere @ yoyo837 @xiaohuoni @zhangxiuling @kaoding, og bestemt alle de 38 bidragydere, der har åbnet PR'er for V2. Din deltagelse har gjort pro V2-frigivelsen til virkelighed.

Hvis du støder på problemer, når du bruger Ant Design Pro V2, er du velkommen til at indsende en ny udgave på GitHub.

Tak for din tid. Grib og installer det, prøv det!

Endelig

En anden ting, der er værd at nævne, vores team arbejder på et produktnavne for vidensamarbejde 『语 雀』 (betydninger larkfugl kan tale), vi offentliggør også denne artikel og den kinesiske version der du kan gå forbi. Produktet er stadig i beta og er ikke godt for engelske brugere, som vi nu arbejder hårdt for at forbedre.