Desafios no desenvolvimento de
 uma aplicação real com Flex




       João Augusto Zaratine <zaratine@gmail.com>
         ...
Eu
        Flex desde 2007

Informant <www.informant.com.br>

NOUS <www.noussoftware.com>

     blog.joaoaugusto.com.br

 ...
A APLICAÇÃO
http://vimeo.com/13278187
           Texto
DESAFIO #1
Criando textos de verdade
O que queríamos...
O que tínhamos...
✓Alinhamento
✓Tamanhos            ๏Imagens
✓sublinhado
 Negrito, itálico,
                     x Colunas
                 ...
✓Alinhamento
✓Tamanhos            ✓Colunas
✓sublinhado
 Negrito, itálico,
                     ๏Imagens
                  ...
É quase impossível usar
         o TLF
“O CKEditor é o que
precisamos... Isso não é
       Flex, é?”
“Já sei, vamos fazer um
          popup”
Bom, agora só falta
 exibir o texto....
DESAFIO #2
Exibindo conteúdo HTML
Tentativa #1
   htmlText
✓ <a>            ✓ <u>
✓ <b>            x <div>
✓ <br>           x <table>, <th>, <tr>, <td>
✓ <font>         x <object>, ...
Tentativas #2 #3
  #4 #5 #6...
DENG
DENG
   IFrame 1
DENG
           IFrame 1
IFrame 2
DENG
           IFrame 1
IFrame 2
               IFrame 3
DENG
           IFrame 1
IFrame 2
               IFrame 3
 IFrame 4
DENG
IFrame 5     IFrame 1
  IFrame 2
                 IFrame 3
    IFrame 4
DENG
                        IFrame 6
IFrame 5     IFrame 1
  IFrame 2
                 IFrame 3
    IFrame 4
Qual é o melhor lugar para
      exibir HTML?
Qual é o melhor lugar para
      exibir HTML?

Talvez numa página HTML?
Largura:100%




                             Altura: 100%
Aplicação Flex Tradicional


       Flex ScrollBars
Largura:100%




                    Altura definida pela conteúdo
 NOUS (Flex)

Browser ScrollBar

     HTML
Browser
Página HTML




                                                                          NOUS (Flex)



Lorem ips...
Área que mostra conteúdo apareceu?
   ADDED_TO_STAGE ou SHOW




ExternalInterface.call(mostraDivECarreg
          aConteu...
Área que mostra conteúdo desapareceu?
   REMOVED_TO_STAGE ou HIDE




ExternalInterface.call(escondeDivEApaga
            ...
DESAFIO #3
Eternal Loading....
AÇÃO #1
Recompactar todas as imagens
AÇÃO #2
Remover todos Embed das
        imagens
    (a não ser que elas apareçam na primeira tela)
AÇÃO #3
 Criar mais Modules e não
carregá-los com a aplicação
“Mas agora quando eu entro no
 módulo administração a tela
    demora pra aparecer”
Depois que a aplicação é carregada e aparece na
 tela, carregamos todos os módulos sem que o
                  usuário sai...
“Mas essa aplicação ainda demora
        muito pra abrir”
AÇÃO #4
Login antes de carregar a
        aplicação
Pessoas consideram uma aplicação
     rápida por duas razões:
1) Ou elas são rápidas de verdade
               ou...
2) Ou elas dão a impressão de
       serem rápidas
Passo #1
Exterminar a tela de login do Flex
Passo #2
Criar uma nova tela de login em HTML
Passo #3
Colocar a nova tela de login em cima da tela
de loading do Flex
DESAFIO #4
Performance
90% dos problemas de performance estavam no back-end
ANTES



select t from Topic t
DEPOIS


select t.name,
       t.description,
       t.date
       from Topic t
ANTES

public class Package
{
	 	 public var id:Number;
     public var status:String;
	 	 public var packageBarcode:Strin...
OrderItem tem:

• Order
  •Shipment
   •Terminal
  •OrderItem[]
•Product
DEPOIS
public   class Package
{
	 	      public   var   id:Number;
	 	      public   var   orderId:Number;
	 	      public...
ANTES
	   <mx:Box>
	   	 <mx:Canvas>
	   	 	 <mx:HBox>
	   	 	 	 <mx:Canvas>
	   	 	 	 	 <mx:VBox>
	   	 	 	 	 	 <mx:Label...
DEPOIS


<mx:Canvas>
	 <mx:Label text="Hello"/>
</mx:Canvas>
ANTES


model.user.name = "Joao"
model.user.abstract = ""
model.user.birthdate = new Date(1988, 04, 26)
model.user.adminis...
DEPOIS


var user:User = model.user
user.name = "Joao"
user.abstract = ""
user.birthdate = new Date(1988, 04, 26)
user.adm...
Dúvidas?
Obrigado!
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC
Upcoming SlideShare
Loading in …5
×

Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC

2,818 views
2,703 views

Published on

Palestra Desafios no desenvolvimento de uma aplicação real com Flex" no primeiro encontro do FUGSC

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,818
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide






































































  • Desafios no desenvolvimento de uma aplicação real com Flex @ FUGSC

    1. 1. Desafios no desenvolvimento de uma aplicação real com Flex João Augusto Zaratine <zaratine@gmail.com> blog.joaoaugusto.com.br @joaozaratine Julho/2010
    2. 2. Eu Flex desde 2007 Informant <www.informant.com.br> NOUS <www.noussoftware.com> blog.joaoaugusto.com.br @joaozaratine
    3. 3. A APLICAÇÃO
    4. 4. http://vimeo.com/13278187 Texto
    5. 5. DESAFIO #1 Criando textos de verdade
    6. 6. O que queríamos...
    7. 7. O que tínhamos...
    8. 8. ✓Alinhamento ✓Tamanhos ๏Imagens ✓sublinhado Negrito, itálico, x Colunas x Tabelas ✓Marcadores x Embed ✓Cores x Ctrl+V do Word ✓Links
    9. 9. ✓Alinhamento ✓Tamanhos ✓Colunas ✓sublinhado Negrito, itálico, ๏Imagens x Tabelas ✓Marcadores x Embed ✓Cores x Ctrl+V do Word ✓Links
    10. 10. É quase impossível usar o TLF
    11. 11. “O CKEditor é o que precisamos... Isso não é Flex, é?”
    12. 12. “Já sei, vamos fazer um popup”
    13. 13. Bom, agora só falta exibir o texto....
    14. 14. DESAFIO #2 Exibindo conteúdo HTML
    15. 15. Tentativa #1 htmlText
    16. 16. ✓ <a> ✓ <u> ✓ <b> x <div> ✓ <br> x <table>, <th>, <tr>, <td> ✓ <font> x <object>, <embed> ✓ <img> x <em> ✓ <i> x <form> ✓ <li> x <input> ✓ <p> x <h1>, <h2>, <h3>, <h4>... ✓ <textformat> x Etc e tal
    17. 17. Tentativas #2 #3 #4 #5 #6...
    18. 18. DENG
    19. 19. DENG IFrame 1
    20. 20. DENG IFrame 1 IFrame 2
    21. 21. DENG IFrame 1 IFrame 2 IFrame 3
    22. 22. DENG IFrame 1 IFrame 2 IFrame 3 IFrame 4
    23. 23. DENG IFrame 5 IFrame 1 IFrame 2 IFrame 3 IFrame 4
    24. 24. DENG IFrame 6 IFrame 5 IFrame 1 IFrame 2 IFrame 3 IFrame 4
    25. 25. Qual é o melhor lugar para exibir HTML?
    26. 26. Qual é o melhor lugar para exibir HTML? Talvez numa página HTML?
    27. 27. Largura:100% Altura: 100% Aplicação Flex Tradicional Flex ScrollBars
    28. 28. Largura:100% Altura definida pela conteúdo NOUS (Flex) Browser ScrollBar HTML
    29. 29. Browser Página HTML NOUS (Flex) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae elit placerat justo sollicitudin posuere. Sed pulvinar velit eu elit pellentesque tristique. Nam consectetur dui eu elit consectetur eget tincidunt massa vestibulum. Vivamus nisi libero, pretium et aliquet ut, ultrices ac purus. Etiam nibh dui, faucibus ut venenatis ut, accumsan a augue. Conteúdo HTML Sed feugiat nisi sed ipsum bibendum imperdiet. Etiam lobortis vulputate metus ac interdum. Morbi porta semper vestibulum. Pellentesque lobortis quam non diam sagittis vitae rhoncus tortor viverra. Nam ut ultricies urna.
    30. 30. Área que mostra conteúdo apareceu? ADDED_TO_STAGE ou SHOW ExternalInterface.call(mostraDivECarreg aConteudoPorAjax)
    31. 31. Área que mostra conteúdo desapareceu? REMOVED_TO_STAGE ou HIDE ExternalInterface.call(escondeDivEApaga SeuConteudo)
    32. 32. DESAFIO #3 Eternal Loading....
    33. 33. AÇÃO #1 Recompactar todas as imagens
    34. 34. AÇÃO #2 Remover todos Embed das imagens (a não ser que elas apareçam na primeira tela)
    35. 35. AÇÃO #3 Criar mais Modules e não carregá-los com a aplicação
    36. 36. “Mas agora quando eu entro no módulo administração a tela demora pra aparecer”
    37. 37. Depois que a aplicação é carregada e aparece na tela, carregamos todos os módulos sem que o usuário saiba
    38. 38. “Mas essa aplicação ainda demora muito pra abrir”
    39. 39. AÇÃO #4 Login antes de carregar a aplicação
    40. 40. Pessoas consideram uma aplicação rápida por duas razões:
    41. 41. 1) Ou elas são rápidas de verdade ou...
    42. 42. 2) Ou elas dão a impressão de serem rápidas
    43. 43. Passo #1 Exterminar a tela de login do Flex
    44. 44. Passo #2 Criar uma nova tela de login em HTML
    45. 45. Passo #3 Colocar a nova tela de login em cima da tela de loading do Flex
    46. 46. DESAFIO #4 Performance
    47. 47. 90% dos problemas de performance estavam no back-end
    48. 48. ANTES select t from Topic t
    49. 49. DEPOIS select t.name, t.description, t.date from Topic t
    50. 50. ANTES public class Package { public var id:Number; public var status:String; public var packageBarcode:String; public var orderItem:OrderItem; }
    51. 51. OrderItem tem: • Order •Shipment •Terminal •OrderItem[] •Product
    52. 52. DEPOIS public class Package { public var id:Number; public var orderId:Number; public var orderItemId:Number; public var status:String; public var packageBarcode:String; public var postalBarcode:String; public var shipWay:String; public var productName:String; public var reference:String; public var date:Date; public var name:String; public var address:String; public var number:String; public var city:String; public var country:String; public var postalCode:String; public var neighborhood:String; public var phone:String; }
    53. 53. ANTES <mx:Box> <mx:Canvas> <mx:HBox> <mx:Canvas> <mx:VBox> <mx:Label text="Hello"/> </mx:VBox> </mx:Canvas> </mx:HBox> </mx:Canvas> </mx:Box>
    54. 54. DEPOIS <mx:Canvas> <mx:Label text="Hello"/> </mx:Canvas>
    55. 55. ANTES model.user.name = "Joao" model.user.abstract = "" model.user.birthdate = new Date(1988, 04, 26) model.user.administrator = true
    56. 56. DEPOIS var user:User = model.user user.name = "Joao" user.abstract = "" user.birthdate = new Date(1988, 04, 26) user.administrator = true
    57. 57. Dúvidas?
    58. 58. Obrigado!

    ×