2016-01-04 38 views
7

La mia domanda riguarda come organizzare il fronte e il retro insieme nel progetto. Per quanto ne so, ci sono due modi per fare una cosaCome combinare quadro di gioco e angular2?

  1. Gruppo la parte anteriore e la parte posteriore in un progetto utilizzando web-giare le dipendenze e plugin SBT. Così sbt verrà eseguito tutte le operazioni necessarie come uglify, concat, compilation (typescript a javascript) ...
  2. separata la parte anteriore e la parte posteriore e distribuirli separatamente. In questo caso il back-end deve aggiungere l'intestazione Access-Control-Allow-Origin. In questo modo il fronte e il retro possono essere schierati in 2 diversi host. E lo strumento da utilizzare sarà npm e gulp/grunt
  3. Mix di 1 e 2. Ancora usa lo stesso repository per il fronte e il retro ma il front è compilato e generato da strumenti esterni come npm, bower e gulp/grunt

Per il momento, non ci sono molti documenti per le opzioni 2 e 3. Anche il plug-in typescript non è ancora pronto.

Qual è il modo migliore per lo sviluppo di scala play + angular2?

+2

Il mio vincitore è no. 1 - in questo modo si riduce il requisito per lo specialista di altri framework, anche se si desidera lavorare in stack multidominio e/o app separate, è possibile utilizzare alcune soluzioni come un leggero server HTTP per reverse proxy/multidominio/bilanciamento del carico. La tua domanda è basata sull'opinione pubblica, quindi la mia risposta potrebbe essere solo un'opinione :) – biesior

+1

Grazie, ma conosci qualche tutorial per farlo con angular 2 e dattiloscritto. Ho visto qualche progetto su GitHub, ma sembra immaturo in questo momento – nam

+2

Come @biesior menzionato, è supponente, io per primo, non mi piace per dividerlo in 2 applicazioni, io odio la configurazione grugnito/sorso per le impostazioni del proxy. Il gioco gestisce tutto ciò che è jazz, c'è anche il vantaggio che non devi configurare alcuna impostazione CORS. Quello che ho fatto anche io: non uso webjars ma bower/npm, si trovano nella cartella/public. Definisco un punto di ingresso per angolare, ad esempio: '/ welcome' da lì su angular prende il routing. Si potrebbe desiderare di guardare a questo [domanda] (http://stackoverflow.com/questions/16085544/play-framework-2-1-angularjs-routing-best-solution) –

risposta

9

Recentemente ho lavorato con diverse app Angular e Angular 2 e ho affrontato un problema simile. Per tutti gli scenari, le nostre app di backend e di frontend erano separate in termini di codice e comunicavano solo tramite le interfacce REST. Tuttavia, forniamo entrambe le parti frontend e backend ed è stato naturale utilizzare un server di hosting per entrambi (potrebbe essere Play Framework o Tomcat).

Opzione n. 1 All'inizio, abbiamo optato per questo. I webjars sembrano un miracolo e diversi plug-in o maven possono aiutarti con la minificazione, la compilazione, il linting ecc. Del tuo progetto di frontend. Potrebbe andar bene per alcuni. Purtroppo, ho trovato questo flusso di lavoro innaturale. Alcuni plugin mancavano o la loro configurazione era difficile. I webjars non sono sempre aggiornati, alcuni sono automaticamente disponibili, altri no ... ecc. In un progetto semplice potrebbe funzionare, ma per me non è stato sufficiente.

Opzione n. 2 Abbiamo provato server separati per lo sviluppo ma abbiamo smesso velocemente. Per la maggior parte delle azioni, hai ancora bisogno del tuo server frontend e backend. Quindi devi iniziare entrambi. Significa che hai 2 o più comandi o flussi di lavoro per ricordare e insegnare agli altri. Il CORS non è un grosso problema, ma potresti prendere in considerazione la possibilità di disabilitarlo per la produzione, il che significa lavoro extra nel progetto. Lo sviluppo di backend o frontend separatamente è stato più veloce in questo modo, ma secondo me, se devi fornire entrambi - il tuo processo di sviluppo dovrebbe aiutarti a farlo.

Opzione n. 3 Questo è quello che stiamo utilizzando. Con sbt è possibile e conveniente. Il plug-in SbtWeb consente di impostare playRunHooks in qualsiasi azione che si desidera eseguire con il progetto. L'idea è quella di eseguire uno strumento JavaScript accumulo che farà tutti i lavori necessari, frontend, fe:

playRunHooks += { 
    Process(Seq("npm", "install"), file(portal)).lines.foreach(println) 
    RunSubProcess(portal, "npm", "run", "watch") 
} 

RunSubProcess può essere trovato here.

Quindi tagliando la lunga storia breve, lasci che Play Server serva il tuo contenuto statico, ma ignori le sue modifiche.Questo è preso cura di npm, gulp, webpack, grunt - quello che vuoi. Sono disponibili numerosi strumenti di sviluppo JavaScript, plug-in e modelli per aiutarti. Non è necessario alcun plug-in sbt, è sufficiente consentire al mondo JavaScript di svolgere il proprio lavoro. Potrebbe essere difficile da impostare all'inizio, ma ripaga rapidamente.

Come progetto di esempio, è possibile controllare il modello di attivatore Play Framework with Angular 2 and Webpack 2 e il progetto è ospitato su GitHub: play-ng2-webpack2. Mi ha aiutato un po '.

Ora è anche possibile utilizzare Tomcat, con xsbt-web-plugin e developmentMode. La filosofia è simile.

Speranza a trovare la strada :).

+0

eventuali piani per rilasciare l'opzione n. 3 come plugin sbt? –

Problemi correlati